vue/table-state

What problem does it solve?

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.

Core Features & Use Cases

• Vue reactivity binding for tables: Uses vueReactivity() to map readonly atoms to computed() and writable atoms to shallowRef(), with synchronous watch subscriptions to keep the UI in sync.
• Three surfaces for consuming state: Access per-slice atoms via table.atoms.<slice>, read a flat snapshot via table.store.state, and use the useTable(..., selector) return for Vue-selected state.
• External state integration: Supports external atoms via @tanstack/vue-store (createAtom, useSelector) or external state with on[State]Change handlers, requiring Vue-tracked getters for reactive refs.
• Rendering & subscriptions: Use <FlexRender> for headers/cells/footers and table.Subscribe when cross-store subscription parity is needed.

Quick Start

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.