# Table State

Read and control Table v9 state in ember.

- 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 ember. 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.

Glimmer tracks Table APIs, atom reads, and store-property reads inside template-consumed getters. A value cached outside tracked consumption is only a snapshot. There is no `table.Subscribe` or selector argument to `useTable`; `table.store.subscribe` is intentionally a no-op and cannot drive rendering.

## Controlled tracked setup

```gts
import Component from '@glimmer/component'
import { tracked } from '@glimmer/tracking'
import { on } from '@ember/modifier'
import {
  rowPaginationFeature,
  tableFeatures,
  useTable,
  type PaginationState,
} from '@tanstack/ember-table'

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

export default class PageStatus extends Component {
  @tracked pagination: PaginationState = { pageIndex: 0, pageSize: 10 }
  table = useTable(this, () => ({
    features,
    columns,
    data,
    state: { pagination: this.pagination },
    onPaginationChange: (next) => {
      this.pagination =
        typeof next === 'function' ? next(this.pagination) : next
    },
  }))

  get pageNumber() {
    return this.table.atoms.pagination.get().pageIndex + 1
  }

  nextPage = () => this.table.nextPage()

  <template>
    <button type='button' {{on 'click' this.nextPage}}>Page
      {{this.pageNumber}}</button>
  </template>
}
```

## Reactive boundaries

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