tanstack-svelte-table-with-tanstack-virtual

This skill builds on @tanstack/table-core#core, getting-started, and table-state. Virtual is a rendering layer over Table’s final model, never a tableFeatures plugin.

Setup

<script lang="ts">
  import { get } from 'svelte/store'
  import { createVirtualizer } from '@tanstack/svelte-virtual'

  let scrollElement = $state<HTMLDivElement>()
  const rows = $derived(table.getRowModel().rows)
  const rowVirtualizer = createVirtualizer({
    count: rows.length,
    getScrollElement: () => scrollElement ?? null,
    estimateSize: () => 34,
    getItemKey: (index) => rows[index]!.id,
    overscan: 5,
  })