Possible implementation of a virtual list ?

[FluffyDiscord]

Hi,
I am aware that we already have pagination plugin in place which works great, but would it be possible to add an "infinite virtual list" pagination plugin ?

The idea would be to limit the table height and specify (or auto-calculate if reasonable) how many items will be shown/rendered and the rendered offset would be managed by scroll, eg. infinite virtual scroll.

Maybe this would be possible to "plug-in" ? https://github.com/Skayo/svelte-tiny-virtual-list

[bryanmylee]

Could you try something like this?

<script lang="ts">
  import VirtualList from 'svelte-tiny-virtual-list';
  import {createTable} from 'svelte-headless-table';

  const table = createTable();
  const columns = table.createColumns(...);
  const {rows} = table.createViewModel(columns);
</script>

<table>
  <thead>...</thead>
  <!-- use the virtual list component as `tbody` -->
  <!-- we can PR `asChild` or `as` support for `svelte-tiny-virtual-list` -->
  <VirtualList
    width="100%"
    height={600}
    itemCount={$rows.length}
    itemSize={50}>
    <svelte:fragment slot="item" let:index let:style>
      {@const row = $rows[index]}
      <Subscribe rowAttrs={row.attrs()}>
        <tr {style} {...rowAttrs}>
          {#each row.cells as cell (cell.id)}
            <Subscribe attrs={cell.attrs()} let:attrs>
              <td {...attrs}>
                <Render of={cell.render()} />
              </td>
            </Subscribe>
          {/each}
        </tr>
      </Subscribe>
    </svelte:fragment>
  </VirtualList>
</table>

[FluffyDiscord]

Not really, since the package adds two DOM elements to manage it's list, thus breaking the header columns (not aligned)

[bryanmylee]

@FluffyDiscord Full disclaimer, I've never used svelte-tiny-virtual-list before but it's probably there to provide the overflow behaviour. Looking at it's code, it provides slots for the header and footer so you could try:

<script lang="ts">
  import VirtualList from 'svelte-tiny-virtual-list';
  import {createTable} from 'svelte-headless-table';

  const table = createTable();
  const columns = table.createColumns(...);
  const {rows} = table.createViewModel(columns);
</script>

<!-- use the virtual list component as `table` -->
<!-- we can PR `asChild` or `as` support for `svelte-tiny-virtual-list` -->
<VirtualList
  width="100%"
  height={600}
  itemCount={$rows.length}
  itemSize={50}>
  <thead slot="header">...</thead>
  <svelte:fragment slot="item" let:index let:style>
    {@const row = $rows[index]}
    <Subscribe rowAttrs={row.attrs()}>
      <tr {style} {...rowAttrs}>
        {#each row.cells as cell (cell.id)}
          <Subscribe attrs={cell.attrs()} let:attrs>
            <td {...attrs}>
              <Render of={cell.render()} />
            </td>
          </Subscribe>
        {/each}
      </tr>
    </Subscribe>
  </svelte:fragment>
</VirtualList>

[FluffyDiscord]

no, since virtual list provides its own elements that wrap around tr and breaking the table, setting up display: content does not work, since it breaks it

[bryanmylee]

That's really annoying. There has to be a better virtualization library for Svelte out there

[FluffyDiscord]

The mentioned package is the best I have seen so far.

[Feroks]

@FluffyDiscord Have you found a solution? I am trying to implement infinite scrolling as well.

[FluffyDiscord]

No, I rewrote the table to use pagination instead. It's simply not possible with this library AFAIK

[stemcc]

Update for 2024:

I've successfully gotten the Tanstack Virtual Svelte adapter working with Svelte Headless Table using this example and @bryanmylee's proposed solution as guides.

The implementation is still basic since I just got it working last night, but it seems to be working just fine with a 10,000 item list.

[dj-nuo]

Do you mind sharing your complete example?)

[bamaas]

I'm also interested! @stemcc