[Question] Reccomended way of doing virtualisation?

[ivarlovlie]

Hi, really enjoying this project, thanks for developing and maintaining it!

Is there any reccomended way of virtualising the tables generated? I know this is not really a concern of the library, but maybe it could become one?

[bryanmylee]

@extremelygooddeveloper I haven't used virtualization a whole lot in Svelte so I'm not too familiar with the best practices in Svelte.

Last time I tried, svelte-virtual-list was unmaintained and untyped so it was a pain to work with, but it should be usable here.

Svelte Headless Table simply returns a list of row models for you to display, so it should work with any virtual list. I'd be happy to try some examples out and add a demo to the docsite.

[blerrgh]

https://github.com/Skayo/svelte-tiny-virtual-list exists too, but I haven't attempted to wrap a headless table in it yet.

[bryanmylee]

@extremelygooddeveloper You can 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>