# Table State

Read and control Table v9 state in vue.

- 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 vue. 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)

# Vue table state

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

## Read reactive state

Vue-backed atom reads track dependencies inside templates, `computed`, `watch`, or a render boundary. `const page = table.atoms.pagination.get()` outside tracking captures a snapshot. Keep reactive option inputs as refs, computed values, or getters; passing `.value` once breaks later synchronization.

`table.Subscribe` is deprecated. Read table APIs or atoms directly inside templates, render functions, computed getters, or watcher sources. Use a child component when reads need a separate component render boundary.

## Control a slice

Keep features and columns stable. Preserve both the reactive value and its matching callback:

```ts
import { computed, ref } from 'vue'
import {
  rowPaginationFeature,
  tableFeatures,
  useTable,
  type PaginationState,
  type Updater,
} from '@tanstack/vue-table'

const features = tableFeatures({ rowPaginationFeature })
const columns = [{ accessorKey: 'name' }]
const data = ref([{ name: 'Ada' }])
const pagination = ref<PaginationState>({ pageIndex: 0, pageSize: 20 })
const state = computed(() => ({ pagination: pagination.value }))
const table = useTable({
  features,
  columns,
  data,
  state,
  onPaginationChange: (next: Updater<PaginationState>) => {
    pagination.value =
      typeof next === 'function' ? next(pagination.value) : next
  },
})
const pageSize = computed(() => table.atoms.pagination.get().pageSize)
```

Assign the resolved updater result to the ref. For shared atom ownership, use a stable `@tanstack/vue-store` atom in `atoms.<slice>` instead of mirroring the same slice in controlled refs.

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