Problem with virtual scrolling, many columns and not so many data

[zatopek-firstis]

Hi, we have encountered a problem when enabling virtual scrolling and having many columns, in demo below I made a table where we have 100 columns with only 20 of them visible, 80 not visible and 2000 rows of data, feel free to increase number of cols, or how many rows of data is there, with just one more zero - 20000, the table becomes unusable.

https://stackblitz.com/edit/ka-table-virtual-scrolling-with-many-cols?file=Demo.tsx

After a bit of debugging I found out that the problem lies in TableWrapper, line 38 const preparedOptions = prepareTableOptions(props); where inside of this function there is data handling, which is done in every render. And by any I mean even resizing column and that has nothing to do with data, so the data turns out to be exactly the same as previous render but it takes so much time to do the algorithms again.

Can you please take a look at it and optimize it please?

Here is screenshot of Profiler from our app, where we have 556 rows of data and 86 total columns, 15 visible, and as you can see, the total time it took to render TableWrapper with all child components is 213.6ms, but all child components render time is 29.8 ms combined, which leaves TableWrapper alone with 183.8 ms, and that is just for one action (selectRow in this screen) We have even focus enabled, so that is clearFocus, setFocus and selectRow actions in 550 ms.

Thank you very much.

[komarovalexander]

Hi @zatopek-firstis thanks for well described issue, I will have a look on it soon

[komarovalexander]

Hi @zatopek-firstis I have fixed this performance issue in v9.0.0 https://stackblitz.com/edit/ka-table-virtual-scrolling-with-many-cols-jx2khc?file=Demo.tsx