CODEWITHSUNDEEP
reactjsreact-table
aweis
aweis

Reputation: 5596

React table, editable with pagination and 20k rows performance issues

I have an React table that contains 20k+ rows and some of these rows contains editable fields. I e.g. have a number field in which I have a component where it is possible to +/- the value.

I have been using the Examples: Editable Data from react tables own page, where all data is stored in as useState and then on each update it is changed - this however performes very badly, as the re-render delays the value changes when clicking the + button multiple times. Is there a way to handle this better and maybe also keep the original data such that is it possible to do a "reset", such that I don't need to overwrite the entire dataset for the table.

Upvotes: 3

Views: 3677

Answers (1)

Damian Busz
Damian Busz

Reputation: 1848

I did some research on the topic and found that you could use react-virtualized.

React components for efficiently rendering large lists and tabular data

It seems that it would be perfect solution to your problem.

Whats very cool is that by default all react-virtualized components use shallowCompare to avoid re-rendering unless props or state has changed.

Hope this will be a good replacement for react-table

Upvotes: 1

Related Questions