search

carbon-design-system / carbon-components-svelte

Svelte implementation of the Carbon Design System
https://svelte.carbondesignsystem.com
Apache License 2.0
2.69k stars 261 forks source link

Virtual Data table #1192

Open adamrpostjr opened 2 years ago

adamrpostjr commented 2 years ago

The data table is amazing, one of the better data tables that I have used. The single problem that I have with the data table is that when I have 1000+ items in the list I start to overload the DOM, causing the page to be VERY slow. The only fix for this currently is to paginate. Pagination works fine, but in the age of Svelte where everything is SO reactive it feels old, slow, and clunky to paginate.

Recently, I have moved away from using carbon components' data table to using a virtual list with headers.

It would be a MAJOR benefit to have a virtual list in the data table natively!

brunnerh commented 2 years ago

I second this. Unfortunately this probably is not a simple thing to add. Ideally, it also should still support dynamic cell heights, allowing for line breaks according to the content, but I have yet to see a virtualized table implementation that can actually do that properly.

albert-schilling-enerparc commented 3 months ago

but I have yet to see a virtualized table implementation that can actually do that properly

This is actually no problem to implement with popular virtualization libraries like react-window and tanstack/virtual.

We currently face the same limitation of Carbon. We have our own implementation of a virtualized highly flexibel table with flexibel row heights, sub-rows etc. built with tanstack/table and react-window. As long as there is no support for virtualization in the Carbon Table, our plan is to adjust our table's styling to CDS.

But of course, we would prefer having an official CDS Data Table with virtualization.