Svelte Table setup and integration

Before starting, run intent load @tanstack/table-core#core for the shared headless model and stable-input rules.

Setup

Keep features and columns outside reactive work; expose changing rune values through getters.

<script lang="ts">
  import {
    createTable,
    FlexRender,
    tableFeatures,
  } from '@tanstack/svelte-table'

  type Person = { firstName: string; age: number }
  const features = tableFeatures({})
  const columns = [
    { accessorKey: 'firstName', header: 'First name' },
    { accessorKey: 'age', header: 'Age' },
  ]
  let data = $state<Person[]>([{ firstName: 'Ada', age: 36 }])

  const table = createTable({
    features,
    columns,
    get data() {
      return data
    },
  })
</script>

<table>
  <thead>
    {#each table.getHeaderGroups() as group (group.id)}
      <tr
        >{#each group.headers as header (header.id)}<th
            >{#if !header.isPlaceholder}<FlexRender {header} />{/if}</th
          >{/each}</tr
      >
    {/each}
  </thead>
  <tbody>
    {#each table.getRowModel().rows as row (row.id)}
      <tr
        >{#each row.getAllCells() as cell (cell.id)}<td
            ><FlexRender {cell} /></td
          >{/each}</tr
      >
    {/each}
  </tbody>
</table>

Essential constraints

V9 requires Svelte 5 and createTable. Expose changing runes through getters; data captured once cannot follow reassignment. Keep features and columns outside reactive work and use $derived for transformed arrays.

Table owns models and state. The application owns markup, CSS, interactions, and accessibility. Core-only tables use row.getAllCells(); visibility-aware methods need columnVisibilityFeature. Optional state and APIs require their features. Put row-model slots after their prerequisite features in tableFeatures().

Load by task