@tanstack/vue-table 9.0.0-beta.3 → 9.0.0-beta.5

package/dist/useTable.d.cts

@@ -1,59 +1,29 @@
-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
@@ -64,13 +34,10 @@ type VueTable<TFeatures extends TableFeatures, TData extends RowData, TSelected
  *     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,59 +1,29 @@
 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
@@ -64,13 +34,10 @@ type VueTable<TFeatures extends TableFeatures, TData extends RowData, TSelected
  *     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,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. 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
@@ -30,24 +29,26 @@ function getReactiveOptionDeps(options) {
 *     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(),
+		coreReativityFeature: 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 +65,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 *     rowModels: {},\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      coreReativityFeature: 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;;;;;;;;;;;;;;;;;;;;;AAwCA,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,sBAAsB;EACtB,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.3",
+  "version": "9.0.0-beta.5",
   "description": "Headless UI for building powerful tables & datagrids for Vue.",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -50,8 +50,8 @@
     "skills"
   ],
   "dependencies": {
-    "@tanstack/table-core": "^9.0.0-beta.2",
-    "@tanstack/vue-store": "^0.11.0"
+    "@tanstack/store": "^0.11.0",
+    "@tanstack/table-core": "^9.0.0-beta.2"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^6.0.7",

package/src/FlexRender.ts

@@ -1,12 +1,27 @@
 import { defineComponent, h, isVNode } from 'vue'
 import type { PropType } from 'vue'
-import type {
-  Cell,
-  CellData,
-  Header,
-  RowData,
-  TableFeatures,
-} from '@tanstack/table-core'
+
+export interface FlexRenderCell {
+  column: {
+    columnDef: {
+      aggregatedCell?: any
+      cell?: any
+    }
+  }
+  getContext: () => any
+  getIsAggregated?: () => boolean
+  getIsPlaceholder?: () => boolean
+}
+
+export interface FlexRenderHeader {
+  column: {
+    columnDef: {
+      footer?: any
+      header?: any
+    }
+  }
+  getContext: () => any
+}
 
 /**
  * If rendering headers, cells, or footers with custom markup, use flexRender instead of `cell.getValue()` or `cell.renderValue()`.
@@ -60,24 +75,24 @@ export const FlexRender = defineComponent({
       default: undefined,
     },
     cell: {
-      type: Object as PropType<Cell<any, any, any>>,
+      type: Object as PropType<FlexRenderCell>,
       default: undefined,
     },
     header: {
-      type: Object as PropType<Header<any, any, any>>,
+      type: Object as PropType<FlexRenderHeader>,
       default: undefined,
     },
     footer: {
-      type: Object as PropType<Header<any, any, any>>,
+      type: Object as PropType<FlexRenderHeader>,
       default: undefined,
     },
   },
   setup: (props: {
     render?: any
     props?: any
-    cell?: Cell<any, any, any>
-    header?: Header<any, any, any>
-    footer?: Header<any, any, any>
+    cell?: FlexRenderCell
+    header?: FlexRenderHeader
+    footer?: FlexRenderHeader
   }) => {
     return () => {
       // New shorthand pattern: extract render and props from cell/header/footer

package/src/createTableHook.ts

@@ -1,10 +1,10 @@
 import { createColumnHelper as coreCreateColumnHelper } from '@tanstack/table-core'
-import { useSelector } from '@tanstack/vue-store'
 import { defineComponent, h, inject, provide } from 'vue'
 import { FlexRender } from './FlexRender'
 import { mergeProxy } from './merge-proxy'
 import { useTable } from './useTable'
 import type { TableOptionsWithReactiveData, VueTable } from './useTable'
+import type { FlexRenderCell, FlexRenderHeader } from './FlexRender'
 import type { Component, InjectionKey, PropType, VNodeChild } from 'vue'
 import type {
   AccessorFn,
@@ -192,31 +192,22 @@ export type CreateTableHookOptions<
   headerComponents?: THeaderComponents
 }
 
-export interface AppTableProps<
-  TFeatures extends TableFeatures,
-  TSelected = unknown,
-> {
-  selector?: (state: TableState<TFeatures>) => TSelected
-}
+export interface AppTableProps {}
 
 export interface AppCellProps<
   TFeatures extends TableFeatures,
   TData extends RowData,
   TValue extends CellData = CellData,
-  TSelected = unknown,
 > {
   cell: Cell<TFeatures, TData, TValue>
-  selector?: (state: TableState<TFeatures>) => TSelected
 }
 
 export interface AppHeaderProps<
   TFeatures extends TableFeatures,
   TData extends RowData,
   TValue extends CellData = CellData,
-  TSelected = unknown,
 > {
   header: Header<TFeatures, TData, TValue>
-  selector?: (state: TableState<TFeatures>) => TSelected
 }
 
 export type AppVueTable<
@@ -226,9 +217,9 @@ export type AppVueTable<
   TTableComponents extends Record<string, ComponentType<any>>,
   TCellComponents extends Record<string, ComponentType<any>>,
   THeaderComponents extends Record<string, ComponentType<any>>,
-> = VueTable<TFeatures, TData, TSelected> &
+> = VueTable<TFeatures, TData> &
   NoInfer<TTableComponents> & {
-    AppTable: Component<AppTableProps<TFeatures>>
+    AppTable: Component<AppTableProps>
     AppCell: Component<AppCellProps<TFeatures, TData>>
     AppHeader: Component<AppHeaderProps<TFeatures, TData>>
     AppFooter: Component<AppHeaderProps<TFeatures, TData>>
@@ -239,15 +230,15 @@ export const AppFlexRender = defineComponent({
   name: 'TableFlexRender',
   props: {
     cell: {
-      type: Object as PropType<Cell<any, any, any>>,
+      type: Object as PropType<FlexRenderCell>,
       default: undefined,
     },
     header: {
-      type: Object as PropType<Header<any, any, any>>,
+      type: Object as PropType<FlexRenderHeader>,
       default: undefined,
     },
     footer: {
-      type: Object as PropType<Header<any, any, any>>,
+      type: Object as PropType<FlexRenderHeader>,
       default: undefined,
     },
   },
@@ -314,7 +305,7 @@ export function createTableHook<
   THeaderComponents
 >) {
   const TableContext = Symbol('TableContext') as InjectionKey<
-    VueTable<TFeatures, any, any>
+    VueTable<TFeatures, any>
   >
   const CellContext = Symbol('CellContext') as InjectionKey<
     Cell<TFeatures, any, any>
@@ -410,19 +401,15 @@ export function createTableHook<
     },
   })
 
-  function useAppTable<
-    TData extends RowData,
-    TSelected = TableState<TFeatures>,
-  >(
+  function useAppTable<TData extends RowData>(
     tableOptions: Omit<
       TableOptionsWithReactiveData<TFeatures, TData>,
       'features' | 'rowModels'
     >,
-    selector?: (state: TableState<TFeatures>) => TSelected,
   ): AppVueTable<
     TFeatures,
     TData,
-    TSelected,
+    TableState<TFeatures>,
     TTableComponents,
     TCellComponents,
     THeaderComponents
@@ -432,28 +419,14 @@ export function createTableHook<
       tableOptions,
     ) as TableOptionsWithReactiveData<TFeatures, TData>
 
-    const table = useTable<TFeatures, TData, TSelected>(mergedOptions, selector)
+    const table = useTable<TFeatures, TData>(mergedOptions)
 
     const AppTable = defineComponent({
       name: 'AppTable',
-      props: {
-        selector: {
-          type: Function as PropType<(state: TableState<TFeatures>) => unknown>,
-          default: undefined,
-        },
-      },
-      setup(props, { slots }) {
+      setup(_, { slots }) {
         provide(TableContext, table)
-        const selected = props.selector
-          ? useSelector(table.store, props.selector)
-          : undefined
-
         return () => {
-          if (!props.selector) {
-            return slots.default?.()
-          }
-
-          return slots.default?.({ state: selected?.value })
+          return slots.default?.()
         }
       },
     })
@@ -465,20 +438,12 @@ export function createTableHook<
           type: Object as PropType<object>,
           required: true,
         },
-        selector: {
-          type: Function as PropType<(state: TableState<TFeatures>) => unknown>,
-          default: undefined,
-        },
       },
       setup(props, { slots }) {
         const cell = props.cell as Cell<TFeatures, TData, any>
 
         provide(CellContext, cell)
 
-        const selected = props.selector
-          ? useSelector(table.store, props.selector)
-          : undefined
-
         const extendedCell = Object.assign(cell, {
           FlexRender: CellFlexRender,
           ...(cellComponents ?? {}),
@@ -486,11 +451,7 @@ export function createTableHook<
           TCellComponents & { FlexRender: Component }
 
         return () => {
-          return slots.default?.(
-            props.selector
-              ? { cell: extendedCell, state: selected?.value }
-              : { cell: extendedCell },
-          )
+          return slots.default?.({ cell: extendedCell })
         }
       },
     })
@@ -502,20 +463,12 @@ export function createTableHook<
           type: Object as PropType<object>,
           required: true,
         },
-        selector: {
-          type: Function as PropType<(state: TableState<TFeatures>) => unknown>,
-          default: undefined,
-        },
       },
       setup(props, { slots }) {
         const header = props.header as Header<TFeatures, TData, any>
 
         provide(HeaderContext, header)
 
-        const selected = props.selector
-          ? useSelector(table.store, props.selector)
-          : undefined
-
         const extendedHeader = Object.assign(header, {
           FlexRender: HeaderFlexRender,
           ...(headerComponents ?? {}),
@@ -523,11 +476,7 @@ export function createTableHook<
           THeaderComponents & { FlexRender: Component }
 
         return () => {
-          return slots.default?.(
-            props.selector
-              ? { header: extendedHeader, state: selected?.value }
-              : { header: extendedHeader },
-          )
+          return slots.default?.({ header: extendedHeader })
         }
       },
     })
@@ -539,20 +488,12 @@ export function createTableHook<
           type: Object as PropType<object>,
           required: true,
         },
-        selector: {
-          type: Function as PropType<(state: TableState<TFeatures>) => unknown>,
-          default: undefined,
-        },
       },
       setup(props, { slots }) {
         const header = props.header as Header<TFeatures, TData, any>
 
         provide(HeaderContext, header)
 
-        const selected = props.selector
-          ? useSelector(table.store, props.selector)
-          : undefined
-
         const extendedHeader = Object.assign(header, {
           FlexRender: FooterFlexRender,
           ...(headerComponents ?? {}),
@@ -560,11 +501,7 @@ export function createTableHook<
           THeaderComponents & { FlexRender: Component }
 
         return () => {
-          return slots.default?.(
-            props.selector
-              ? { header: extendedHeader, state: selected?.value }
-              : { header: extendedHeader },
-          )
+          return slots.default?.({ header: extendedHeader })
         }
       },
     })
@@ -579,7 +516,7 @@ export function createTableHook<
     }) as AppVueTable<
       TFeatures,
       TData,
-      TSelected,
+      TableState<TFeatures>,
       TTableComponents,
       TCellComponents,
       THeaderComponents