Table: Column resize lags with many rows

[HaveSpacesuit]

When a table has many rows, resizing columns is not very responsive. I suspected it was due to using a custom state reducer, but the problem is reproducible on a simple table with or without virtualization.

https://codesandbox.io/s/itwinui-react-minimal-example-forked-qfhsfr?file=/src/App.tsx

I don't know a good solution. Would it be possible to artificially decrease the virtualized rows during a column resize?

[mayank99]

Hi @HaveSpacesuit, I can't seem to reproduce the lag on my machine (probably because of faster CPU), but I'm also not sure how we would fix this. If I had to guess, this issue is coming from react-table v7 (we use their resize hook).

Have you tried to run the profiler to see what part exactly is causing the lag? Also have you tried to run the production build to see if it's faster (dev version of react is usually slower)?

I wonder if this would be fixed by react-table v8. If not, I think we could look into delaying the renders until the mouse is released.

Another potential cause is just the fact that we are asking the browser to recalculate layout on every pixel change, which is expensive. A more performant way might be to use CSS transforms during the resizing, and then update the actual width after it finishes (kinda like the FLIP technique).

[bentleyvk]

For me it is also working pretty smoothly with 10 or even with 1000 items, maybe you have something running in the background. It was kind of expected that it can be a bit laggy with a lot of rows but virtualization fixes this. I was thinking that in further versions table could be redone with grid so resizing would not trigger React rerenders in order to change every column's cell width and everything would be handled trough CSS.

[HaveSpacesuit]

I'm also not reproducing anything too abnormal on code sandbox today. Like I said, I thought maybe it had something to do with my custom state reducer, but I was able to remove that from the equation in the sandbox repo.

Our full app has a noticeable lag on localhost builds, a slightly better performance on our QA site, and like suggested, it is even better on Prod with the prod build of React.

I'm fine to close this bug. I like some of the ideas you suggested such as using the CSS transforms or even just using only CSS to determine the column width. But I don't expect those to be prioritized soon unless you have a better reason. 🙂