Performance issue when many columns displayed

[gioeau]

Describe the bug (actual behavior)

When many columns are added to the table (in the hundreds), performance is hit severely.

Expected behavior

Performance shouldn't be hit so much by the number of columns in the table.

Reproduction

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

[veekeys]

Hello @gioeau
Thank you for the issue!

Even though we do have virtualization on the rows of the table and it performs really well (can find it here with 100k elements), the big amount of columns can really mess it up.
Virtualization on rows renders you ~30 rows (depends on height of rows and table height), but when those need to render 150 additional cells each we still end up with thousands of divs to render, so performance is pretty bad. We do have support for horizontal scroll, but not virtualization with it.
We would need to add virtualization to perform. But the UX of it looks pretty questionable.
As this looks like edge case, I cannot promise you we are going to work on this soon. Feel free to contribute yourself to support this feature, if you need it soon.

What user is expected to do with 100+ columns in the table?
If you have dynamic data to be shown, maybe you could use info panel to display it when needed.
Another option might be expandable rows and put info in there as those are rendered only on demand.

Let me know if there is anything else we could help with.

[r100-stack]

Just to add on, you can also consider adding a column manager (example) to show only a subset of columns at any time. If you feel that the column manager has some missing features for your use case (since you have many columns), you can voice your thoughts on a related issue (#783).

You can also try some suggestions mentioned in a similar issue about trying to improve the Table's performance (#888 (comment)). This might be pertinent because some of the performance issues in your playground is coming from the many rows rather than just the many columns.

[mayank99]

Yeah, column manager is probably the right move here. I don't think there's a good solution for performantly displaying hundreds of columns at the same time. This is a UX issue as much as a technical issue.