# Table State

Read and control Table v9 state in angular.

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

Load `intent load @tanstack/table-core#table-state` first for shared ownership, initialization, updater, and reset rules.

Angular-backed atom reads participate in tracking inside templates, `computed`, and `effect`. A value captured outside those contexts is only a snapshot. Use `computed` for derivation or equality control; wrapping an atom is not required to make it reactive.

## Controlled signal setup

<!-- skill-snippet:check tsconfig=scripts/skill-snippets-angular.tsconfig.json -->

```ts
import { Component, signal } from '@angular/core'
import {
  injectTable,
  rowPaginationFeature,
  tableFeatures,
} from '@tanstack/angular-table'

const features = tableFeatures({ rowPaginationFeature })
const columns = [{ accessorKey: 'name' }]
const data = [{ name: 'Ada' }]

@Component({
  selector: 'page-status',
  template: `<button (click)="table.nextPage()">
    Page {{ table.atoms.pagination.get().pageIndex + 1 }}
  </button>`,
})
export class PageStatus {
  readonly pagination = signal({ pageIndex: 0, pageSize: 20 })
  readonly table = injectTable(() => ({
    features,
    columns,
    data,
    state: { pagination: this.pagination() },
    onPaginationChange: (next) =>
      typeof next === 'function'
        ? this.pagination.update(next)
        : this.pagination.set(next),
  }))
}
```

## Reactive boundaries

- Construct in Angular injection context. Signal writes used by the initializer rerun it and call `setOptions`; hoist features and columns and keep data references stable.
- Supply both `state.pagination` and `onPaginationChange` when a signal owns the slice. Resolve updater functions with `.update(next)` instead of storing the function with `.set(next)`.
- For shared state, create a stable atom with `@tanstack/angular-store` and pass it through `atoms`. Its writes do not need to flow through a controlled signal in the initializer.
- Use `table.store.get()` for the flat state. Prefer `table.atoms.<slice>.get()` for narrow tracked reads.

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