Grid barely responsive with 1000 rows, about 10 columns
Despite original delay during first render, I've also got few seconds delay when trying to use key navigation or change a cell.
How could I make it fast? Also how could I show eg 20 rows on screen and use scroll or key navigation to show the rest?
Try to avoid passing the component with arrow functions or binding them in the render function. Otherwise 1000 rows is pretty extensive. A proper solution would be to use react-virtualized for the rendering. I'll get around to trying something like that eventually.
I think there is a lot of room for improvement, especially for selecting and editing, even without react-virtualized will try to get my head around this soon and send a PR.
I was able to do it without making react-virtualized a hard dependency by modifying the render in DataSheet.js to pass back a virtual row renderer that matched the react-virtualized api.
https://gist.github.com/cthurston/516117bb5143ed0e455143962fafef57
It feels a little circular. With a small change in the DataSheet api something close to this may be a viable route to performance on large datasets.
Hey there. I created a contemporary variant at iddan/react-spreadsheet. Way more responsive on large datasets. Going to make it even more in the following week by fixing the new React Context API polyfill.
@cthurston i tried your solution and did not worked :/ Just throw a lot of Invariant Violation's errors.
The gist is correct?
What did not work?
@iddan needed Help on virtual columns and Rows implementation please provide me some input
simply perform natural transformation of react-virtualized onto react-datasheet