table-state
Read and control Table v9 state in solid. Use for tracked reads, subscriptions, controlled slices, and framework-specific reactive boundaries.
来源信息
- 仓库
- TanStack/table
- 最近来源活动
- 2026年10月4日 17:47
- 检测到的 SKILL.md 语言
- 英语
- 星标
- 28,473
- 分支
- 3,587
安装方式
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
检查来源文件
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
文件资源管理器
2 个文件正在显示 SKILL.md
SKILL.md
来源说明 · 只读预览- name
- table-state
- description
- Read and control Table v9 state in solid. Use for tracked reads, subscriptions, controlled slices, and framework-specific reactive boundaries.
- metadata
- {"type":"framework","library":"@tanstack/solid-table","library_version":"9.2.6","framework":"solid"}
- requires
- ["@tanstack/table-core#table-state"]
- sources
- ["TanStack/table:docs/framework/solid/guide/table-state.md","TanStack/table:examples/solid/basic-external-state","TanStack/table:packages/solid-table/src/createTable.ts"]
# Solid table state
Before starting, run `intent load @tanstack/table-core#table-state` for shared ownership, initialization, updates, and resets.
## Read reactive state
The adapter backs table atoms with Solid signals and memos. Read `table.atoms.<slice>.get()` inside JSX, `createMemo`, `createEffect`, or another tracked scope. A value captured once outside tracking is only a snapshot. Solid has no React-style selected `table.state`.
`table.Subscribe` passes atoms to its child. The child component body is untracked; put reads inside JSX expressions or a thunk invoked by JSX. Track the required atoms instead of adding whole-store forced rerenders.
## Control a slice
Keep features and columns stable. Expose changing data and controlled state through getters. Solid setters already accept Table's raw values and updater functions:
```tsx
import { createMemo, createSignal } from 'solid-js'
import {
createTable,
rowPaginationFeature,
tableFeatures,
type PaginationState,
} from '@tanstack/solid-table'
const features = tableFeatures({ rowPaginationFeature })
const columns = [{ accessorKey: 'name' }]
export function PageControl() {
const [data] = createSignal([{ name: 'Ada' }])
const [pagination, setPagination] = createSignal<PaginationState>({
pageIndex: 0,
pageSize: 20,
})
const table = createTable({
features,
columns,
get data() {
return data()
},
state: {
get pagination() {
return pagination()
},
},
onPaginationChange: setPagination,
})
const pageSize = createMemo(() => table.atoms.pagination.get().pageSize)
return (
<button onClick={() => table.setPageSize(50)}>
{pageSize()} rows per page
</button>
)
}
```
When wrapping a setter to add a side effect, resolve both updater forms before storing the result. For shared atom ownership, use `createAtom` from `@tanstack/solid-store` and pass it in `atoms.<slice>`.
For external atoms, custom updater wrappers, or tracking failures, read [reactivity details](references/reactivity.md). If this task changes processing features, run `intent load @tanstack/table-core#table-features` and read the relevant feature references.
## API discovery
Inspect `node_modules/@tanstack/solid-table/dist/createTable.d.ts` and `reactivity.d.ts`; inspect `@tanstack/solid-store` declarations for external atoms.
在 GitHub 查看