# Table State

Read and control Table v9 state in svelte.

- Repository: https://github.com/TanStack/table (28539 stars)
- Category: Engineering
- License: MIT
- Last updated: 2026-10-21
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add TanStack/table --skill table-state -g -a claude-code -y`
Codex: `npx skills add TanStack/table --skill table-state -g -a codex -y`
Cursor: `npx skills add TanStack/table --skill table-state -g -a cursor -y`
Gemini CLI: `npx skills add TanStack/table --skill table-state -g -a gemini-cli -y`

## Description

Read and control Table v9 state in svelte. Use for tracked reads, subscriptions, controlled slices, and framework-specific reactive boundaries.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# Svelte table state

Before starting, run `intent load @tanstack/table-core#table-state` for shared ownership, initialization, updates, and resets.

## Read reactive state

In Svelte 5, `table.atoms.<slice>.get()`, `table.store.get()`, and Table API reads track dependencies inside templates, `$derived`, `$derived.by`, or `$effect`. Outside those contexts they return snapshots. Prefer a slice read; a whole-store read reruns for every registered state change.

`createTable` and `createAppTable` take only options. There is no selected `table.state`, `subscribeTable`, or `SubscribeSource`. Use native `$derived` projections.

## Control a slice

Keep features and columns stable. Expose changing data and controlled runes through getters, and resolve both forms of `Updater`:

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

  const features = tableFeatures({ rowPaginationFeature })
  const columns = [{ accessorKey: 'name' }]
  let data = $state([{ name: 'Ada' }])
  let pagination = $state<PaginationState>({ pageIndex: 0, pageSize: 20 })
  const table = createTable({
    features,
    columns,
    get data() {
      return data
    },
    state: {
      get pagination() {
        return pagination
      },
    },
    onPaginationChange: (next) => {
      pagination = typeof next === 'function' ? next(pagination) : next
    },
  })
  const pageSize = $derived(table.atoms.pagination.get().pageSize)
</script>

<button onclick={() => table.setPageSize(50)}>{pageSize} rows per page</button>
```

`createTableState` provides an updater-compatible getter/setter pair when repeating this wiring. For raw external atoms consumed outside table UI, use `useSelector` from `@tanstack/svelte-store`; table UI uses the rune-aware `table.atoms` wrappers.

The rest: https://github.com/TanStack/table/blob/HEAD/packages/svelte-table/skills/table-state/SKILL.md