feature : update only changed data

[lcaouen]

React Tabulator refreshes all the data using this.table.setData(this.state.data). When having a lot of data, this is too slow and it refreshes too many things.

Would it be possible to have another props "refreshData" which will only add new data and refresh data which has changed :

• if refreshData prop is not empty then ignore data prop
• use lodash for instance to detect new and change
• call table.updateData([{id:1, name:"bob", gender:"male"}, {id:2, name:"Jenny", gender:"female"}]); for existing data
• call table.addData([{id:1, name:"bob", gender:"male"}, {id:2, name:"Jenny", gender:"female"}], true); for new data

[ngduc]

usually, avoid rendering a lot of data, use pagination or virtualization.

I'm not sure this refreshData will be helpful for common use cases cc @olifolkerd do we have a similar function for this purpose in tabulator?

[lcaouen]

Here is a codesandbox example : https://codesandbox.io/s/elastic-rgb-qgict?file=/src/App.js:430-447

the data refreshing is done in componentDidMount and componentDidUpdate using updateOrAddData and deleteRow of tabulator

[ngduc]

Great example @lcaouen ! I love the idea to optimize for performance. It will increase the bundle size if we add lodash. It would be great if you could open a pull request for this feature (instead of using lodash, maybe copy its functions over?).