table-state
Read and control Table v9 state in vue. Use for tracked reads, subscriptions, controlled slices, and framework-specific reactive boundaries.
소스 정보
- 저장소
- TanStack/table
- 최근 소스 활동
- 2026년 10월 12일 16:41
- 감지된 SKILL.md 언어
- 영어
- 스타
- 28,577
- 포크
- 3,587
설치 방법
기본적으로 소스를 먼저 확인하는 Prompt가 선택됩니다. 직접 명령으로 전환하거나 로컬 사본을 다운로드할 수도 있습니다.
소스 파일 검토
설치 여부를 결정하기 전에 SKILL.md와 SkillsMP에 표시된 보조 파일을 읽어 보세요.
파일 탐색기
2 개 파일SKILL.md 표시 중
SKILL.md
소스 지침 · 읽기 전용 미리보기- name
- table-state
- description
- Read and control Table v9 state in vue. Use for tracked reads, subscriptions, controlled slices, and framework-specific reactive boundaries.
- metadata
- {"type":"framework","library":"@tanstack/vue-table","framework":"vue","library_version":"9.3.1"}
- requires
- ["@tanstack/table-core#table-state"]
- sources
- ["TanStack/table:docs/framework/vue/guide/table-state.md","TanStack/table:examples/vue/basic-external-state","TanStack/table:packages/vue-table/src/useTable.ts"]
# Vue table state
Before starting, run `intent load @tanstack/table-core#table-state` for shared ownership, initialization, updates, and resets.
## Read reactive state
Vue-backed atom reads track dependencies inside templates, `computed`, `watch`, or a render boundary. `const page = table.atoms.pagination.get()` outside tracking captures a snapshot. Keep reactive option inputs as refs, computed values, or getters; passing `.value` once breaks later synchronization.
`table.Subscribe` is deprecated. Read table APIs or atoms directly inside templates, render functions, computed getters, or watcher sources. Use a child component when reads need a separate component render boundary.
## Control a slice
Keep features and columns stable. Preserve both the reactive value and its matching callback:
```ts
import { computed, ref } from 'vue'
import {
rowPaginationFeature,
tableFeatures,
useTable,
type PaginationState,
type Updater,
} from '@tanstack/vue-table'
const features = tableFeatures({ rowPaginationFeature })
const columns = [{ accessorKey: 'name' }]
const data = ref([{ name: 'Ada' }])
const pagination = ref<PaginationState>({ pageIndex: 0, pageSize: 20 })
const state = computed(() => ({ pagination: pagination.value }))
const table = useTable({
features,
columns,
data,
state,
onPaginationChange: (next: Updater<PaginationState>) => {
pagination.value =
typeof next === 'function' ? next(pagination.value) : next
},
})
const pageSize = computed(() => table.atoms.pagination.get().pageSize)
```
Assign the resolved updater result to the ref. For shared atom ownership, use a stable `@tanstack/vue-store` atom in `atoms.<slice>` instead of mirroring the same slice in controlled refs.
For computed-state synchronization failures, updater mistakes, or render boundaries, 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/vue-table/dist/useTable.d.ts` and `reactivity.d.ts`; inspect the matching core feature declarations for the controlled slice.
GitHub에서 보기