@tanstack/vue-table 9.2.6 → 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.6",
+  "version": "9.2.7",
   "description": "Headless UI for building powerful tables & datagrids for Vue.",
   "author": "Tanner Linsley",
   "license": "MIT",

package/skills/getting-started/SKILL.md

@@ -5,7 +5,7 @@ metadata:
   type: framework
   library: '@tanstack/vue-table'
   framework: vue
-  library_version: '9.2.6'
+  library_version: '9.2.7'
 requires:
   - '@tanstack/table-core#core'
 sources:

package/skills/getting-started/references/create-table-hook.md

@@ -102,25 +102,9 @@ The typed context exists only below the corresponding dynamic wrapper.
 
 Source: `packages/vue-table/src/createTableHook.ts`
 
-### MEDIUM Treating Subscribe children as slots
+### Read state in the consuming component
 
-Wrong:
-
-```tsx
-<table.Subscribe>
-  {(atoms) => <Pager page={atoms.pagination.get()} />}
-</table.Subscribe>
-```
-
-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`
 

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

@@ -5,7 +5,7 @@ metadata:
   type: lifecycle
   library: '@tanstack/vue-table'
   framework: vue
-  library_version: '9.2.6'
+  library_version: '9.2.7'
 requires:
   - '@tanstack/table-core#migrate-v8-to-v9'
 sources:
@@ -26,7 +26,7 @@ Framework prerequisite: Vue 3.2 or newer (`vue >=3.2`).
 - [ ] 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`.
-- [ ] Pass `table.Subscribe` callbacks as the explicit `children` prop in JSX.
+- [ ] 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.
 

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

@@ -21,7 +21,7 @@ const table = useTable({ features, columns, data })
 - 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.
+- 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`.

package/skills/table-state/SKILL.md

@@ -5,7 +5,7 @@ metadata:
   type: framework
   library: '@tanstack/vue-table'
   framework: vue
-  library_version: '9.2.6'
+  library_version: '9.2.7'
 requires:
   - '@tanstack/table-core#table-state'
 sources:
@@ -22,7 +22,7 @@ Before starting, run `intent load @tanstack/table-core#table-state` for shared o
 
 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` receives atoms in an explicit `children` prop. Vue JSX children become slots, so use `<table.Subscribe children={(atoms) => <span>{atoms.pagination.get().pageIndex}</span>} />`.
+`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
 
@@ -58,7 +58,7 @@ 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 JSX subscription 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.
+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
 

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

@@ -40,15 +40,15 @@ const onPaginationChange = (
 
 Pass `state: controlledState` and `onPaginationChange` to `useTable`.
 
-### Use Subscribe as a render boundary
+### Read atoms in a render function
+
+Return JSX that reads the atom directly from the component's render function:
 
 ```tsx
-table.Subscribe({
-  children: (atoms) => <span>{atoms.pagination.get().pageIndex + 1}</span>,
-})
+<span>{table.atoms.pagination.get().pageIndex + 1}</span>
 ```
 
-In Vue JSX, `children` is an explicit prop, not a slot child.
+`table.Subscribe` is deprecated and adds no subscription logic. Use a child component to isolate rendering when needed.
 
 ## Common mistakes
 
@@ -115,28 +115,6 @@ 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.
-
-Source: `packages/vue-table/src/useTable.ts`
-
 ## 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.