react-datasheet icon indicating copy to clipboard operation
react-datasheet copied to clipboard

Grid barely responsive with 1000 rows, about 10 columns

Open lowang opened this issue 8 years ago • 8 comments

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?

lowang avatar Jan 31 '18 08:01 lowang

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.

nadbm avatar Feb 02 '18 16:02 nadbm

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.

iddan avatar Feb 14 '18 16:02 iddan

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.

cthurston avatar Feb 24 '18 03:02 cthurston

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.

iddan avatar Feb 25 '18 08:02 iddan

@cthurston i tried your solution and did not worked :/ Just throw a lot of Invariant Violation's errors.

The gist is correct?

kaueburiti avatar Mar 02 '18 19:03 kaueburiti

What did not work?

iddan avatar Jun 16 '18 11:06 iddan

@iddan needed Help on virtual columns and Rows implementation please provide me some input

kamaldlk avatar Jun 19 '18 13:06 kamaldlk

simply perform natural transformation of react-virtualized onto react-datasheet

archywillhe avatar Dec 24 '20 20:12 archywillhe