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,
  })

  // The store adapter does not track getter options. Push reactive inputs.
  $effect(() => {
    get(rowVirtualizer).setOptions({
      count: rows.length,
      getScrollElement: () => scrollElement ?? null,
    })
  })
</script>

<div
  bind:this={scrollElement}
  style="height: 500px; overflow: auto; position: relative"
>
  <div style:height={`${$rowVirtualizer.getTotalSize()}px`}>
    {#each $rowVirtualizer.getVirtualItems() as item (item.key)}
      <div style={`position:absolute;transform:translateY(${item.start}px)`}>
        {rows[item.index].id}
      </div>
    {/each}
  </div>
</div>

Core Patterns

Virtualize visible models

Use table.getRowModel().rows for rows and table.getVisibleLeafColumns() for columns. Recompute counts when filtering, sorting, expansion, or visibility changes.

Make CSS geometry agree with measurement

Use one scroll container, a total-size spacer, positioned items, and either fixed estimates or measureElement. For semantic tables with dynamic rows, follow the maintained grid/flex examples rather than assuming native table layout will honor transforms.

Fetch before the virtual end

In infinite scrolling, compare the last virtual item with fetched row count, then request the next Query page only when more server rows exist and no fetch is active.

Common Mistakes

HIGH Virtualizing raw data

Wrong:

const rows = data

Correct:

const rows = $derived(table.getRowModel().rows)

Raw data ignores Table filtering, sorting, grouping, expansion, and pagination decisions.

Source: examples/svelte/virtualized-rows/src/App.svelte

HIGH Expecting getter options to stay reactive

Wrong:

const virtualizer = createVirtualizer({
  get count() {
    return rows.length
  },
  getScrollElement,
})

Correct:

const virtualizer = createVirtualizer({ count: rows.length, getScrollElement })
$effect(() => {
  get(virtualizer).setOptions({
    count: rows.length,
    getScrollElement,
  })
})

createVirtualizer returns a Svelte store, and its adapter does not track getter options. Push rune-derived counts and the bound scroll element with $effect and get(store).setOptions(...).

Source: examples/svelte/virtualized-rows/src/App.svelte

HIGH Omitting the geometry contract

Wrong:

{#each rowVirtualizer.getVirtualItems() as item}<div>
    {rows[item.index].id}
  </div>{/each}

Correct:

<div style:height={`${$rowVirtualizer.getTotalSize()}px`}>
  <div style="position:absolute"></div>
</div>

Virtual supplies ranges and measurements, not spacer height, transforms, sticky regions, or column widths. In markup, call virtualizer methods through the store auto-subscription ($rowVirtualizer); use get(rowVirtualizer) in script code.

Source: docs/framework/svelte/guide/virtualization.md

API Discovery

Inspect installed @tanstack/svelte-table/dist/ for Table APIs and @tanstack/svelte-virtual/dist/ for the exact virtualizer options. Use the maintained Svelte examples for layout combinations.