Wire TanStack Vue Table v9 state into Vue reactivity with useTable patterns.
npx skills add https://github.com/TanStack/table --skill vue-table-state
Please help me install this Agent Skill. Skill: vue/table-state Source: https://github.com/TanStack/table/tree/main/packages/vue-table/skills/vue/table-state Command: npx skills add https://github.com/TanStack/table --skill vue-table-state
This Skill helps you wire TanStack Table v9 state into Vue reactivity so sorting, filtering, selection, and pagination update reliably without missing updates or stale reads.
vueReactivity() to map readonly atoms to computed() and writable atoms to shallowRef(), with synchronous watch subscriptions to keep the UI in sync.table.atoms.<slice>, read a flat snapshot via table.store.state, and use the useTable(..., selector) return for Vue-selected state.@tanstack/vue-store (createAtom, useSelector) or external state with on[State]Change handlers, requiring Vue-tracked getters for reactive refs.<FlexRender> for headers/cells/footers and table.Subscribe when cross-store subscription parity is needed.Install the Vue adapters, import useTable and FlexRender, define stable tableFeatures() and columns at module scope, pass reactive ref/computed options into useTable, and render headers/rows with FlexRender to get fully reactive table behavior.
High-intent search queries and answers about installing and using this skill.
To make TanStack Table state reactive in Vue, use the `useTable` pattern with `vueReactivity()` to map readonly atoms to `computed()` and writable atoms to `shallowRef()`, ensuring synchronous `watch` subscriptions for UI synchronization.
Vue table sorting and filtering updates appear stale when state isn't properly wired into Vue reactivity; using `vueReactivity()` with correct `tableFeatures` registration ensures atoms map to `computed()` and `shallowRef()` for reliable updates.
Sync external state with TanStack Vue Table by using external atoms via `@tanstack/vue-store` (`createAtom`, `useSelector`) or external `state` with `on[State]Change` handlers, requiring Vue-tracked getters for reactive refs.
Yes, you can use `<FlexRender>` to render Vue table headers, cells, and footers, which integrates with the reactive `useTable` setup to display fully reactive table behavior across sorting, filtering, and pagination.
The best way to access per-slice table state in Vue is through three surfaces: per-slice atoms via `table.atoms.<slice>`, a flat snapshot via `table.store.state`, and Vue-selected state using the `useTable(..., selector)` return.
TanStack Vue Table supports cross-store subscription parity by using `table.Subscribe` when synchronization across different stores is needed, complementing the standard `vueReactivity()` binding for reactive options and atom-backed slices.
TanStackCompose TanStack Table state slices in Vue with TanStack Store atoms.
TanStackWire Preact components to TanStack Table state with useTable selectors and Subscribe boundaries.
TanStackCompose TanStack Table v9 state with Svelte Store atoms via subscriptions and selectors.
skilld-devIntegrate TanStack Vue Table into Vue 3 apps with sorting, filtering, pagination, and grouping.