# Table State

Read and control Table v9 state in lit.

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

`TableController` selects all registered state by default and requests host updates when selected state changes. `table.state` is the selected render value. `table.atoms.<slice>.get()` and `table.store.state` are snapshots; those reads do not create a template subscription.

## Controlled property setup

<!-- skill-snippet:check tsconfig=examples/lit/basic-table-controller/tsconfig.json -->

```ts
import { LitElement, html } from 'lit'
import { customElement, state } from 'lit/decorators.js'
import {
  TableController,
  rowPaginationFeature,
  tableFeatures,
  type PaginationState,
} from '@tanstack/lit-table'

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

@customElement('page-status')
export class PageStatus extends LitElement {
  @state() private pagination: PaginationState = { pageIndex: 0, pageSize: 10 }
  private controller = new TableController<typeof features, { id: string }>(
    this,
  )

  protected render() {
    const table = this.controller.table({
      features,
      columns,
      data,
      state: { pagination: this.pagination },
      onPaginationChange: (next) => {
        this.pagination =
          typeof next === 'function' ? next(this.pagination) : next
      },
    })
    return html`<button @click=${() => table.nextPage()}>
      Page ${table.state.pagination.pageIndex + 1}
    </button>`
  }
}
```

## Reactive boundaries

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