Virtualized Table? about svelte-tiny-virtual-list

[jchen42703]

Update:
The best way I found was to use CSS grid:

div
  VirtualList
    div slot="item" (add your grid styling here; i.e. `grid grid-flow-col grid-cols-${numCols}`)
      ...

I also added my table header within the virtual list and made idx 0 sticky for a sticky header.

Decided not to create a sandbox because the styling and components were a bit much for me to decouple, so I just provided very basic markup.

[jonasgeiler]

Oh yeah, I see the problem... As you've said, the table won't render properly because of the two divs.

The best solution I can think of is styling the table with flexbox and pretend it's a native table element. The virtual list itself already uses a little bit of flexbox, so this would probably be the least complex solution.
Here's an example (I took most of the CSS from here)

I tried some other solutions, like using svelte-portal or using display: table to force the user agent style on a <div> element, but these didn't work very well.

This library is unfortunately very limited, but I still hope that my example was helpful for you.
Let me know if you need any further help!

[jchen42703]

All good! Thank you for the reply!

I'll post a sandbox as an example if I can ever get it working!

[jonasgeiler]

Perfect! Glad you found a solution!