adazzle / react-grid Goto Github PK
View Code? Open in Web Editor NEWThis project forked from prometheusresearch-archive/react-grid
THIS HAS MOVED and now lives at https://github.com/adazzle/react-data-grid
License: MIT License
This project forked from prometheusresearch-archive/react-grid
THIS HAS MOVED and now lives at https://github.com/adazzle/react-data-grid
License: MIT License
Need to check if affects main grid, or if focus sorts that. When keyboard navigating left in a regular canvas with horizontal scroll we don't fully move the header cell into view. We would ensure that by checking column.left + width vs node.scrollLeft
Happens automatically howdies to browser key events (up / down) but:
A better option may be to move the state for what rows are visible up to the grid. Keep the rendered start/end at the viewport (its an optimisation)
Then we can update this state explicitly in navigateTo. Wed need to also move onScroll Upton the grid
Hi-
Sounds like an interesting project, could you put up a demo to attract interest and contributors?
I tried https://cdn.rawgit.com/adazzle/react-grid/master/examples/index.html, but gets 404s on the scripts.
Thanks!
When you include the toolbar at the moment, you get an Add Row and Filter Row button by default. I want to be able to configure which buttons appear. For example, I have a read only grid that I want the user to be able to filter.
If no row data is provided, provide text that will be displayed in place of the rows.
ERROR in Entry module not found: Error: Cannot resolve module 'jshint' in /home/jeff/src/collect/vendorinv/react-grid
I'm running NodeJS v0.10.36 and NPM v2.3.0.
And here's my full make
output if you need it https://gist.github.com/JeffCarpenter/ef0c690cac85e45736e3.
See SlickGrid for a very strong implementation of features
Griddle looks good, though missing number of features
React-Grid the original version of this. no edits/navigation
ReactiveGrid more of a PoC but has got keyboard navigation
One immediate issue is React doesnt delegate KeyUp unless you are in a form field, so will need to resort back to native / jQuery in ComponentDidMount
We also need to know what row we are on. Cells probably shouldnt be aware of that (though that may too restrictive)
Also need to be carefull about indexes for rows (needs to understand data index, not the display index) and columns (frozen columns, hidden cols, etc) < in both scenarios if we have a cell.idx and a row.idx we will be fine
Controlled through column.celRenderer
Needs to control style and text display. Common use cases will be formatting a number as a currency
May need access to several data attributes, so need to think out how this is done
var cellData = {
value: 1000,
currency: 'GBP',
curencySymbol: '£'
}
//which means calling it with a custom func from row -> cell
//or mayeb use a lens? so:
col = {
key: 'Price',
cellRenderer: CurrencCell,
cellDataLens: function(row) {
return {
value: row.Price,
currency: row.PriceCurrencyCode,
curencySymbol: row.PriceCurrencySymbol
}
}
}
//or only allow 1 attribute, and allow access to row data? <- feels like a bad thing
return (<div>{row.CurrencySymbol}{value}</div>);
Also need to think about allowing custom formulas, and allowing overrides for them - see locked editors. The renderer should indicate if a cell is ReadOnly, Overridable, or Editable. If the value has been overriden, this should be flagged in a consistent manner
We can control the editor easily enough through the column.renderer
property, but need to know if the cell is being edited or not.
Grids are, by design, going to be killing off rows (and cells) as you scroll, so cant use state to manage that. We also want mouse clicks elsewhere to commit the edit, so that implies state is held at a higher level.
Using a prop, seems like a better choice.
Commiting an edit*
Assumed flow would be:
Editor.onCommit=>Editor.Valdate=>Cell.handleCommit=>Cell.onChange=>Row.handleCellChange=>Row.onChange
Canvas and Viewport make this chain a bit longer to then bubble up to the grid so that we can update the data store/state. We could probably jump from Row -> Grid/Store. May be a case where Flux helps out
Editor controls
Simple editors (numbers, dates, etc) will be straightforward. But some editors will require a lot more info than may be contained in a simple key/value set that a cell operates on. A few things to consider
Keyboard navigation
We will want pressing Tab in an editor to either:
Validation
commiting an edit should call a validate function. Needs to be a standard way to provide user feedback, and the commit edit shoudl be blocked till this returns true
Should be easy enough, just need the UX and a sorting algorithm
Also need to ideally add custom sorting via drag handlers. Again, should just be the same
When designing, should extend the simple sample to give the capability for multiple levels of sorting, and sort by (ie sort by Name: Z-A, then by Country: A-Z (or Id, using ISO code?), then by Age: 0-9, then by Date: Oldest to Smallest)
Need to distiunguish between cells that are Editable, ReadOnly, and Overidable
If it is overidable, the cell renderer shoudl indicate this in the same way as ReadOnly, but ideally we'd have teh same user experience for editing - possibly with some UX highlights to show this is overiding.
Ideally done as a form of UX mask
Need to think how we:
Ideally handled at a high level, using OnCopy and OnPaste events
Assuming we have an Active Cell concept, then should be ok to grab that in Copy, and push it on Paste
At first glance this is very, very easy (thanks react!)
however, want to be more efficient that just storing entire object graphs on every change. We want something that works with large collections (100 cols x 1000s rows) with a large number of edits
Maybe do something esoteric like storing individual changes with functional lens to apply that back ontop of the main data?
Should be bloody fast, but need to ensure we only update the dom if we need to
ideally that would just be using immutable data (by convention, or being clever
shouldComponentUpdate: function(object nextProps, object nextState) {
return nextProps !== this.props;
}
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.