Table becomes laggy when displaying a long table

[sarah-vo19]

Hi @OvidijusParsiunas, I tried using Activetable with NextJs to display a really long table (around 1000 lines) and the scrolling experience is laggy + my browser freezes after a minute or two. Do you have any advice on how to tackle this problem? Thanks

This is a sandbox example: https://codesandbox.io/p/sandbox/active-table-react-xlsx-forked-5z7y65?file=%2Fsrc%2Findex.tsx
You can try uploading this file and you'll see the UI become frozen:
mock long data.csv

Screen.Recording.2024-04-01.at.15.52.59.mov

[OvidijusParsiunas]

Hi @sarah-vo19. Thankyou for describing the problem and sending a video to help illustrate it.

I believe the laggyness/stutterring is caused by the fact that constructing editable cells is a little more complex over a static cells - mostly to due to the addition of event listeners.

As much as I would love to try and optimize it, I believe this is an unfortunate performance cap that comes with editable tables (where all cells are editable), hence I don't think I can really do much more to make it more performant.
If I get more time in the future, I would like to investigate this further, but the result will likely remain similar. My apologies.