table-state
Read and control Table v9 state in alpine. Use for tracked reads, subscriptions, controlled slices, and framework-specific reactive boundaries.
소스 정보
- 저장소
- TanStack/table
- 최근 소스 활동
- 2026년 10월 12일 16:41
- 감지된 SKILL.md 언어
- 영어
- 스타
- 28,493
- 포크
- 3,589
설치 방법
기본적으로 소스를 먼저 확인하는 Prompt가 선택됩니다. 직접 명령으로 전환하거나 로컬 사본을 다운로드할 수도 있습니다.
소스 파일 검토
설치 여부를 결정하기 전에 SKILL.md와 SkillsMP에 표시된 보조 파일을 읽어 보세요.
파일 탐색기
2 개 파일SKILL.md 표시 중
SKILL.md
소스 지침 · 읽기 전용 미리보기- name
- table-state
- description
- Read and control Table v9 state in alpine. Use for tracked reads, subscriptions, controlled slices, and framework-specific reactive boundaries.
- metadata
- {"type":"framework","library":"@tanstack/alpine-table","framework":"alpine","library_version":"9.3.1"}
- requires
- ["@tanstack/table-core#table-state"]
- sources
- ["TanStack/table:docs/framework/alpine/guide/table-state.md","TanStack/table:examples/alpine/basic-create-table","TanStack/table:packages/alpine-table/src/createTable.ts"]
Load `intent load @tanstack/table-core#table-state` first for shared ownership, initialization, updater, and reset rules.
Alpine's table proxy makes reads inside `x-text`, `x-for`, `x-if`, bound attributes, `x-effect`, and Alpine getters reactive. Event handlers read the current value when invoked. A captured value outside a binding does not become a continuing subscription, and there is no `table.Subscribe` component.
## Controlled getter setup
<!-- skill-snippet:check -->
```ts
import Alpine from 'alpinejs'
import {
createTable,
rowPaginationFeature,
tableFeatures,
type PaginationState,
} from '@tanstack/alpine-table'
const features = tableFeatures({ rowPaginationFeature })
const columns = [{ accessorKey: 'name' }]
const data = [{ name: 'Ada' }]
Alpine.data('pagedTable', () => {
const local = Alpine.reactive<{ pagination: PaginationState }>({
pagination: { pageIndex: 0, pageSize: 10 },
})
const table = createTable({
features,
columns,
data,
state: {
get pagination() {
return local.pagination
},
},
onPaginationChange: (next) => {
local.pagination =
typeof next === 'function' ? next(local.pagination) : next
},
})
return { table }
})
```
Read `table.atoms.pagination.get().pageIndex` directly in an Alpine binding.
## Reactive boundaries
- A controlled slice needs a getter and callback. `state: { pagination: local.pagination }` captures the old object when the owner later replaces it.
- Expose changing data through `get data()` and keep features, columns, and derived data stable outside reevaluated getters.
- The proxy normally reevaluates all Table-reading bindings for every state change. A narrow atom read does not by itself narrow that broad invalidation.
- For shared state, pass a stable external atom through `atoms`; omit controlled state and its callback for the same slice.
## 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/alpine-table/dist/index.d.ts`, `createTable.d.ts`, and `reactivity.d.ts`. Core feature APIs are in `node_modules/@tanstack/table-core/dist/features/`.
GitHub에서 보기