@tanstack/vue-table 9.2.5 → 9.2.7

package/dist/useTable.d.ts

@@ -3,8 +3,11 @@ import { RowData, Table, TableFeatures, TableOptions } from "@tanstack/table-cor
 //#region src/useTable.d.ts
 export type TableOptionsWithReactiveData<TFeatures extends TableFeatures, TData extends RowData> = { [K in keyof TableOptions<TFeatures, TData>]: K extends 'data' ? MaybeRef<ReadonlyArray<TData>> : MaybeRef<TableOptions<TFeatures, TData>[K]>; };
 export type VueTable<TFeatures extends TableFeatures, TData extends RowData> = Table<TFeatures, TData> & {
-  /** Creates a reactive render boundary. The child function reads the table
-   * atoms it needs, so Vue only tracks those atom reads.
+  /**
+   * @deprecated Read table APIs or `table.atoms` directly inside templates,
+   * render functions, computed values, or watcher sources. Vue tracks those
+   * reads natively. This compatibility wrapper only passes atoms to its child
+   * function and adds no subscription logic.
    */
   Subscribe: (props: {
     children: (atoms: Table<TFeatures, TData>['atoms']) => VNode | Array<VNode>;
@@ -15,8 +18,8 @@ export type VueTable<TFeatures extends TableFeatures, TData extends RowData> = T
  *
  * Table options may contain Vue refs or computed values. The adapter unwraps
  * those reactive inputs, watches them with synchronous flushing, and keeps the
- * table options in sync. Use `table.Subscribe` or native Vue computed values
- * around `table.atoms.<slice>.get()` for selected reactive reads.
+ * table options in sync. Read table APIs or atoms inside templates, render
+ * functions, computed values, or watcher sources to track updates.
  *
  * @example
  * ```ts

package/dist/useTable.js

@@ -17,8 +17,8 @@ function getReactiveOptionDeps(options) {
 *
 * Table options may contain Vue refs or computed values. The adapter unwraps
 * those reactive inputs, watches them with synchronous flushing, and keeps the
-* table options in sync. Use `table.Subscribe` or native Vue computed values
-* around `table.atoms.<slice>.get()` for selected reactive reads.
+* table options in sync. Read table APIs or atoms inside templates, render
+* functions, computed values, or watcher sources to track updates.
 *
 * @example
 * ```ts

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/vue-table",
-  "version": "9.2.5",
+  "version": "9.2.7",
   "description": "Headless UI for building powerful tables & datagrids for Vue.",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -40,7 +40,7 @@
   ],
   "dependencies": {
     "@tanstack/store": "^0.11.2",
-    "@tanstack/table-core": "9.2.5"
+    "@tanstack/table-core": "9.2.6"
   },
   "devDependencies": {
     "@testing-library/vue": "^8.1.0",

package/skills/getting-started/SKILL.md

@@ -1,22 +1,31 @@
 ---
 name: getting-started
-description: >
-  Create a Vue TanStack Table v9 table with useTable, explicit tableFeatures, stable columns/features, reactive ref or computed data, and Vue FlexRender without destructuring reactive snapshots.
+description: Create and render Table v9 with the vue adapter. Route reusable createTableHook components, Query and Virtual integration, and framework setup; use table-state for reactive ownership.
 metadata:
   type: framework
   library: '@tanstack/vue-table'
   framework: vue
-  library_version: '9.2.5'
+  library_version: '9.2.7'
 requires:
   - '@tanstack/table-core#core'
-  - '@tanstack/table-core#table-features'
 sources:
-  - 'TanStack/table:docs/framework/vue/guide/migrating.md'
-  - 'TanStack/table:examples/vue/basic-use-table'
-  - 'TanStack/table:packages/vue-table/src/index.ts'
+  - TanStack/table:docs/framework/vue/guide/migrating.md
+  - TanStack/table:examples/vue/basic-use-table
+  - TanStack/table:packages/vue-table/src/index.ts
+  - TanStack/table:docs/framework/vue/guide/composable-tables.md
+  - TanStack/table:examples/vue/composable-tables
+  - TanStack/table:packages/vue-table/src/createTableHook.ts
+  - TanStack/table:examples/vue/with-tanstack-query
+  - TanStack/table:docs/framework/vue/guide/pagination.md
+  - TanStack/table:docs/framework/vue/guide/virtualization.md
+  - TanStack/table:examples/vue/virtualized-rows
+  - TanStack/table:examples/vue/virtualized-columns
+  - TanStack/table:examples/vue/virtualized-infinite-scrolling
 ---
 
-This skill builds on `@tanstack/table-core#core` and `@tanstack/table-core#table-features`. Read them first for the headless model and explicit feature registration.
+# Vue Table setup and integration
+
+Before starting, run `intent load @tanstack/table-core#core` for the shared headless model and stable-input rules.
 
 ## Setup
 
@@ -55,90 +64,21 @@ const table = useTable({ features, columns, data })
 </template>
 ```
 
-## Core Patterns
-
-### Preserve Vue option shapes
-
-`useTable` accepts refs/computed values and unwraps them while watching dependencies. Keep `data`, controlled state, and other reactive options as refs or computed values; keep static columns/features stable.
-
-### Add a client row model explicitly
-
-```ts
-import {
-  createSortedRowModel,
-  rowSortingFeature,
-  sortFn_alphanumeric,
-  tableFeatures,
-} from '@tanstack/vue-table'
-
-const features = tableFeatures({
-  rowSortingFeature,
-  sortedRowModel: createSortedRowModel(),
-  sortFns: { alphanumeric: sortFn_alphanumeric },
-})
-```
-
-The slot follows its prerequisite feature in the same call. Import individual `sortFn_*` built-ins and register only the ones your columns reference; the full `sortFns` registry object still works but bundles every built-in.
-
-## Common Mistakes
-
-### HIGH Flattening a ref into a snapshot
-
-Wrong:
-
-```ts
-const table = useTable({ features, columns, data: data.value })
-```
-
-Correct:
-
-```ts
-const table = useTable({ features, columns, data })
-```
-
-Passing `.value` captures one array instead of letting the adapter watch the ref.
+## Essential constraints
 
-Source: `packages/vue-table/src/useTable.ts`
+Use `useTable` with a ref, computed value, or reactive getter for changing data. Passing `data.value` captures one array and loses later updates. Keep static features and columns stable; derive transformed arrays with `computed`.
 
-### HIGH Using the v8 entrypoint
-
-Wrong:
-
-```ts
-const table = useVueTable({ data, columns, getCoreRowModel: getCoreRowModel() })
-```
-
-Correct:
-
-```ts
-const table = useTable({ features, columns, data })
-```
-
-V9 uses `useTable`; core processing is automatic and optional row models live in `tableFeatures`.
-
-Source: `docs/framework/vue/guide/migrating.md`
-
-### HIGH Assuming headless means prebuilt UI
-
-Wrong:
-
-```vue
-<TanStackTable :table="table" />
-```
-
-Correct:
-
-```vue
-<td
-  v-for="cell in row.getAllCells()"
-  :key="cell.id"
-><FlexRender :cell="cell" /></td>
-```
+Table owns models and state. The application owns markup, CSS, interactions, and accessibility. Core-only tables use `row.getAllCells()`; visibility-aware methods need `columnVisibilityFeature`. Optional state and APIs require their features. Put row-model slots after their prerequisite features in `tableFeatures()`.
 
-The adapter renders definitions but owns no table component, CSS, or design-system integration.
+## Load by task
 
-Source: `examples/vue/basic-use-table/src/App.tsx`
+- For repeated features, defaults, typed contexts, or component registries, read [reusable app hooks](references/create-table-hook.md).
+- For Query-backed data, server pages, sorting, filtering, or request keys, read [TanStack Query integration](references/with-tanstack-query.md).
+- For virtual rows, columns, dynamic measurement, or infinite scrolling, read [TanStack Virtual integration](references/with-tanstack-virtual.md).
+- For controlled state, tracked reads, or render subscriptions, read [table state](../table-state/SKILL.md).
+- For feature registration, missing feature APIs, or processing ownership, run `intent load @tanstack/table-core#table-features` and read only references needed by the task.
+- For v8 code, read the [migration checklist](../migrate-v8-to-v9/SKILL.md).
 
-## API Discovery
+## API discovery
 
-Inspect `node_modules/@tanstack/vue-table/dist/index.d.ts`, then `useTable.d.ts` and `FlexRender.d.ts`. Inspect core feature APIs in `node_modules/@tanstack/table-core/dist/features/<feature>/`.
+Inspect `node_modules/@tanstack/vue-table/dist/index.d.ts`, then the exported adapter declarations for the installed version. Inspect optional core APIs under `node_modules/@tanstack/table-core/dist/features/`.

package/skills/{create-table-hook/SKILL.md → getting-started/references/create-table-hook.md}

@@ -1,23 +1,6 @@
----
-name: create-table-hook
-description: >
-  Create a reusable Vue useAppTable/createAppColumnHelper with shared features/defaults, reactive per-table options, optional component registries, dynamic App wrappers, typed context hooks, and explicit types that break circular inference.
-metadata:
-  type: framework
-  library: '@tanstack/vue-table'
-  framework: vue
-  library_version: '9.2.5'
-requires:
-  - '@tanstack/table-core#core'
-  - getting-started
-  - table-state
-sources:
-  - 'TanStack/table:docs/framework/vue/guide/composable-tables.md'
-  - 'TanStack/table:examples/vue/composable-tables'
-  - 'TanStack/table:packages/vue-table/src/createTableHook.ts'
----
-
-This skill builds on `@tanstack/table-core#core`, `getting-started`, and `table-state`. Use it for recurring app conventions; use `useTable` for a one-off.
+# Reusable Vue table hooks
+
+Use this reference when multiple Vue tables share features, defaults, or registered components. Keep one-off tables on `useTable`. For controlled state or subscription changes, read [table state](../../table-state/SKILL.md).
 
 ## Setup
 
@@ -41,7 +24,7 @@ export const useTableContext: <TData extends RowData = RowData>() => VueTable<
 
 The explicit exported context-hook types are important when registered components import the hook module that also imports those components.
 
-## Core Patterns
+## Core patterns
 
 ### Keep per-table values reactive
 
@@ -57,7 +40,7 @@ Pass refs/computed options through unchanged.
 
 Render through `table.AppTable`, `table.AppCell`, or `table.AppHeader`; inside registered components call the corresponding typed context hook instead of prop drilling.
 
-## Common Mistakes
+## Common mistakes
 
 ### HIGH Creating circular inferred exports
 
@@ -72,7 +55,7 @@ export const { useAppTable, useTableContext } = createTableHook({
 Correct:
 
 ```ts
-const hook = createTableHook({ tableComponents: { Pager } })
+const hook = createTableHook({ features, tableComponents: { Pager } })
 export const useTableContext: <TData extends RowData = RowData>() => VueTable<
   typeof features,
   TData
@@ -119,28 +102,18 @@ The typed context exists only below the corresponding dynamic wrapper.
 
 Source: `packages/vue-table/src/createTableHook.ts`
 
-### MEDIUM Treating Subscribe children as slots
-
-Wrong:
-
-```tsx
-<table.Subscribe>
-  {(atoms) => <Pager page={atoms.pagination.get()} />}
-</table.Subscribe>
-```
+### Read state in the consuming component
 
-Correct:
-
-```tsx
-<table.Subscribe
-  children={(atoms) => <Pager page={atoms.pagination.get()} />}
-/>
-```
-
-Vue’s adapter expects an explicit `children` prop in JSX.
+Read table APIs and atoms inside the component's template or render function. Vue tracks those reads natively. Use a child component when you need a separate render boundary; `table.Subscribe` is deprecated.
 
 Source: `packages/vue-table/src/useTable.ts`
 
-## API Discovery
+## API discovery
 
 Inspect `node_modules/@tanstack/vue-table/dist/createTableHook.d.ts` for the returned helpers, wrapper props, registry types, and context contracts.
+
+## Sources
+
+- `TanStack/table:docs/framework/vue/guide/composable-tables.md`
+- `TanStack/table:examples/vue/composable-tables`
+- `TanStack/table:packages/vue-table/src/createTableHook.ts`

package/skills/{with-tanstack-query/SKILL.md → getting-started/references/with-tanstack-query.md}

@@ -1,22 +1,6 @@
----
-name: with-tanstack-query
-description: >
-  Compose reactive Vue Query keys and results with Vue Table manual row processing, refs/computed state, server counts, and already-processed pages without duplicating query data into a drifting local ref.
-metadata:
-  type: composition
-  library: '@tanstack/vue-table'
-  framework: vue
-  library_version: '9.2.5'
-requires:
-  - '@tanstack/table-core#client-vs-server'
-  - getting-started
-  - table-state
-sources:
-  - 'TanStack/table:examples/vue/with-tanstack-query'
-  - 'TanStack/table:docs/framework/vue/guide/pagination.md'
----
-
-This skill builds on `@tanstack/table-core#client-vs-server`, `getting-started`, and `table-state`. Name each client- and server-owned processing stage first.
+# Vue Table with TanStack Query
+
+Use this reference when Query owns server data for a Vue table. Read [table state](../../table-state/SKILL.md) for reactive ownership. Run `intent load @tanstack/table-core#table-features` and read its client/server reference before choosing manual processing stages. Query fetches rows already processed by every server-owned stage; manual flags only bypass Table processing.
 
 ## Setup
 
@@ -29,6 +13,8 @@ import {
   useTable,
 } from '@tanstack/vue-table'
 
+const features = tableFeatures({ rowPaginationFeature })
+const emptyRows: Array<{ name: string }> = []
 const pagination = ref({ pageIndex: 0, pageSize: 20 })
 const query = useQuery(() => ({
   queryKey: ['people', pagination.value.pageIndex, pagination.value.pageSize],
@@ -38,11 +24,11 @@ const query = useQuery(() => ({
     ).then((r) => r.json()),
   placeholderData: keepPreviousData,
 }))
-const data = computed(() => query.data.value?.rows ?? [])
+const data = computed(() => query.data.value?.rows ?? emptyRows)
 const rowCount = computed(() => query.data.value?.rowCount ?? 0)
 const state = computed(() => ({ pagination: pagination.value }))
 const table = useTable({
-  features: tableFeatures({ rowPaginationFeature }),
+  features,
   columns,
   data,
   rowCount,
@@ -55,7 +41,7 @@ const table = useTable({
 })
 ```
 
-## Core Patterns
+## Core patterns
 
 ### Keep query dependencies reactive
 
@@ -65,7 +51,7 @@ Use the Vue Query options function and read refs inside it. Include every manual
 
 Expose result fields as computed refs. Introduce a second local data ref only for an explicit editing workflow with a cache-write policy.
 
-## Common Mistakes
+## Common mistakes
 
 ### HIGH Unwrapping before query construction
 
@@ -97,7 +83,7 @@ const rows = ref(query.data.value?.rows ?? [])
 Correct:
 
 ```ts
-const rows = computed(() => query.data.value?.rows ?? [])
+const rows = computed(() => query.data.value?.rows ?? emptyRows)
 ```
 
 A one-time copy drifts from subsequent cache results.
@@ -122,6 +108,11 @@ One returned page cannot tell Table how many pages the server has.
 
 Source: `docs/framework/vue/guide/pagination.md`
 
-## API Discovery
+## API discovery
+
+Inspect installed `@tanstack/vue-table/dist/useTable.d.ts`, installed `@tanstack/vue-query/dist/`, and the relevant manual installed Table feature declarations for exact option types.
+
+## Sources
 
-Inspect installed `@tanstack/vue-table/dist/useTable.d.ts`, installed `@tanstack/vue-query/dist/`, and the relevant manual Table feature source for exact option types.
+- `TanStack/table:examples/vue/with-tanstack-query`
+- `TanStack/table:docs/framework/vue/guide/pagination.md`

package/skills/{with-tanstack-virtual/SKILL.md → getting-started/references/with-tanstack-virtual.md}

@@ -1,24 +1,6 @@
----
-name: with-tanstack-virtual
-description: >
-  Virtualize Vue Table final row or column models with reactive counts and scroll targets, stable keys, measurement, spacer geometry, sticky CSS, grid/flex widths, and infinite server data.
-metadata:
-  type: composition
-  library: '@tanstack/vue-table'
-  framework: vue
-  library_version: '9.2.5'
-requires:
-  - '@tanstack/table-core#core'
-  - getting-started
-  - table-state
-sources:
-  - 'TanStack/table:docs/framework/vue/guide/virtualization.md'
-  - 'TanStack/table:examples/vue/virtualized-rows'
-  - 'TanStack/table:examples/vue/virtualized-columns'
-  - 'TanStack/table:examples/vue/virtualized-infinite-scrolling'
----
-
-This skill builds on `@tanstack/table-core#core`, `getting-started`, and `table-state`. Virtual consumes final Table models; it is not registered in `tableFeatures`.
+# Vue Table with TanStack Virtual
+
+Use this reference when virtualizing Vue table rows or columns. Virtual consumes the final Table model in the renderer; it is not a Table feature. For reactive model or subscription problems, read [table state](../../table-state/SKILL.md). Register `columnSizingFeature` before calling sizing APIs, and `columnVisibilityFeature` before visibility-aware APIs.
 
 ## Setup
 
@@ -41,7 +23,7 @@ const virtualRows = computed(() => rowVirtualizer.value.getVirtualItems())
 const totalSize = computed(() => rowVirtualizer.value.getTotalSize())
 ```
 
-## Core Patterns
+## Core patterns
 
 ### Derive from current visible models
 
@@ -55,7 +37,7 @@ Give the scroll container a bounded height and positioning context, create a spa
 
 Fetch near the last virtual item only while `totalFetched < serverRowCount` and no request is active. Manual sorting means the server must return the sorted order and a sort change normally resets pages.
 
-## Common Mistakes
+## Common mistakes
 
 ### HIGH Passing a plain options snapshot
 
@@ -111,6 +93,13 @@ Virtual provides measurements, not spacer layout, transforms, sticky positioning
 
 Source: `examples/vue/virtualized-columns/src/App.vue`
 
-## API Discovery
+## API discovery
 
 Inspect installed `@tanstack/vue-table/dist/` and `@tanstack/vue-virtual/dist/`; use the maintained Vue examples for exact row, column, and infinite layout combinations.
+
+## Sources
+
+- `TanStack/table:docs/framework/vue/guide/virtualization.md`
+- `TanStack/table:examples/vue/virtualized-rows`
+- `TanStack/table:examples/vue/virtualized-columns`
+- `TanStack/table:examples/vue/virtualized-infinite-scrolling`

package/skills/migrate-v8-to-v9/SKILL.md

@@ -1,185 +1,48 @@
 ---
 name: migrate-v8-to-v9
-description: >
-  Complete Vue v8-to-v9 migration reference: useTable, explicit features and row-model slots, ref/atom state, FlexRender shorthand, prototype methods, type generics, sorting, sizing, selection, and logical pinning.
+description: Migrate vue Table v8 to v9. Audit framework construction, rendering, state, and app hooks, with shared API changes in the core migration skill.
 metadata:
   type: lifecycle
   library: '@tanstack/vue-table'
   framework: vue
-  library_version: '9.2.5'
+  library_version: '9.2.7'
 requires:
   - '@tanstack/table-core#migrate-v8-to-v9'
-  - getting-started
-  - table-state
 sources:
-  - 'TanStack/table:docs/framework/vue/guide/migrating.md'
-  - 'TanStack/table:packages/vue-table/src/index.ts'
-  - 'TanStack/table:examples/vue/basic-use-table'
+  - TanStack/table:docs/framework/vue/guide/migrating.md
+  - TanStack/table:packages/vue-table/src/index.ts
+  - TanStack/table:examples/vue/basic-use-table
 ---
 
-Use this as the complete breaking-change checklist. V9 is the current API; do not stop after renaming the Vue composable.
+# Vue v8-to-v9 migration checklist
 
-Framework prerequisite: Vue 3.2 or newer (`vue >=3.2`).
-
-## Recommended Migration Order
-
-1. Replace `useVueTable` with `useTable` while preserving reactive inputs.
-2. Define explicit features, then move row models and registries into `tableFeatures`.
-3. Update state reads, controlled ownership, and rendering.
-4. Apply every shared API and type rename below.
-5. Use `stockFeatures` only as a temporary audit bridge; explicit features are the production target.
-
-```ts
-const features = tableFeatures({
-  rowSortingFeature,
-  sortedRowModel: createSortedRowModel(),
-  sortFns: { alphanumeric: sortFn_alphanumeric },
-})
-const data = ref(makeData())
-const table = useTable({ features, columns, data })
-```
-
-## Construction and Feature Registration
-
-| v8                                           | v9                                                         |
-| -------------------------------------------- | ---------------------------------------------------------- |
-| `useVueTable(options)`                       | `useTable(options)`                                        |
-| All features bundled                         | Required `features: tableFeatures({...})`                  |
-| `getCoreRowModel()` option                   | Remove; core row model is automatic                        |
-| `get*RowModel()` table options               | `create*RowModel()` slots in `tableFeatures`               |
-| `sortingFns` table option                    | `sortFns` feature slot                                     |
-| `filterFns` / `aggregationFns` table options | Same-named feature slots                                   |
-| Top-level `onStateChange`                    | Per-slice callbacks, external atoms, or store subscription |
-
-Available feature imports are `cellSelectionFeature`, `columnFilteringFeature`, `globalFilteringFeature`, `rowSortingFeature`, `rowPaginationFeature`, `rowSelectionFeature`, `rowExpandingFeature`, `rowPinningFeature`, `columnPinningFeature`, `columnVisibilityFeature`, `columnOrderingFeature`, `columnSizingFeature`, `columnResizingFeature`, `rowAggregationFeature`, `columnGroupingFeature`, and `columnFacetingFeature`. APIs are feature-gated. Put every feature before its dependent slot in the same `tableFeatures` call. Aggregation is independent from grouping: register `rowAggregationFeature` for aggregation APIs and add `columnGroupingFeature` only for grouped rows.
-
-### Row-model mapping
-
-| v8 option                  | v9 slot and factory                                                 |
-| -------------------------- | ------------------------------------------------------------------- |
-| `getFilteredRowModel()`    | `filteredRowModel: createFilteredRowModel()` after column filtering |
-| `getSortedRowModel()`      | `sortedRowModel: createSortedRowModel()` after row sorting          |
-| `getPaginationRowModel()`  | `paginatedRowModel: createPaginatedRowModel()` after pagination     |
-| `getExpandedRowModel()`    | `expandedRowModel: createExpandedRowModel()` after expanding        |
-| `getGroupedRowModel()`     | `groupedRowModel: createGroupedRowModel()` after grouping           |
-| `getFacetedRowModel()`     | `facetedRowModel: createFacetedRowModel()` after faceting           |
-| `getFacetedMinMaxValues()` | `facetedMinMaxValues: createFacetedMinMaxValues()`                  |
-| `getFacetedUniqueValues()` | `facetedUniqueValues: createFacetedUniqueValues()`                  |
-
-Factories take no arguments. Register `filterFns`, `sortFns`, and `aggregationFns` as sibling feature slots holding individually imported built-ins (`filterFn_includesString`, `sortFn_alphanumeric`, `aggregationFn_sum`) under their conventional keys. The full registry objects still work but bundle every built-in.
-
-## Vue State Migration
-
-- Pass a `ref` or `computed` as `data`; the adapter unwraps and syncs it. Do not pass `data.value`, which is only a snapshot. A getter returning `data.value` is also supported.
-- `table.getState().sorting` becomes the narrow `table.atoms.sorting.get()`. Use `table.store.get()` only for a full snapshot/debug output.
-- Wrap atom reads in Vue `computed` when deriving template values.
-- In JSX/render functions, `table.Subscribe` provides a fine-grained boundary. Pass the callback as the explicit `children` prop because Vue JSX element children become slots.
-- Controlled refs need getter-backed state slices plus per-slice callbacks that resolve value-or-function `Updater`s.
-- The top-level `onStateChange` is removed. Use per-slice callbacks, external atoms, or `table.store.subscribe` to observe everything.
-- External atoms come from `@tanstack/vue-store` and are supplied through `atoms`. Never provide both `atoms.pagination` and `state.pagination`.
-- `table.baseAtoms` is internal writable state; prefer feature APIs or external atoms.
-
-## Rendering and Composition
-
-| v8                                                                               | v9 target                                                  |
-| -------------------------------------------------------------------------------- | ---------------------------------------------------------- |
-| `<FlexRender :render="cell.column.columnDef.cell" :props="cell.getContext()" />` | `<FlexRender :cell="cell" />`                              |
-| Manual header/footer render props                                                | `<FlexRender :header="header" />` / `:footer="footer"`     |
-| Repeated raw options                                                             | `tableOptions(...)` composition                            |
-| Repeated table conventions                                                       | `createTableHook({ features, ... })` and pre-bound helpers |
-
-The old `render`/`props` FlexRender shape still compiles, but shorthand is the migration target. `createTableHook` is optional and intended for application-wide conventions.
-
-## Complete Shared Breaking-Change Map
-
-### Instance methods
+Before starting, run `intent load @tanstack/table-core#migrate-v8-to-v9`. Audit its entire shared checklist and read the detailed core mappings for APIs present in the application. This checklist adds the Vue-specific changes.
 
-Row, cell, column, header, and related methods now live on shared prototypes and use `this`. Call them on their instances. Do not destructure them, pass them bare, or expect them in object spread, `Object.keys`, or JSON. Table methods are not affected.
-
-### Logical column pinning
-
-V9 has no `left`/`right` aliases.
-
-| old                                                            | new                                                           |
-| -------------------------------------------------------------- | ------------------------------------------------------------- |
-| `columnPinning.left` / `.right`                                | `.start` / `.end`                                             |
-| `column.pin('left' \| 'right')`                                | `column.pin('start' \| 'end')`                                |
-| `getIsPinned() === 'left' \| 'right'`                          | `'start' \| 'end'`                                            |
-| `row.getLeftVisibleCells()` / `getRightVisibleCells()`         | `getStartVisibleCells()` / `getEndVisibleCells()`             |
-| `getLeftHeaderGroups()` / `getRightHeaderGroups()`             | `getStartHeaderGroups()` / `getEndHeaderGroups()`             |
-| `getLeftFooterGroups()` / `getRightFooterGroups()`             | `getStartFooterGroups()` / `getEndFooterGroups()`             |
-| `getLeftFlatHeaders()` / `getRightFlatHeaders()`               | `getStartFlatHeaders()` / `getEndFlatHeaders()`               |
-| `getLeftLeafHeaders()` / `getRightLeafHeaders()`               | `getStartLeafHeaders()` / `getEndLeafHeaders()`               |
-| `getLeftLeafColumns()` / `getRightLeafColumns()`               | `getStartLeafColumns()` / `getEndLeafColumns()`               |
-| `getLeftVisibleLeafColumns()` / `getRightVisibleLeafColumns()` | `getStartVisibleLeafColumns()` / `getEndVisibleLeafColumns()` |
-| `getLeftTotalSize()` / `getRightTotalSize()`                   | `getStartTotalSize()` / `getEndTotalSize()`                   |
-| `column.getStart('left')`                                      | `column.getStart('start')`                                    |
-| `column.getAfter('right')`                                     | `column.getAfter('end')`                                      |
-| `column.getIndex('left' \| 'right')`                           | `column.getIndex('start' \| 'end')`                           |
-
-Use CSS `inset-inline-start`/`inset-inline-end`; logical names do not automatically set DOM direction. `columnResizeDirection` is unchanged.
-
-### Pinning, sizing, and resizing
-
-- `enablePinning` splits into `enableColumnPinning` and `enableRowPinning`.
-- Interactive resizing requires `columnSizingFeature` plus `columnResizingFeature`; fixed sizing needs only the former.
-- `columnSizingInfo` becomes `columnResizing`.
-- `setColumnSizingInfo()` becomes `setColumnResizing()`.
-- `onColumnSizingInfoChange` becomes `onColumnResizingChange`.
-
-### Sorting, rows, and selection
-
-| v8                             | v9                            |
-| ------------------------------ | ----------------------------- |
-| `sortingFn`                    | `sortFn`                      |
-| `sortingFns`                   | `sortFns`                     |
-| `getSortingFn()`               | `getSortFn()`                 |
-| `getAutoSortingFn()`           | `getAutoSortFn()`             |
-| `SortingFn` / `SortingFns`     | `SortFn` / `SortFns`          |
-| `row._getAllCellsByColumnId()` | `row.getAllCellsByColumnId()` |
-
-Other `_`-prefixed internals are removed, including `_getPinnedRows`, `_getFacetedRowModel`, `_getFacetedMinMaxValues`, and `_getFacetedUniqueValues`.
-
-`getIsSomeRowsSelected()` and `getIsSomePageRowsSelected()` now mean at least one, including all. Indeterminate UI must also check `!getIsAllRowsSelected()` or `!getIsAllPageRowsSelected()`.
-
-## TypeScript Migration
-
-- Add `TFeatures` first: `ColumnDef<typeof features, Person>`, `Column<typeof features, Person>`, `Row<typeof features, Person>`, `Table<typeof features, Person>`.
-- Replace `createColumnHelper<Person>()` with `createColumnHelper<typeof features, Person>()`; use `columnHelper.columns([...])` for nested-array inference.
-- Use `StockFeatures` when `stockFeatures` is the configuration.
-- Existing `TableMeta`/`ColumnMeta` declaration merging must add `TFeatures` first. Prefer per-table `tableMeta`/`columnMeta: metaHelper<...>()` slots.
-- Replace global `FilterFns`, `SortFns`, `AggregationFns`, and `FilterMeta` augmentation with registry slots and `filterMeta: metaHelper<...>()`; registered keys become valid strings in column defs.
-- `RowData` is restricted to records or arrays; prefer explicit object row types.
-
-## Common Migration Failures
-
-### HIGH: Renaming only the composable
-
-`useTable({ getSortedRowModel: ... })` is still a v8 configuration. Move the row model and its prerequisite feature into `tableFeatures`.
-
-### HIGH: Unwrapping refs before useTable
+Framework prerequisite: Vue 3.2 or newer (`vue >=3.2`).
 
-Pass `data`, not `data.value`, or use a getter. Preserve the reactive source.
+## Adapter audit
 
-### HIGH: Passing prototype methods bare
+- [ ] Replace `useVueTable` with `useTable` and preserve ref/computed/getter inputs.
+- [ ] Keep features and columns stable, configure explicit features/row-model slots, and complete the shared core checklist.
+- [ ] Replace `getState()` with tracked atom reads or intentional whole-store reads. Use `computed` for derived template values.
+- [ ] Pair controlled reactive values with callbacks that resolve both updater forms, or supply stable Vue Store atoms. Remove global `onStateChange`.
+- [ ] Replace deprecated `table.Subscribe` calls with native reactive reads. Use a child component when you need to preserve a separate component render boundary.
+- [ ] Adopt FlexRender cell/header/footer shorthand; the old render/props shape remains supported.
+- [ ] Use `tableOptions` or `createTableHook` only for repeated conventions and explicit context-hook export types when needed to break circular inference.
 
-Use `row.getValue('name')`, not `const read = row.getValue`; shallow copies also lose methods.
+## Load the affected details
 
-### MEDIUM: JSX children as slots
+When the audit finds old Vue construction, state, rendering, or app-hook code, read [adapter migration details](references/adapter-migration.md) before editing it. For a replacement render scaffold, read [getting started](../getting-started/SKILL.md). For controlled or stale state after migration, read [table state](../table-state/SKILL.md).
 
-For `table.Subscribe`, use `children={(atoms) => ...}` explicitly.
+Shared pinning, sizing, sorting, selection, prototype-method, type, and registry changes stay in the core migration references. Renaming `useVueTable` alone does not complete the migration.
 
-## Final Checklist
+## Verify the migration
 
-- [ ] `useVueTable` is replaced with `useTable`; refs/computed inputs remain reactive.
-- [ ] Features, row models, and registries are in `tableFeatures`; core row model is removed.
-- [ ] State reads use atoms/computed or the store intentionally; `onStateChange` is removed.
-- [ ] External atom and controlled state ownership do not overlap.
-- [ ] FlexRender shorthand is adopted where applicable.
-- [ ] Prototype methods, pinning, sizing/resizing, sorting, row, and selection changes are audited.
-- [ ] Helpers, types, meta, registries, and `RowData` use v9 shapes.
-- [ ] Temporary `stockFeatures` usage has an explicit removal plan.
+- [ ] Type-check against the installed v9 adapter and exercise every enabled client/manual feature flow.
+- [ ] Verify external state writes, reactive data replacement, and the framework rendering paths changed above.
+- [ ] Complete the core checklist, including layout and selection behavior when those features are used.
+- [ ] Replace temporary `stockFeatures` when the target is explicit feature tree-shaking.
 
-## API Discovery
+## API discovery
 
-Inspect `node_modules/@tanstack/vue-table/dist/index.d.ts` and `useTable.d.ts`; verify feature slots and the exact installed v9 APIs in `node_modules/@tanstack/table-core/dist/`. Do not reconstruct v9 from v8 memory.
+Inspect `node_modules/@tanstack/vue-table/dist/index.d.ts` and the exported adapter declarations. Use `node_modules/@tanstack/table-core/dist/index.d.ts` for shared APIs.

package/skills/migrate-v8-to-v9/references/adapter-migration.md

@@ -0,0 +1,51 @@
+# Vue adapter migration details
+
+Read when replacing Vue table construction, reactive state, rendering, or reusable app hooks. First complete the shared checklist from `intent load @tanstack/table-core#migrate-v8-to-v9`; its references own shared feature, method, and TypeScript mappings.
+
+## Replace `useVueTable` with `useTable`
+
+Preserve reactive option wrappers while replacing the composable. `data: data.value` captures one array; pass the ref or a getter returning its current value.
+
+```ts
+const features = tableFeatures({
+  rowSortingFeature,
+  sortedRowModel: createSortedRowModel(),
+  sortFns: { alphanumeric: sortFn_alphanumeric },
+})
+const data = ref(makeData())
+const table = useTable({ features, columns, data })
+```
+
+## Vue state migration
+
+- Pass a `ref` or `computed` as `data`; the adapter unwraps and syncs it. Do not pass `data.value`, which is only a snapshot. A getter returning `data.value` is also supported.
+- `table.getState().sorting` becomes the narrow `table.atoms.sorting.get()`. Use `table.store.get()` only for a full snapshot/debug output.
+- Wrap atom reads in Vue `computed` when deriving template values.
+- Replace deprecated `table.Subscribe` calls with direct atom reads inside templates, render functions, computed getters, or watcher sources. If it was used as a component to isolate rendering, move the reads into a child component.
+- Controlled refs need getter-backed state slices plus per-slice callbacks that resolve value-or-function `Updater`s.
+- The top-level `onStateChange` is removed. Use per-slice callbacks, external atoms, or `table.store.subscribe` to observe everything.
+- External atoms come from `@tanstack/vue-store` and are supplied through `atoms`. Never provide both `atoms.pagination` and `state.pagination`.
+- `table.baseAtoms` is internal writable state; prefer feature APIs or external atoms.
+
+## Rendering and composition
+
+| v8                                                                               | v9 target                                                  |
+| -------------------------------------------------------------------------------- | ---------------------------------------------------------- |
+| `<FlexRender :render="cell.column.columnDef.cell" :props="cell.getContext()" />` | `<FlexRender :cell="cell" />`                              |
+| Manual header/footer render props                                                | `<FlexRender :header="header" />` / `:footer="footer"`     |
+| Repeated raw options                                                             | `tableOptions(...)` composition                            |
+| Repeated table conventions                                                       | `createTableHook({ features, ... })` and pre-bound helpers |
+
+The old `render`/`props` FlexRender shape still compiles, but shorthand is the migration target. `createTableHook` is optional and intended for application-wide conventions.
+
+For detailed controlled wiring or tracking failures, read [table state](../../table-state/SKILL.md). For reusable contexts or components, read [app-hook composition](../../getting-started/references/create-table-hook.md).
+
+## API discovery
+
+Inspect `node_modules/@tanstack/vue-table/dist/index.d.ts` and its exported declarations for construction, rendering, and app hooks.
+
+## Sources
+
+- `TanStack/table:docs/framework/vue/guide/migrating.md`
+- `TanStack/table:packages/vue-table/src/index.ts`
+- `TanStack/table:examples/vue/basic-use-table`

package/skills/table-state/SKILL.md

@@ -1,34 +1,32 @@
 ---
 name: table-state
-description: >
-  Read Vue-backed table.atoms/store in templates, computed, watch, or table.Subscribe; own slices with refs/computed or external Vue Store atoms; and apply updater callbacks while preserving reactive option shapes.
+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.2.5'
+  library_version: '9.2.7'
 requires:
-  - '@tanstack/table-core#core'
-  - getting-started
+  - '@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'
+  - TanStack/table:docs/framework/vue/guide/table-state.md
+  - TanStack/table:examples/vue/basic-external-state
+  - TanStack/table:packages/vue-table/src/useTable.ts
 ---
 
-This skill builds on `@tanstack/table-core#core` and `getting-started`. Read them first for state ownership and Vue construction.
+# Vue table state
 
-## State Mental Model
+Before starting, run `intent load @tanstack/table-core#table-state` for shared ownership, initialization, updates, and resets.
 
-TanStack Table is primarily a state coordinator. Keep state internal unless another system needs to read, persist, or drive it. Without `initialState`, `atoms`, `state`, or `on[State]Change`, the table owns every registered slice.
+## Read reactive state
 
-- `table.baseAtoms` are internal writable atoms created from resolved initial state.
-- `table.atoms` are readonly derived atoms for the active owner of each registered slice.
-- `table.store` combines those atoms into one readonly flat store.
+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.
 
-The Vue adapter backs atoms with refs/computed values and tracks reactive table options. Atom reads become reactive inside templates, `computed`, `watch`, or `table.Subscribe`; a read cached outside tracking is only a snapshot. State is feature-based, so a missing pagination atom or option means `rowPaginationFeature` was not registered. Keep `features` and `columns` stable; pass reactive `data` as a ref/computed instead of recreating arrays in table options.
+`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.
 
-## Setup
+## Control a slice
+
+Keep features and columns stable. Preserve both the reactive value and its matching callback:
 
 ```ts
 import { computed, ref } from 'vue'
@@ -36,156 +34,32 @@ import {
   rowPaginationFeature,
   tableFeatures,
   useTable,
+  type PaginationState,
+  type Updater,
 } from '@tanstack/vue-table'
 
 const features = tableFeatures({ rowPaginationFeature })
-const data = ref([{ name: 'Ada' }])
 const columns = [{ accessorKey: 'name' }]
-const table = useTable({ features, columns, data })
-const pageIndex = computed(() => table.atoms.pagination.get().pageIndex)
-```
-
-Internal state is usually enough. Atom reads are reactive only when Vue evaluates them in a tracked template, computed, watch, or render boundary.
-
-## Core Patterns
-
-### Control a slice without losing updater semantics
-
-```ts
-import { computed, ref } from 'vue'
-import type { PaginationState } from '@tanstack/vue-table'
-
+const data = ref([{ name: 'Ada' }])
 const pagination = ref<PaginationState>({ pageIndex: 0, pageSize: 20 })
-const controlledState = computed(() => ({ pagination: pagination.value }))
-const onPaginationChange = (
-  next: PaginationState | ((old: PaginationState) => PaginationState),
-) => {
-  pagination.value = typeof next === 'function' ? next(pagination.value) : next
-}
-```
-
-Pass `state: controlledState` and `onPaginationChange` to `useTable`.
-
-### Use Subscribe as a render boundary
-
-```tsx
-table.Subscribe({
-  children: (atoms) => <span>{atoms.pagination.get().pageIndex + 1}</span>,
-})
-```
-
-In Vue JSX, `children` is an explicit prop, not a slot child.
-
-## Choose State Ownership
-
-Use exactly one owner per slice:
-
-- Prefer internal state and feature methods for table-local behavior.
-- Use `initialState` for starting/reset values; changing it later does not reset current state.
-- Prefer a stable `@tanstack/vue-store` atom in `atoms` for cross-system ownership. Feature APIs update it directly, so omit `on[State]Change`.
-- Use a ref/computed `state` value plus the matching callback for simple controlled state. Preserve the reactive wrapper and resolve raw values and updater functions.
-
-External atoms take precedence over external `state`, which syncs into the internal base atom. Do not configure multiple owners. The global v8 `onStateChange` option is gone; observe `table.store` if all state changes matter.
-
-## Initialize, Update, and Reset
-
-Use feature methods such as `setSorting`, `nextPage`, `toggleVisibility`, and `toggleSelected`. Direct `baseAtoms` writes are a rare escape hatch for internally owned state; write the external atom when it owns the slice.
-
-```ts
-table.resetSorting()
-table.resetPagination()
-table.resetPagination(true)
-```
-
-Feature resets use `table.initialState` unless `true` requests the feature default and can update external owners. Core `table.reset()` only resets internal base atoms. Use slice types such as `PaginationState`; use `TableState<typeof features>` for the complete feature-inferred state.
-
-## Common Mistakes
-
-### HIGH Reading an untracked snapshot
-
-Wrong:
-
-```ts
-const pageIndex = table.atoms.pagination.get().pageIndex
-```
-
-Correct:
-
-```ts
-const pageIndex = computed(() => table.atoms.pagination.get().pageIndex)
-```
-
-The first read is current but does not make its consumer reactive.
-
-Source: `docs/framework/vue/guide/table-state.md`
-
-### HIGH Passing state.value once
-
-Wrong:
-
-```ts
+const state = computed(() => ({ pagination: pagination.value }))
 const table = useTable({
   features,
   columns,
   data,
-  state: controlledState.value,
+  state,
+  onPaginationChange: (next: Updater<PaginationState>) => {
+    pagination.value =
+      typeof next === 'function' ? next(pagination.value) : next
+  },
 })
+const pageSize = computed(() => table.atoms.pagination.get().pageSize)
 ```
 
-Correct:
-
-```ts
-const table = useTable({ features, columns, data, state: controlledState })
-```
-
-The adapter watches the computed ref; a one-time `.value` breaks future option synchronization.
-
-Source: `packages/vue-table/src/useTable.ts`
-
-### HIGH Assigning updater functions as values
-
-Wrong:
-
-```ts
-const onPaginationChange = (next) => {
-  pagination.value = next
-}
-```
-
-Correct:
-
-```ts
-const onPaginationChange = (next) => {
-  pagination.value = typeof next === 'function' ? next(pagination.value) : next
-}
-```
-
-Table callbacks accept either a value or a function of the previous value.
-
-Source: `examples/vue/basic-external-state/src/App.tsx`
-
-### MEDIUM Supplying JSX children as a slot
-
-Wrong:
-
-```tsx
-<table.Subscribe>
-  {(atoms) => <span>{atoms.pagination.get().pageIndex}</span>}
-</table.Subscribe>
-```
-
-Correct:
-
-```tsx
-<table.Subscribe
-  children={(atoms) => <span>{atoms.pagination.get().pageIndex}</span>}
-/>
-```
-
-The Vue adapter declares `Subscribe(props: { children })` and expects the explicit prop.
+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.
 
-Source: `packages/vue-table/src/useTable.ts`
+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
+## API discovery
 
-Inspect `node_modules/@tanstack/vue-table/dist/useTable.d.ts` and `reactivity.d.ts`; inspect the exact state slice in the installed core feature directory.
+Inspect `node_modules/@tanstack/vue-table/dist/useTable.d.ts` and `reactivity.d.ts`; inspect the matching core feature declarations for the controlled slice.

package/skills/table-state/references/reactivity.md

@@ -0,0 +1,126 @@
+# Vue table reactive boundaries
+
+Read when optimizing subscriptions, composing external atoms, or debugging Vue-specific tracking and controlled updates. Shared ownership, initialization, and reset rules remain in `intent load @tanstack/table-core#table-state`.
+
+## Example context
+
+```ts
+import { computed, ref } from 'vue'
+import {
+  rowPaginationFeature,
+  tableFeatures,
+  useTable,
+} from '@tanstack/vue-table'
+
+const features = tableFeatures({ rowPaginationFeature })
+const data = ref([{ name: 'Ada' }])
+const columns = [{ accessorKey: 'name' }]
+const table = useTable({ features, columns, data })
+const pageIndex = computed(() => table.atoms.pagination.get().pageIndex)
+```
+
+Internal state is usually enough. Atom reads are reactive only when Vue evaluates them in a tracked template, computed, watch, or render boundary.
+
+## State patterns
+
+### Control a slice without losing updater semantics
+
+```ts
+import { computed, ref } from 'vue'
+import type { PaginationState } from '@tanstack/vue-table'
+
+const pagination = ref<PaginationState>({ pageIndex: 0, pageSize: 20 })
+const controlledState = computed(() => ({ pagination: pagination.value }))
+const onPaginationChange = (
+  next: PaginationState | ((old: PaginationState) => PaginationState),
+) => {
+  pagination.value = typeof next === 'function' ? next(pagination.value) : next
+}
+```
+
+Pass `state: controlledState` and `onPaginationChange` to `useTable`.
+
+### Read atoms in a render function
+
+Return JSX that reads the atom directly from the component's render function:
+
+```tsx
+<span>{table.atoms.pagination.get().pageIndex + 1}</span>
+```
+
+`table.Subscribe` is deprecated and adds no subscription logic. Use a child component to isolate rendering when needed.
+
+## Common mistakes
+
+### HIGH Reading an untracked snapshot
+
+Wrong:
+
+```ts
+const pageIndex = table.atoms.pagination.get().pageIndex
+```
+
+Correct:
+
+```ts
+const pageIndex = computed(() => table.atoms.pagination.get().pageIndex)
+```
+
+The first read is current but does not make its consumer reactive.
+
+Source: `docs/framework/vue/guide/table-state.md`
+
+### HIGH Passing state.value once
+
+Wrong:
+
+```ts
+const table = useTable({
+  features,
+  columns,
+  data,
+  state: controlledState.value,
+})
+```
+
+Correct:
+
+```ts
+const table = useTable({ features, columns, data, state: controlledState })
+```
+
+The adapter watches the computed ref; a one-time `.value` breaks future option synchronization.
+
+Source: `packages/vue-table/src/useTable.ts`
+
+### HIGH Assigning updater functions as values
+
+Wrong:
+
+```ts
+const onPaginationChange = (next) => {
+  pagination.value = next
+}
+```
+
+Correct:
+
+```ts
+const onPaginationChange = (next) => {
+  pagination.value = typeof next === 'function' ? next(pagination.value) : next
+}
+```
+
+Table callbacks accept either a value or a function of the previous value.
+
+Source: `examples/vue/basic-external-state/src/App.tsx`
+
+## API discovery
+
+Inspect `node_modules/@tanstack/vue-table/dist/useTable.d.ts` and `reactivity.d.ts`; inspect the exact state slice in the installed core feature directory.
+
+## 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`