Skip to main content

table-state

Read and control Table v9 state in octane. Use for tracked reads, subscriptions, controlled slices, and framework-specific reactive boundaries.

소스 정보

저장소
TanStack/table
최근 소스 활동
2026년 10월 10일 04:17
감지된 SKILL.md 언어
영어
스타
28,480
포크
3,587

설치 방법

기본적으로 소스를 먼저 확인하는 Prompt가 선택됩니다. 직접 명령으로 전환하거나 로컬 사본을 다운로드할 수도 있습니다.

소스 파일 검토

설치 여부를 결정하기 전에 SKILL.md와 SkillsMP에 표시된 보조 파일을 읽어 보세요.

파일 탐색기
2 개 파일

SKILL.md 표시 중

SKILL.md
소스 지침 · 읽기 전용 미리보기
name
table-state
description
Read and control Table v9 state in octane. Use for tracked reads, subscriptions, controlled slices, and framework-specific reactive boundaries.
metadata
{"type":"framework","library":"@tanstack/octane-table","framework":"octane","library_version":"9.3.0"}
requires
["@tanstack/table-core#table-state"]
sources
["TanStack/table:docs/framework/octane/guide/table-state.md","TanStack/table:examples/octane/basic-subscribe","TanStack/table:examples/octane/basic-external-atoms","TanStack/table:packages/octane-table/src/useTable.tsrx","TanStack/table:packages/octane-table/src/Subscribe.tsrx"]
Load `intent load @tanstack/table-core#table-state` first for shared ownership, initialization, updater, and reset rules. `useTable` selects all registered state by default. Its second argument changes the selected shape exposed as `table.state` and shallow-gates owner rerenders. Atom `.get()` and `table.store.state` reads are snapshots; use selected state or a rendered `table.Subscribe` to update the UI. ## Controlled slice setup ```tsrx import { useState } from 'octane' import { rowPaginationFeature, tableFeatures, useTable, } from '@tanstack/octane-table' const features = tableFeatures({ rowPaginationFeature }) const columns = [{ accessorKey: 'name' }] const data = [{ name: 'Ada' }] function PageStatus() @{ const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 20 }) const table = useTable({ features, columns, data, state: { pagination }, onPaginationChange: setPagination, }) <button onClick={() => table.nextPage()}> Page {String(table.state.pagination.pageIndex + 1)} </button> } ``` ## Reactive boundaries - Pass both the controlled value and its callback. Octane setters accept Table's value-or-updater callbacks; a callback alone cannot feed the new value back. - Render `<table.Subscribe>` as a component. Calling it as a normal function shares the owner's compiler slots instead of creating an independent hook scope. - `useTable` stages fresh options for same-render reads. Controlled state reaches the store only from an accepted layout commit, so abandoned work cannot publish speculative values. - A stable atom from `@tanstack/octane-store` is a direct synchronous owner. Table writes reach it immediately; it takes precedence over controlled `state` for the same slice. - Keep features, columns, and data stable. Use the default selector until render cost justifies narrower subscriptions. ## Read for the task For advanced reactive boundaries, shared atoms, or detailed subscription examples, read [reactivity](references/reactivity.md). For construction or rendering setup, read [getting-started](../getting-started/SKILL.md). ## API discovery Inspect `node_modules/@tanstack/octane-table/src/index.d.ts`, the matching `*.tsrx.d.ts` sidecar, and `src/types.ts`. This package publishes authored source; core APIs are in installed `@tanstack/table-core/dist/`.
GitHub에서 보기