createTable

Every Svelte Headless Table starts with createTable. It takes your data and a plugin configuration, and returns a Table instance.

Usage

`createTable: (data, plugins?) => Table`

data is either:

an array (Item[]) for data that never changes, or
a getter (() => Item[]) for data that does. The getter is read inside the view model’s derivations, so when it reads rune state the table updates on its own.

// Static data
const table = createTable(people)

// Reactive data: keep it in $state and pass a getter
let people = $state.raw(await fetchPeople())
const table = createTable(() => people, {
    sort: addSortBy(),
    filter: addColumnFilters()
})

// Later: assign a new array and the table follows
people = [...people, newPerson]

// Static data
const table = createTable(people)

// Reactive data: keep it in $state and pass a getter
let people = $state.raw(await fetchPeople())
const table = createTable(() => people, {
    sort: addSortBy(),
    filter: addColumnFilters()
})

// Later: assign a new array and the table follows
people = [...people, newPerson]

Use $state.raw for row data you replace wholesale: it skips the deep proxy, and the table only needs to see a new array.

plugins is an optional object of plugin names to plugins. Refer to the plugin system for how to use Svelte Headless Table plugins.

A Svelte store is not accepted: createTable throws with a message pointing at the migration guide. The library imports nothing from svelte/store.

Converting v6 data

v6	v7
`createTable(readable(items))`	`createTable(items)`
`const data = writable(items)` + `createTable(data)`	`let data = $state.raw(items)` + `createTable(() => data)`
`data.set(next)` / `$data = next`	`data = next`
a store you cannot replace (it comes from another library)	wrap it in your own code, see below

If the data lives in a store you do not own, convert it in your component with Svelte’s fromStore and read its current in the getter:

import { fromStore } from 'svelte/store'

const rows = fromStore(externalStore)
const table = createTable(() => rows.current)

import { fromStore } from 'svelte/store'

const rows = fromStore(externalStore)
const table = createTable(() => rows.current)