@tanstack/vue-table 9.0.0-beta.2 → 9.0.0-beta.20

package/dist/useTable.d.cts

@@ -1,76 +1,42 @@
-import { NoInfer, RowData, Table, TableFeatures, TableOptions, TableState } from "@tanstack/table-core";
-import { Atom, ReadonlyAtom, ReadonlyStore, Store } from "@tanstack/vue-store";
+import { RowData, Table, TableFeatures, TableOptions } from "@tanstack/table-core";
 import { MaybeRef, VNode } from "vue";
 
 //#region src/useTable.d.ts
-type SubscribeSource<TValue> = Atom<TValue> | ReadonlyAtom<TValue> | Store<TValue> | ReadonlyStore<TValue>;
 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]> };
-type VueTable<TFeatures extends TableFeatures, TData extends RowData, TSelected = TableState<TFeatures>> = Omit<Table<TFeatures, TData>, 'store'> & {
+type VueTable<TFeatures extends TableFeatures, TData extends RowData> = Omit<Table<TFeatures, TData>, 'store'> & {
   /**
-   * @deprecated Prefer `table.state` for render reads,
-   * `table.atoms.<slice>.get()` for slice snapshots, or
-   * `table.Subscribe` / `useSelector(table.store, selector)` for explicit
-   * subscriptions. `table.store.state` is a current-value snapshot and is easy
-   * to misuse in render code.
+   * @deprecated Prefer `table.atoms.<slice>.get()` for slice snapshots, or
+   * `table.Subscribe` for explicit subscriptions. `table.store.state` is a
+   * current-value snapshot and is easy to misuse in render code.
    */
   readonly store: Table<TFeatures, TData>['store'];
-  /**
-   * Store mode: `selector` required. Source mode: pass `source` (atom or store); omit
-   * `selector` for the whole value (identity), or pass `selector` to project. Split
-   * overloads so source-only infers `TSourceValue` for `children` (see React `Subscribe`).
-   */
-  Subscribe: {
-    <TSourceValue>(props: {
-      source: SubscribeSource<TSourceValue>;
-      selector?: undefined;
-      children: ((state: Readonly<TSourceValue>) => VNode | Array<VNode>) | VNode | Array<VNode>;
-    }): VNode | Array<VNode>;
-    <TSourceValue, TSubSelected>(props: {
-      source: SubscribeSource<TSourceValue>;
-      selector: (state: TSourceValue) => TSubSelected;
-      children: ((state: Readonly<TSubSelected>) => VNode | Array<VNode>) | VNode | Array<VNode>;
-    }): VNode | Array<VNode>;
-    <TSubSelected>(props: {
-      selector: (state: NoInfer<TableState<TFeatures>>) => TSubSelected;
-      children: ((state: Readonly<TSubSelected>) => VNode | Array<VNode>) | VNode | Array<VNode>;
-    }): VNode | Array<VNode>;
-  };
-  /**
-   * The selected state of the table. This state may not match the structure of
-   * the full table state because it is selected by the selector function that
-   * you pass as the 2nd argument to `useTable`.
-   *
-   * @example
-   * const table = useTable(options, (state) => ({ globalFilter: state.globalFilter })) // only globalFilter is part of the selected state
-   *
-   * console.log(table.state.globalFilter)
+  /** Creates a reactive render boundary. The child function reads the table
+   * atoms it needs, so Vue only tracks those atom reads.
    */
-  readonly state: Readonly<TSelected>;
+  Subscribe: (props: {
+    children: (atoms: Table<TFeatures, TData>['atoms']) => VNode | Array<VNode>;
+  }) => VNode | Array<VNode>;
 };
 /**
  * Creates a Vue table instance backed by Vue-aware TanStack Store atoms.
  *
  * 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. The optional selector projects from `table.store` and
- * exposes the selected value on `table.state`.
+ * table options in sync. Use `table.Subscribe` or native Vue computed values
+ * around `table.atoms.<slice>.get()` for selected reactive reads.
  *
  * @example
  * ```ts
  * const table = useTable(
  *   {
  *     features,
- *     rowModels: {},
  *     columns,
  *     data,
  *   },
- *   (state) => ({ pagination: state.pagination }),
  * )
- *
- * table.state.pagination
  * ```
  */
-declare function useTable<TFeatures extends TableFeatures, TData extends RowData, TSelected = TableState<TFeatures>>(tableOptions: TableOptions<TFeatures, TData> | TableOptionsWithReactiveData<TFeatures, TData>, selector?: (state: TableState<TFeatures>) => TSelected): VueTable<TFeatures, TData, TSelected>;
+declare function useTable<TFeatures extends TableFeatures, TData extends RowData>(tableOptions: TableOptions<TFeatures, TData> | TableOptionsWithReactiveData<TFeatures, TData>): VueTable<TFeatures, TData>;
 //#endregion
-export { SubscribeSource, TableOptionsWithReactiveData, VueTable, useTable };
+export { TableOptionsWithReactiveData, VueTable, useTable };
 //# sourceMappingURL=useTable.d.cts.map

package/dist/useTable.d.ts

@@ -1,76 +1,42 @@
 import { MaybeRef, VNode } from "vue";
-import { NoInfer, RowData, Table, TableFeatures, TableOptions, TableState } from "@tanstack/table-core";
-import { Atom, ReadonlyAtom, ReadonlyStore, Store } from "@tanstack/vue-store";
+import { RowData, Table, TableFeatures, TableOptions } from "@tanstack/table-core";
 
 //#region src/useTable.d.ts
-type SubscribeSource<TValue> = Atom<TValue> | ReadonlyAtom<TValue> | Store<TValue> | ReadonlyStore<TValue>;
 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]> };
-type VueTable<TFeatures extends TableFeatures, TData extends RowData, TSelected = TableState<TFeatures>> = Omit<Table<TFeatures, TData>, 'store'> & {
+type VueTable<TFeatures extends TableFeatures, TData extends RowData> = Omit<Table<TFeatures, TData>, 'store'> & {
   /**
-   * @deprecated Prefer `table.state` for render reads,
-   * `table.atoms.<slice>.get()` for slice snapshots, or
-   * `table.Subscribe` / `useSelector(table.store, selector)` for explicit
-   * subscriptions. `table.store.state` is a current-value snapshot and is easy
-   * to misuse in render code.
+   * @deprecated Prefer `table.atoms.<slice>.get()` for slice snapshots, or
+   * `table.Subscribe` for explicit subscriptions. `table.store.state` is a
+   * current-value snapshot and is easy to misuse in render code.
    */
   readonly store: Table<TFeatures, TData>['store'];
-  /**
-   * Store mode: `selector` required. Source mode: pass `source` (atom or store); omit
-   * `selector` for the whole value (identity), or pass `selector` to project. Split
-   * overloads so source-only infers `TSourceValue` for `children` (see React `Subscribe`).
-   */
-  Subscribe: {
-    <TSourceValue>(props: {
-      source: SubscribeSource<TSourceValue>;
-      selector?: undefined;
-      children: ((state: Readonly<TSourceValue>) => VNode | Array<VNode>) | VNode | Array<VNode>;
-    }): VNode | Array<VNode>;
-    <TSourceValue, TSubSelected>(props: {
-      source: SubscribeSource<TSourceValue>;
-      selector: (state: TSourceValue) => TSubSelected;
-      children: ((state: Readonly<TSubSelected>) => VNode | Array<VNode>) | VNode | Array<VNode>;
-    }): VNode | Array<VNode>;
-    <TSubSelected>(props: {
-      selector: (state: NoInfer<TableState<TFeatures>>) => TSubSelected;
-      children: ((state: Readonly<TSubSelected>) => VNode | Array<VNode>) | VNode | Array<VNode>;
-    }): VNode | Array<VNode>;
-  };
-  /**
-   * The selected state of the table. This state may not match the structure of
-   * the full table state because it is selected by the selector function that
-   * you pass as the 2nd argument to `useTable`.
-   *
-   * @example
-   * const table = useTable(options, (state) => ({ globalFilter: state.globalFilter })) // only globalFilter is part of the selected state
-   *
-   * console.log(table.state.globalFilter)
+  /** Creates a reactive render boundary. The child function reads the table
+   * atoms it needs, so Vue only tracks those atom reads.
    */
-  readonly state: Readonly<TSelected>;
+  Subscribe: (props: {
+    children: (atoms: Table<TFeatures, TData>['atoms']) => VNode | Array<VNode>;
+  }) => VNode | Array<VNode>;
 };
 /**
  * Creates a Vue table instance backed by Vue-aware TanStack Store atoms.
  *
  * 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. The optional selector projects from `table.store` and
- * exposes the selected value on `table.state`.
+ * table options in sync. Use `table.Subscribe` or native Vue computed values
+ * around `table.atoms.<slice>.get()` for selected reactive reads.
  *
  * @example
  * ```ts
  * const table = useTable(
  *   {
  *     features,
- *     rowModels: {},
  *     columns,
  *     data,
  *   },
- *   (state) => ({ pagination: state.pagination }),
  * )
- *
- * table.state.pagination
  * ```
  */
-declare function useTable<TFeatures extends TableFeatures, TData extends RowData, TSelected = TableState<TFeatures>>(tableOptions: TableOptions<TFeatures, TData> | TableOptionsWithReactiveData<TFeatures, TData>, selector?: (state: TableState<TFeatures>) => TSelected): VueTable<TFeatures, TData, TSelected>;
+declare function useTable<TFeatures extends TableFeatures, TData extends RowData>(tableOptions: TableOptions<TFeatures, TData> | TableOptionsWithReactiveData<TFeatures, TData>): VueTable<TFeatures, TData>;
 //#endregion
-export { SubscribeSource, TableOptionsWithReactiveData, VueTable, useTable };
+export { TableOptionsWithReactiveData, VueTable, useTable };
 //# sourceMappingURL=useTable.d.ts.map

package/dist/useTable.js

@@ -1,8 +1,7 @@
 import { flatMerge, mergeProxy } from "./merge-proxy.js";
 import { vueReactivity } from "./reactivity.js";
-import { unref, watch } from "vue";
+import { getCurrentScope, onScopeDispose, unref, watch } from "vue";
 import { constructTable } from "@tanstack/table-core";
-import { shallow, useSelector } from "@tanstack/vue-store";
 
 //#region src/useTable.ts
 function getOptionsWithReactiveValues(options) {
@@ -18,36 +17,37 @@ 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. The optional selector projects from `table.store` and
-* exposes the selected value on `table.state`.
+* table options in sync. Use `table.Subscribe` or native Vue computed values
+* around `table.atoms.<slice>.get()` for selected reactive reads.
 *
 * @example
 * ```ts
 * const table = useTable(
 *   {
 *     features,
-*     rowModels: {},
 *     columns,
 *     data,
 *   },
-*   (state) => ({ pagination: state.pagination }),
 * )
-*
-* table.state.pagination
 * ```
 */
-function useTable(tableOptions, selector) {
+function useTable(tableOptions) {
 	const syncTableOptions = (table, options) => {
 		table.setOptions((prev) => flatMerge(prev, getOptionsWithReactiveValues(options)));
 	};
+	const reactivity = vueReactivity();
 	const mergedOptions = mergeProxy(tableOptions, { features: {
-		coreReativityFeature: vueReactivity(),
+		coreReactivityFeature: reactivity,
 		...unref(tableOptions.features) ?? {}
 	} });
 	const coreTable = constructTable(mergeProxy(getOptionsWithReactiveValues(mergedOptions), { mergeOptions: (defaultOptions, newOptions) => {
 		return flatMerge(defaultOptions, newOptions);
 	} }));
 	const table = coreTable;
+	if (getCurrentScope()) onScopeDispose(() => {
+		var _reactivity$unmount;
+		return (_reactivity$unmount = reactivity.unmount) === null || _reactivity$unmount === void 0 ? void 0 : _reactivity$unmount.call(reactivity);
+	});
 	watch(() => getReactiveOptionDeps(mergedOptions), () => {
 		syncTableOptions(coreTable, mergedOptions);
 	}, { immediate: true });
@@ -64,18 +64,10 @@ function useTable(tableOptions, selector) {
 	}, (controlledValues) => {
 		if (controlledValues.length > 0) syncTableOptions(coreTable, mergedOptions);
 	}, { immediate: true });
-	table.Subscribe = ((props) => {
-		const selected = useSelector(props.source ?? table.store, props.selector, { compare: shallow });
-		if (typeof props.children === "function") return props.children(selected.value);
-		return props.children;
-	});
-	const stateStore = useSelector(table.store, selector);
-	return {
-		...table,
-		get state() {
-			return stateStore.value;
-		}
+	table.Subscribe = (props) => {
+		return props.children(table.atoms);
 	};
+	return table;
 }
 
 //#endregion

package/dist/useTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"useTable.js","names":[],"sources":["../src/useTable.ts"],"sourcesContent":["import { unref, watch } from 'vue'\nimport { constructTable } from '@tanstack/table-core'\nimport { shallow, useSelector } from '@tanstack/vue-store'\nimport { flatMerge, mergeProxy } from './merge-proxy'\nimport { vueReactivity } from './reactivity'\nimport type {\n  Atom,\n  ReadonlyAtom,\n  ReadonlyStore,\n  Store,\n} from '@tanstack/vue-store'\nimport type {\n  NoInfer,\n  RowData,\n  Table,\n  TableFeatures,\n  TableOptions,\n  TableState,\n} from '@tanstack/table-core'\nimport type { MaybeRef, VNode } from 'vue'\n\nexport type SubscribeSource<TValue> =\n  | Atom<TValue>\n  | ReadonlyAtom<TValue>\n  | Store<TValue>\n  | ReadonlyStore<TValue>\n\nexport type TableOptionsWithReactiveData<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n> = {\n  [K in keyof TableOptions<TFeatures, TData>]: K extends 'data'\n    ? MaybeRef<ReadonlyArray<TData>>\n    : MaybeRef<TableOptions<TFeatures, TData>[K]>\n}\n\nfunction getOptionsWithReactiveValues<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n>(options: TableOptionsWithReactiveData<TFeatures, TData>) {\n  const resolvedOptions: Record<string, unknown> = {}\n\n  for (const key of Object.keys(options)) {\n    resolvedOptions[key] = unref(\n      options[key as keyof TableOptionsWithReactiveData<TFeatures, TData>],\n    )\n  }\n\n  return mergeProxy(options, resolvedOptions)\n}\n\nfunction getReactiveOptionDeps<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n>(options: TableOptionsWithReactiveData<TFeatures, TData>) {\n  return Object.keys(options).map((key) =>\n    unref(options[key as keyof TableOptionsWithReactiveData<TFeatures, TData>]),\n  )\n}\n\nexport type VueTable<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TSelected = TableState<TFeatures>,\n> = Omit<Table<TFeatures, TData>, 'store'> & {\n  /**\n   * @deprecated Prefer `table.state` for render reads,\n   * `table.atoms.<slice>.get()` for slice snapshots, or\n   * `table.Subscribe` / `useSelector(table.store, selector)` for explicit\n   * subscriptions. `table.store.state` is a current-value snapshot and is easy\n   * to misuse in render code.\n   */\n  readonly store: Table<TFeatures, TData>['store']\n  /**\n   * Store mode: `selector` required. Source mode: pass `source` (atom or store); omit\n   * `selector` for the whole value (identity), or pass `selector` to project. Split\n   * overloads so source-only infers `TSourceValue` for `children` (see React `Subscribe`).\n   */\n  Subscribe: {\n    <TSourceValue>(props: {\n      source: SubscribeSource<TSourceValue>\n      selector?: undefined\n      children:\n        | ((state: Readonly<TSourceValue>) => VNode | Array<VNode>)\n        | VNode\n        | Array<VNode>\n    }): VNode | Array<VNode>\n    <TSourceValue, TSubSelected>(props: {\n      source: SubscribeSource<TSourceValue>\n      selector: (state: TSourceValue) => TSubSelected\n      children:\n        | ((state: Readonly<TSubSelected>) => VNode | Array<VNode>)\n        | VNode\n        | Array<VNode>\n    }): VNode | Array<VNode>\n    <TSubSelected>(props: {\n      selector: (state: NoInfer<TableState<TFeatures>>) => TSubSelected\n      children:\n        | ((state: Readonly<TSubSelected>) => VNode | Array<VNode>)\n        | VNode\n        | Array<VNode>\n    }): VNode | Array<VNode>\n  }\n  /**\n   * The selected state of the table. This state may not match the structure of\n   * the full table state because it is selected by the selector function that\n   * you pass as the 2nd argument to `useTable`.\n   *\n   * @example\n   * const table = useTable(options, (state) => ({ globalFilter: state.globalFilter })) // only globalFilter is part of the selected state\n   *\n   * console.log(table.state.globalFilter)\n   */\n  readonly state: Readonly<TSelected>\n}\n\n/**\n * Creates a Vue table instance backed by Vue-aware TanStack Store atoms.\n *\n * Table options may contain Vue refs or computed values. The adapter unwraps\n * those reactive inputs, watches them with synchronous flushing, and keeps the\n * table options in sync. The optional selector projects from `table.store` and\n * exposes the selected value on `table.state`.\n *\n * @example\n * ```ts\n * const table = useTable(\n *   {\n *     features,\n *     rowModels: {},\n *     columns,\n *     data,\n *   },\n *   (state) => ({ pagination: state.pagination }),\n * )\n *\n * table.state.pagination\n * ```\n */\nexport function useTable<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TSelected = TableState<TFeatures>,\n>(\n  tableOptions:\n    | TableOptions<TFeatures, TData>\n    | TableOptionsWithReactiveData<TFeatures, TData>,\n  selector?: (state: TableState<TFeatures>) => TSelected,\n): VueTable<TFeatures, TData, TSelected> {\n  const syncTableOptions = (\n    table: Table<TFeatures, TData>,\n    options: TableOptionsWithReactiveData<TFeatures, TData>,\n  ) => {\n    table.setOptions((prev) =>\n      flatMerge(prev, getOptionsWithReactiveValues(options)),\n    )\n  }\n\n  const mergedOptions = mergeProxy(tableOptions, {\n    features: {\n      coreReativityFeature: vueReactivity(),\n      ...(unref(tableOptions.features) ?? {}),\n    },\n  }) as TableOptionsWithReactiveData<TFeatures, TData>\n\n  const resolvedOptions = mergeProxy(\n    getOptionsWithReactiveValues(mergedOptions),\n    {\n      // Remove state and onStateChange - store handles it internally\n      mergeOptions: (\n        defaultOptions: TableOptions<TFeatures, TData>,\n        newOptions: Partial<TableOptions<TFeatures, TData>>,\n      ) => {\n        return flatMerge(defaultOptions, newOptions)\n      },\n    },\n  ) as TableOptions<TFeatures, TData>\n\n  const coreTable = constructTable(resolvedOptions)\n  const table = coreTable as unknown as VueTable<TFeatures, TData, TSelected>\n\n  watch(\n    () => getReactiveOptionDeps(mergedOptions),\n    () => {\n      syncTableOptions(coreTable, mergedOptions)\n    },\n    { immediate: true },\n  )\n\n  watch(\n    () => {\n      const controlledState = unref(tableOptions.state) as\n        | Record<string, unknown>\n        | undefined\n      const controlledAtoms = unref(tableOptions.atoms) as\n        | Record<string, unknown>\n        | undefined\n\n      if (!controlledState) {\n        return []\n      }\n\n      const controlledValues: Array<unknown> = []\n\n      for (const key of Object.keys(table.initialState)) {\n        if (!(key in controlledState) || controlledAtoms?.[key] !== undefined) {\n          continue\n        }\n\n        // Reading only controlled state slices here lets Vue subscribe to\n        // getters/computed values that are passed through `options.state`.\n        controlledValues.push(controlledState[key])\n      }\n\n      return controlledValues\n    },\n    (controlledValues) => {\n      if (controlledValues.length > 0) {\n        syncTableOptions(coreTable, mergedOptions)\n      }\n    },\n    { immediate: true },\n  )\n\n  table.Subscribe = ((props: {\n    source?: SubscribeSource<unknown>\n    selector?: ((state: unknown) => unknown) | undefined\n    children:\n      | ((state: Readonly<unknown>) => VNode | Array<VNode>)\n      | VNode\n      | Array<VNode>\n  }) => {\n    const source = props.source ?? table.store\n    const selected = useSelector(source as never, props.selector as never, {\n      compare: shallow,\n    })\n    if (typeof props.children === 'function') {\n      return props.children(selected.value as Readonly<unknown>)\n    }\n    return props.children\n  }) as VueTable<TFeatures, TData, TSelected>['Subscribe']\n\n  const stateStore = useSelector(table.store, selector)\n\n  return {\n    ...table,\n    get state() {\n      return stateStore.value\n    },\n  }\n}\n"],"mappings":";;;;;;;AAoCA,SAAS,6BAGP,SAAyD;CACzD,MAAM,kBAA2C,CAAC;CAElD,KAAK,MAAM,OAAO,OAAO,KAAK,OAAO,GACnC,gBAAgB,OAAO,MACrB,QAAQ,IACV;CAGF,OAAO,WAAW,SAAS,eAAe;AAC5C;AAEA,SAAS,sBAGP,SAAyD;CACzD,OAAO,OAAO,KAAK,OAAO,CAAC,CAAC,KAAK,QAC/B,MAAM,QAAQ,IAA4D,CAC5E;AACF;;;;;;;;;;;;;;;;;;;;;;;;AAiFA,SAAgB,SAKd,cAGA,UACuC;CACvC,MAAM,oBACJ,OACA,YACG;EACH,MAAM,YAAY,SAChB,UAAU,MAAM,6BAA6B,OAAO,CAAC,CACvD;CACF;CAEA,MAAM,gBAAgB,WAAW,cAAc,EAC7C,UAAU;EACR,sBAAsB,cAAc;EACpC,GAAI,MAAM,aAAa,QAAQ,KAAK,CAAC;CACvC,EACF,CAAC;CAeD,MAAM,YAAY,eAbM,WACtB,6BAA6B,aAAa,GAC1C,EAEE,eACE,gBACA,eACG;EACH,OAAO,UAAU,gBAAgB,UAAU;CAC7C,EACF,CAG6C,CAAC;CAChD,MAAM,QAAQ;CAEd,YACQ,sBAAsB,aAAa,SACnC;EACJ,iBAAiB,WAAW,aAAa;CAC3C,GACA,EAAE,WAAW,KAAK,CACpB;CAEA,YACQ;EACJ,MAAM,kBAAkB,MAAM,aAAa,KAAK;EAGhD,MAAM,kBAAkB,MAAM,aAAa,KAAK;EAIhD,IAAI,CAAC,iBACH,OAAO,CAAC;EAGV,MAAM,mBAAmC,CAAC;EAE1C,KAAK,MAAM,OAAO,OAAO,KAAK,MAAM,YAAY,GAAG;GACjD,IAAI,EAAE,OAAO,uFAAoB,gBAAkB,UAAS,QAC1D;GAKF,iBAAiB,KAAK,gBAAgB,IAAI;EAC5C;EAEA,OAAO;CACT,IACC,qBAAqB;EACpB,IAAI,iBAAiB,SAAS,GAC5B,iBAAiB,WAAW,aAAa;CAE7C,GACA,EAAE,WAAW,KAAK,CACpB;CAEA,MAAM,cAAc,UAOd;EAEJ,MAAM,WAAW,YADF,MAAM,UAAU,MAAM,OACS,MAAM,UAAmB,EACrE,SAAS,QACX,CAAC;EACD,IAAI,OAAO,MAAM,aAAa,YAC5B,OAAO,MAAM,SAAS,SAAS,KAA0B;EAE3D,OAAO,MAAM;CACf;CAEA,MAAM,aAAa,YAAY,MAAM,OAAO,QAAQ;CAEpD,OAAO;EACL,GAAG;EACH,IAAI,QAAQ;GACV,OAAO,WAAW;EACpB;CACF;AACF"}
+{"version":3,"file":"useTable.js","names":[],"sources":["../src/useTable.ts"],"sourcesContent":["import { getCurrentScope, onScopeDispose, unref, watch } from 'vue'\nimport { constructTable } from '@tanstack/table-core'\nimport { flatMerge, mergeProxy } from './merge-proxy'\nimport { vueReactivity } from './reactivity'\nimport type {\n  RowData,\n  Table,\n  TableFeatures,\n  TableOptions,\n  TableState,\n} from '@tanstack/table-core'\nimport type { MaybeRef, VNode } from 'vue'\n\nexport type TableOptionsWithReactiveData<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n> = {\n  [K in keyof TableOptions<TFeatures, TData>]: K extends 'data'\n    ? MaybeRef<ReadonlyArray<TData>>\n    : MaybeRef<TableOptions<TFeatures, TData>[K]>\n}\n\nfunction getOptionsWithReactiveValues<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n>(options: TableOptionsWithReactiveData<TFeatures, TData>) {\n  const resolvedOptions: Record<string, unknown> = {}\n\n  for (const key of Object.keys(options)) {\n    resolvedOptions[key] = unref(\n      options[key as keyof TableOptionsWithReactiveData<TFeatures, TData>],\n    )\n  }\n\n  return mergeProxy(options, resolvedOptions)\n}\n\nfunction getReactiveOptionDeps<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n>(options: TableOptionsWithReactiveData<TFeatures, TData>) {\n  return Object.keys(options).map((key) =>\n    unref(options[key as keyof TableOptionsWithReactiveData<TFeatures, TData>]),\n  )\n}\n\nexport type VueTable<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n> = Omit<Table<TFeatures, TData>, 'store'> & {\n  /**\n   * @deprecated Prefer `table.atoms.<slice>.get()` for slice snapshots, or\n   * `table.Subscribe` for explicit subscriptions. `table.store.state` is a\n   * current-value snapshot and is easy to misuse in render code.\n   */\n  readonly store: Table<TFeatures, TData>['store']\n  /** Creates a reactive render boundary. The child function reads the table\n   * atoms it needs, so Vue only tracks those atom reads.\n   */\n  Subscribe: (props: {\n    children: (atoms: Table<TFeatures, TData>['atoms']) => VNode | Array<VNode>\n  }) => VNode | Array<VNode>\n}\n\n/**\n * Creates a Vue table instance backed by Vue-aware TanStack Store atoms.\n *\n * Table options may contain Vue refs or computed values. The adapter unwraps\n * those reactive inputs, watches them with synchronous flushing, and keeps the\n * table options in sync. Use `table.Subscribe` or native Vue computed values\n * around `table.atoms.<slice>.get()` for selected reactive reads.\n *\n * @example\n * ```ts\n * const table = useTable(\n *   {\n *     features,\n *     columns,\n *     data,\n *   },\n * )\n * ```\n */\nexport function useTable<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n>(\n  tableOptions:\n    | TableOptions<TFeatures, TData>\n    | TableOptionsWithReactiveData<TFeatures, TData>,\n): VueTable<TFeatures, TData> {\n  const syncTableOptions = (\n    table: Table<TFeatures, TData>,\n    options: TableOptionsWithReactiveData<TFeatures, TData>,\n  ) => {\n    table.setOptions((prev) =>\n      flatMerge(prev, getOptionsWithReactiveValues(options)),\n    )\n  }\n\n  const reactivity = vueReactivity()\n\n  const mergedOptions = mergeProxy(tableOptions, {\n    features: {\n      coreReactivityFeature: reactivity,\n      ...(unref(tableOptions.features) ?? {}),\n    },\n  }) as TableOptionsWithReactiveData<TFeatures, TData>\n\n  const resolvedOptions = mergeProxy(\n    getOptionsWithReactiveValues(mergedOptions),\n    {\n      // Remove state and onStateChange - store handles it internally\n      mergeOptions: (\n        defaultOptions: TableOptions<TFeatures, TData>,\n        newOptions: Partial<TableOptions<TFeatures, TData>>,\n      ) => {\n        return flatMerge(defaultOptions, newOptions)\n      },\n    },\n  ) as TableOptions<TFeatures, TData>\n\n  const coreTable = constructTable(resolvedOptions)\n  const table = coreTable as unknown as VueTable<TFeatures, TData>\n\n  if (getCurrentScope()) {\n    onScopeDispose(() => reactivity.unmount?.())\n  }\n\n  watch(\n    () => getReactiveOptionDeps(mergedOptions),\n    () => {\n      syncTableOptions(coreTable, mergedOptions)\n    },\n    { immediate: true },\n  )\n\n  watch(\n    () => {\n      const controlledState = unref(tableOptions.state) as\n        | Record<string, unknown>\n        | undefined\n      const controlledAtoms = unref(tableOptions.atoms) as\n        | Record<string, unknown>\n        | undefined\n\n      if (!controlledState) {\n        return []\n      }\n\n      const controlledValues: Array<unknown> = []\n\n      for (const key of Object.keys(table.initialState)) {\n        if (!(key in controlledState) || controlledAtoms?.[key] !== undefined) {\n          continue\n        }\n\n        // Reading only controlled state slices here lets Vue subscribe to\n        // getters/computed values that are passed through `options.state`.\n        controlledValues.push(controlledState[key])\n      }\n\n      return controlledValues\n    },\n    (controlledValues) => {\n      if (controlledValues.length > 0) {\n        syncTableOptions(coreTable, mergedOptions)\n      }\n    },\n    { immediate: true },\n  )\n\n  table.Subscribe = (props: {\n    children: (atoms: Table<TFeatures, TData>['atoms']) => VNode | Array<VNode>\n  }) => {\n    return props.children(table.atoms)\n  }\n\n  return table\n}\n"],"mappings":";;;;;;AAsBA,SAAS,6BAGP,SAAyD;CACzD,MAAM,kBAA2C,CAAC;CAElD,KAAK,MAAM,OAAO,OAAO,KAAK,OAAO,GACnC,gBAAgB,OAAO,MACrB,QAAQ,IACV;CAGF,OAAO,WAAW,SAAS,eAAe;AAC5C;AAEA,SAAS,sBAGP,SAAyD;CACzD,OAAO,OAAO,KAAK,OAAO,CAAC,CAAC,KAAK,QAC/B,MAAM,QAAQ,IAA4D,CAC5E;AACF;;;;;;;;;;;;;;;;;;;;AAuCA,SAAgB,SAId,cAG4B;CAC5B,MAAM,oBACJ,OACA,YACG;EACH,MAAM,YAAY,SAChB,UAAU,MAAM,6BAA6B,OAAO,CAAC,CACvD;CACF;CAEA,MAAM,aAAa,cAAc;CAEjC,MAAM,gBAAgB,WAAW,cAAc,EAC7C,UAAU;EACR,uBAAuB;EACvB,GAAI,MAAM,aAAa,QAAQ,KAAK,CAAC;CACvC,EACF,CAAC;CAeD,MAAM,YAAY,eAbM,WACtB,6BAA6B,aAAa,GAC1C,EAEE,eACE,gBACA,eACG;EACH,OAAO,UAAU,gBAAgB,UAAU;CAC7C,EACF,CAG6C,CAAC;CAChD,MAAM,QAAQ;CAEd,IAAI,gBAAgB,GAClB,qBAAqB;;2CAAW,kGAAU;EAAC;CAG7C,YACQ,sBAAsB,aAAa,SACnC;EACJ,iBAAiB,WAAW,aAAa;CAC3C,GACA,EAAE,WAAW,KAAK,CACpB;CAEA,YACQ;EACJ,MAAM,kBAAkB,MAAM,aAAa,KAAK;EAGhD,MAAM,kBAAkB,MAAM,aAAa,KAAK;EAIhD,IAAI,CAAC,iBACH,OAAO,CAAC;EAGV,MAAM,mBAAmC,CAAC;EAE1C,KAAK,MAAM,OAAO,OAAO,KAAK,MAAM,YAAY,GAAG;GACjD,IAAI,EAAE,OAAO,uFAAoB,gBAAkB,UAAS,QAC1D;GAKF,iBAAiB,KAAK,gBAAgB,IAAI;EAC5C;EAEA,OAAO;CACT,IACC,qBAAqB;EACpB,IAAI,iBAAiB,SAAS,GAC5B,iBAAiB,WAAW,aAAa;CAE7C,GACA,EAAE,WAAW,KAAK,CACpB;CAEA,MAAM,aAAa,UAEb;EACJ,OAAO,MAAM,SAAS,MAAM,KAAK;CACnC;CAEA,OAAO;AACT"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/vue-table",
-  "version": "9.0.0-beta.2",
+  "version": "9.0.0-beta.20",
   "description": "Headless UI for building powerful tables & datagrids for Vue.",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -50,13 +50,13 @@
     "skills"
   ],
   "dependencies": {
-    "@tanstack/table-core": "9.0.0-beta.1",
-    "@tanstack/vue-store": "^0.11.0"
+    "@tanstack/store": "^0.11.0",
+    "@tanstack/table-core": "9.0.0-beta.20"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^6.0.7",
     "eslint-plugin-vue": "^10.9.2",
-    "vue": "^3.5.35"
+    "vue": "^3.5.38"
   },
   "peerDependencies": {
     "vue": ">=3.2"

package/skills/vue/client-to-server/SKILL.md

@@ -3,7 +3,7 @@ name: vue/client-to-server
 description: >
   Convert a client-side `@tanstack/vue-table` to server-side. Set `manualPagination` /
   `manualSorting` / `manualFiltering` / `manualGrouping` / `manualExpanding` for whichever
-  slices the server owns; drop the matching `rowModels` factories (don't ship
+  slices the server owns; omit the matching row model factory from `tableFeatures` (don't ship
   `paginatedRowModel` when the server paginates); supply `rowCount` so `table.getPageCount()`
   works; own the relevant state slices via either external atoms (`@tanstack/vue-store`
   `createAtom` + `options.atoms`) or `state` + `on[State]Change` with getter wrappers. Key any
@@ -87,10 +87,9 @@ watchEffect(() => {
   if (next != null) rowCount.value = next // keep last known total for pager UI
 })
 
-// 3) Manual pagination + `rowCount`. NO paginatedRowModel in `rowModels` — server paginates.
+// 3) Manual pagination + `rowCount`. No paginatedRowModel in features — server paginates.
 const table = useTable({
   features,
-  rowModels: {},
   columns,
   data: tableData,
   rowCount,
@@ -104,18 +103,19 @@ Source: `examples/vue/with-tanstack-query/src/App.tsx`, `examples/vue/basic-exte
 
 ## Core Patterns
 
-### 1. The `manual*` flag + `rowModels` drop pair
+### 1. The `manual*` flag + factory omission pair
 
-Pick which slices live server-side and flip the matching `manual*` flag. **Also drop the
-matching `rowModels` factory** — otherwise the table re-processes server-processed rows.
+Pick which slices live server-side and flip the matching `manual*` flag. **Also omit the
+matching row model factory from `tableFeatures`** — otherwise the table re-processes
+server-processed rows.
 
-| Server owns | Set                      | Drop from `rowModels` |
-| ----------- | ------------------------ | --------------------- |
-| Pagination  | `manualPagination: true` | `paginatedRowModel`   |
-| Sorting     | `manualSorting: true`    | `sortedRowModel`      |
-| Filtering   | `manualFiltering: true`  | `filteredRowModel`    |
-| Grouping    | `manualGrouping: true`   | `groupedRowModel`     |
-| Expanding   | `manualExpanding: true`  | `expandedRowModel`    |
+| Server owns | Set                      | Omit from `tableFeatures` |
+| ----------- | ------------------------ | ------------------------- |
+| Pagination  | `manualPagination: true` | `paginatedRowModel`       |
+| Sorting     | `manualSorting: true`    | `sortedRowModel`          |
+| Filtering   | `manualFiltering: true`  | `filteredRowModel`        |
+| Grouping    | `manualGrouping: true`   | `groupedRowModel`         |
+| Expanding   | `manualExpanding: true`  | `expandedRowModel`        |
 
 Column visibility / ordering / pinning / row selection are client-side state and stay as-is.
 
@@ -127,7 +127,6 @@ Without `rowCount`, `getPageCount()` falls back to `Math.ceil(data.length / page
 ```ts
 useTable({
   features,
-  rowModels: {},
   columns,
   data: tableData,
   rowCount: dataQuery.data.value?.rowCount, // or a stable ref/computed
@@ -151,7 +150,6 @@ const paginationAtom = createAtom<PaginationState>({
 })
 useTable({
   features,
-  rowModels: {},
   columns,
   data,
   rowCount,
@@ -169,7 +167,6 @@ const pagination = ref<PaginationState>({ pageIndex: 0, pageSize: 10 })
 
 useTable({
   features,
-  rowModels: {},
   columns,
   data,
   rowCount,
@@ -230,7 +227,6 @@ the table will paginate that 10-row slice again and show "Page 1 of 1".
 // ❌
 useTable({
   features,
-  rowModels: {},
   columns,
   data: serverPage.rows,
   rowCount,
@@ -243,13 +239,13 @@ useTable({
 
 ```ts
 // ❌ Factory ships for nothing AND the table re-paginates server-sliced data.
-rowModels: {
-  paginatedRowModel: createPaginatedRowModel()
-}
+const features = tableFeatures({
+  rowPaginationFeature,
+  paginatedRowModel: createPaginatedRowModel(),
+})
 
-// ✅
-rowModels: {
-}
+// ✅ Omit the factory when the server paginates; keep the feature for its API.
+const features = tableFeatures({ rowPaginationFeature })
 ```
 
 Same applies to `sortedRowModel`, `filteredRowModel`, `groupedRowModel`, `expandedRowModel`
@@ -267,7 +263,6 @@ when the server owns the slice.
 const pagination = ref({ pageIndex: 0, pageSize: 10 })
 useTable({
   features,
-  rowModels: {},
   columns,
   data,
   rowCount,
@@ -350,8 +345,8 @@ table.setColumnFilters(/* ... */)
 ### "API missing" because the feature isn't in `features` (CRITICAL — v9-specific)
 
 Server-side pagination still needs `rowPaginationFeature` in `tableFeatures({...})` — that's
-what surfaces `table.setPageIndex`, `table.nextPage`, `table.getPageCount`. The factory in
-`rowModels` is what you drop; the feature stays.
+what surfaces `table.setPageIndex`, `table.nextPage`, `table.getPageCount`. The row model
+factory (`paginatedRowModel`) is what you omit; the feature stays.
 
 ```ts
 const features = tableFeatures({ rowPaginationFeature }) // ✅ even with manualPagination

package/skills/vue/compose-with-tanstack-form/SKILL.md

@@ -60,7 +60,10 @@ type Person = {
 }
 type FormRow = Omit<Person, 'subRows'> // <-- avoid TS2589 in form DeepKeys
 
-const features = tableFeatures({ rowPaginationFeature })
+const features = tableFeatures({
+  rowPaginationFeature,
+  paginatedRowModel: createPaginatedRowModel(),
+})
 const columnHelper = createColumnHelper<typeof features, FormRow>()
 
 // 2) Form owns the data array. The table reads it.
@@ -99,7 +102,6 @@ const columns = computed(() =>
 
 const table = useTable({
   features,
-  rowModels: { paginatedRowModel: createPaginatedRowModel() },
   get columns() {
     return columns.value
   },
@@ -191,7 +193,6 @@ const form = useForm({ defaultValues: { data: makeData(100) } })
 
 const table = useTable({
   features,
-  rowModels: { paginatedRowModel: createPaginatedRowModel() },
   columns,
   get data() {
     return form.state.values.data
@@ -324,7 +325,6 @@ const columns = computed(() =>
 )
 const table = useTable({
   features,
-  rowModels: {},
   get columns() {
     return columns.value
   },

package/skills/vue/compose-with-tanstack-pacer/SKILL.md

@@ -150,7 +150,6 @@ const throttler = new Throttler(
 
 useTable({
   features,
-  rowModels: {},
   columns,
   data,
   state: {
@@ -301,8 +300,12 @@ useTable({ ..., data: filtered })
 ```ts
 // ✅ Use the table's filter feature; debounce the writer.
 useTable({
-  features: tableFeatures({ columnFilteringFeature, globalFilteringFeature }),
-  rowModels: { filteredRowModel: createFilteredRowModel(filterFns) },
+  features: tableFeatures({
+    columnFilteringFeature,
+    globalFilteringFeature,
+    filteredRowModel: createFilteredRowModel(),
+    filterFns,
+  }),
   columns,
   data,
 })

package/skills/vue/compose-with-tanstack-query/SKILL.md

@@ -4,12 +4,12 @@ description: >
   Server-side / async data flow for `@tanstack/vue-table` v9 + `@tanstack/vue-query`. Key the
   `useQuery` query on the table state that drives the request (pagination + sorting + filters).
   Set `manualPagination` / `manualSorting` / `manualFiltering` for slices the server owns.
-  Drop the matching `rowModels` factory (don't ship `paginatedRowModel` when the server
-  paginates). Pass `rowCount` so `table.getPageCount()` works without all rows in memory. Pass
-  `placeholderData: keepPreviousData` to avoid a "0 rows flash" between pages. The cleanest
-  wiring uses external `createAtom`s + `options.atoms` so the table writes through to the atom
-  and the query refetches with no `on[State]Change` plumbing. The canonical Vue example is at
-  `examples/vue/with-tanstack-query/`.
+  Omit the matching row model factory from `tableFeatures` (don't ship `paginatedRowModel` when
+  the server paginates). Pass `rowCount` so `table.getPageCount()` works without all rows in
+  memory. Pass `placeholderData: keepPreviousData` to avoid a "0 rows flash" between pages. The
+  cleanest wiring uses external `createAtom`s + `options.atoms` so the table writes through to
+  the atom and the query refetches with no `on[State]Change` plumbing. The canonical Vue example
+  is at `examples/vue/with-tanstack-query/`.
 type: composition
 library: tanstack-table
 framework: vue
@@ -87,10 +87,9 @@ watchEffect(() => {
   if (next != null) rowCount.value = next
 })
 
-// 5) Manual pagination. No paginatedRowModel — server paginates.
+// 5) Manual pagination. No paginatedRowModel in features — server paginates.
 const table = useTable({
   features,
-  rowModels: {},
   columns,
   data: tableData,
   rowCount,
@@ -219,12 +218,12 @@ const dataQuery = useQuery(() => ({
 }))
 
 const table = useTable({
+  // server owns all three slices — no row model factories registered
   features: tableFeatures({
     rowSortingFeature,
     rowPaginationFeature,
     columnFilteringFeature,
   }),
-  rowModels: {}, // server owns all three
   columns,
   data: computed(() => dataQuery.data.value?.rows ?? EMPTY),
   rowCount,
@@ -265,7 +264,6 @@ Query tells it. Always invalidate on writes.
 // ❌ Table re-paginates the already-paginated server response.
 useTable({
   features,
-  rowModels: {},
   columns,
   data: tableData,
   rowCount,
@@ -286,13 +284,13 @@ server already paginated. The pager locks at "Page 1 of 1".
 
 ```ts
 // ❌ Ships the factory for nothing AND it tries to paginate server-paginated data.
-rowModels: {
-  paginatedRowModel: createPaginatedRowModel()
-}
+const features = tableFeatures({
+  rowPaginationFeature,
+  paginatedRowModel: createPaginatedRowModel(),
+})
 
-// ✅
-rowModels: {
-}
+// ✅ Omit the factory when the server paginates.
+const features = tableFeatures({ rowPaginationFeature })
 ```
 
 ### Forgetting controlled state in `queryKey` (CRITICAL)
@@ -350,14 +348,14 @@ Same hooks names, different reactivity model (function-returning-options instead
 
 ### Hallucinating pre-v9 table APIs (CRITICAL)
 
-`useVueTable` + `getCoreRowModel: getCoreRowModel()` is v8. v9 uses `useTable` +
-`features` + `rowModels`. See `tanstack-table/vue/migrate-v8-to-v9`.
+`useVueTable` + `getCoreRowModel: getCoreRowModel()` is v8. v9 uses `useTable` + `features`
+with row model factories as slots. See `tanstack-table/vue/migrate-v8-to-v9`.
 
 ### "API missing" because feature not in `features` (CRITICAL — v9-specific)
 
 Server-side pagination still needs `rowPaginationFeature` in `tableFeatures({...})`. The
-feature gives you `table.nextPage` / `table.setPageIndex` / `table.getPageCount`. The
-`rowModels` factory is what you drop; the feature stays.
+feature gives you `table.nextPage` / `table.setPageIndex` / `table.getPageCount`. The row
+model factory (`paginatedRowModel`) is what you omit; the feature stays.
 
 ### Reimplementing pagination loop manually (CRITICAL — #1 AI tell)
 

package/skills/vue/compose-with-tanstack-store/SKILL.md

@@ -57,7 +57,13 @@ import {
 
 type Person = { firstName: string; lastName: string; age: number }
 
-const features = tableFeatures({ rowSortingFeature, rowPaginationFeature })
+const features = tableFeatures({
+  rowSortingFeature,
+  rowPaginationFeature,
+  sortedRowModel: createSortedRowModel(),
+  paginatedRowModel: createPaginatedRowModel(),
+  sortFns,
+})
 const columnHelper = createColumnHelper<typeof features, Person>()
 const columns = columnHelper.columns([
   columnHelper.accessor('firstName', { header: 'First' }),
@@ -82,10 +88,6 @@ const data = ref<Person[]>([])
 //    `table.setSorting()` writes through to your atom.
 const table = useTable({
   features,
-  rowModels: {
-    sortedRowModel: createSortedRowModel(sortFns),
-    paginatedRowModel: createPaginatedRowModel(),
-  },
   columns,
   data,
   atoms: {
@@ -141,7 +143,6 @@ options.atoms[slice]    >  options.state[slice]  >  table.baseAtoms[slice]
 // ❌ Passing both for the SAME slice. `atoms.sorting` wins; `state.sorting` is silently dead.
 useTable({
   features,
-  rowModels: {},
   columns,
   data,
   state: {