@tanstack/vue-table 9.0.0-alpha.32 → 9.0.0-alpha.34

package/dist/useTable.d.cts

@@ -1,29 +1,31 @@
 import { MaybeRef, VNode } from "vue";
 import { NoInfer, RowData, Table, TableFeatures, TableOptions, TableState } from "@tanstack/table-core";
+import { Atom, ReadonlyAtom } from "@tanstack/vue-store";
 
 //#region src/useTable.d.ts
-type TableOptionsWithReactiveData<TFeatures extends TableFeatures, TData extends RowData> = Omit<TableOptions<TFeatures, TData>, 'data'> & {
-  data: MaybeRef<ReadonlyArray<TData>>;
-};
+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 = {}> = Table<TFeatures, TData> & {
   /**
-   * A Vue component that allows you to subscribe to the table state.
-   *
-   * This is useful for opting into state subscriptions for specific parts of the table state.
-   *
-   * @example
-   * <table.Subscribe selector={(state) => ({ rowSelection: state.rowSelection })}>
-   *   {(state) => (
-   *     <tr>
-   *       // render the row
-   *     </tr>
-   *   )}
-   * </table.Subscribe>
+   * Store mode: `selector` required. Atom mode: pass `atom`; omit `selector` for the
+   * whole slice (identity), or pass `selector` to project. Split overloads so atom-only
+   * infers `TAtomValue` for `children` (see React `Subscribe`).
    */
-  Subscribe: <TSelected>(props: {
-    selector: (state: NoInfer<TableState<TFeatures>>) => TSelected;
-    children: ((state: Readonly<TSelected>) => VNode | Array<VNode>) | VNode | Array<VNode>;
-  }) => VNode | Array<VNode>;
+  Subscribe: {
+    <TAtomValue>(props: {
+      atom: Atom<TAtomValue> | ReadonlyAtom<TAtomValue>;
+      selector?: undefined;
+      children: ((state: Readonly<TAtomValue>) => VNode | Array<VNode>) | VNode | Array<VNode>;
+    }): VNode | Array<VNode>;
+    <TAtomValue, TSubSelected>(props: {
+      atom: Atom<TAtomValue> | ReadonlyAtom<TAtomValue>;
+      selector: (state: TAtomValue) => 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 `table.store.state` because it is selected by the `selector` function that you pass as the 2nd argument to `useTable`.
    *
@@ -34,7 +36,7 @@ type VueTable<TFeatures extends TableFeatures, TData extends RowData, TSelected
    */
   readonly state: Readonly<TSelected>;
 };
-declare function useTable<TFeatures extends TableFeatures, TData extends RowData, TSelected = {}>(tableOptions: TableOptionsWithReactiveData<TFeatures, TData>, selector?: (state: TableState<TFeatures>) => TSelected): VueTable<TFeatures, TData, TSelected>;
+declare function useTable<TFeatures extends TableFeatures, TData extends RowData, TSelected = {}>(tableOptions: TableOptions<TFeatures, TData> | TableOptionsWithReactiveData<TFeatures, TData>, selector?: (state: TableState<TFeatures>) => TSelected): VueTable<TFeatures, TData, TSelected>;
 //#endregion
 export { TableOptionsWithReactiveData, VueTable, useTable };
 //# sourceMappingURL=useTable.d.cts.map

package/dist/useTable.d.ts

@@ -1,29 +1,31 @@
 import { MaybeRef, VNode } from "vue";
 import { NoInfer, RowData, Table, TableFeatures, TableOptions, TableState } from "@tanstack/table-core";
+import { Atom, ReadonlyAtom } from "@tanstack/vue-store";
 
 //#region src/useTable.d.ts
-type TableOptionsWithReactiveData<TFeatures extends TableFeatures, TData extends RowData> = Omit<TableOptions<TFeatures, TData>, 'data'> & {
-  data: MaybeRef<ReadonlyArray<TData>>;
-};
+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 = {}> = Table<TFeatures, TData> & {
   /**
-   * A Vue component that allows you to subscribe to the table state.
-   *
-   * This is useful for opting into state subscriptions for specific parts of the table state.
-   *
-   * @example
-   * <table.Subscribe selector={(state) => ({ rowSelection: state.rowSelection })}>
-   *   {(state) => (
-   *     <tr>
-   *       // render the row
-   *     </tr>
-   *   )}
-   * </table.Subscribe>
+   * Store mode: `selector` required. Atom mode: pass `atom`; omit `selector` for the
+   * whole slice (identity), or pass `selector` to project. Split overloads so atom-only
+   * infers `TAtomValue` for `children` (see React `Subscribe`).
    */
-  Subscribe: <TSelected>(props: {
-    selector: (state: NoInfer<TableState<TFeatures>>) => TSelected;
-    children: ((state: Readonly<TSelected>) => VNode | Array<VNode>) | VNode | Array<VNode>;
-  }) => VNode | Array<VNode>;
+  Subscribe: {
+    <TAtomValue>(props: {
+      atom: Atom<TAtomValue> | ReadonlyAtom<TAtomValue>;
+      selector?: undefined;
+      children: ((state: Readonly<TAtomValue>) => VNode | Array<VNode>) | VNode | Array<VNode>;
+    }): VNode | Array<VNode>;
+    <TAtomValue, TSubSelected>(props: {
+      atom: Atom<TAtomValue> | ReadonlyAtom<TAtomValue>;
+      selector: (state: TAtomValue) => 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 `table.store.state` because it is selected by the `selector` function that you pass as the 2nd argument to `useTable`.
    *
@@ -34,7 +36,7 @@ type VueTable<TFeatures extends TableFeatures, TData extends RowData, TSelected
    */
   readonly state: Readonly<TSelected>;
 };
-declare function useTable<TFeatures extends TableFeatures, TData extends RowData, TSelected = {}>(tableOptions: TableOptionsWithReactiveData<TFeatures, TData>, selector?: (state: TableState<TFeatures>) => TSelected): VueTable<TFeatures, TData, TSelected>;
+declare function useTable<TFeatures extends TableFeatures, TData extends RowData, TSelected = {}>(tableOptions: TableOptions<TFeatures, TData> | TableOptionsWithReactiveData<TFeatures, TData>, selector?: (state: TableState<TFeatures>) => TSelected): VueTable<TFeatures, TData, TSelected>;
 //#endregion
 export { TableOptionsWithReactiveData, VueTable, useTable };
 //# sourceMappingURL=useTable.d.ts.map

package/dist/useTable.js

@@ -1,19 +1,26 @@
 import { mergeProxy } from "./merge-proxy.js";
-import { isRef, ref, unref, watch, watchEffect } from "vue";
+import { ref, unref, watch, watchEffect } from "vue";
 import { constructReactivityFeature, constructTable } from "@tanstack/table-core";
-import { useStore } from "@tanstack/vue-store";
+import { shallow, useSelector } from "@tanstack/vue-store";
 
 //#region src/useTable.ts
-function getOptionsWithReactiveData(options) {
-	return mergeProxy(options, { data: unref(options.data) });
+function getOptionsWithReactiveValues(options) {
+	const resolvedOptions = {};
+	for (const key of Object.keys(options)) resolvedOptions[key] = unref(options[key]);
+	return mergeProxy(options, resolvedOptions);
+}
+function getReactiveOptionDeps(options) {
+	return Object.keys(options).map((key) => unref(options[key]));
 }
 function useTable(tableOptions, selector = () => ({})) {
 	const notifier = ref(0);
+	const syncTableOptions = (table, options) => {
+		table.setOptions(() => getOptionsWithReactiveValues(options));
+	};
 	const vueReactivityFeature = constructReactivityFeature({
 		stateNotifier: () => notifier.value,
 		optionsNotifier: () => notifier.value
 	});
-	const IS_REACTIVE = isRef(tableOptions.data);
 	const mergedOptions = {
 		...tableOptions,
 		_features: {
@@ -21,27 +28,38 @@ function useTable(tableOptions, selector = () => ({})) {
 			vueReactivityFeature
 		}
 	};
-	const table = constructTable(mergeProxy(IS_REACTIVE ? getOptionsWithReactiveData(mergedOptions) : mergedOptions, { mergeOptions: (defaultOptions, newOptions) => {
+	const table = constructTable(mergeProxy(getOptionsWithReactiveValues(mergedOptions), { mergeOptions: (defaultOptions, newOptions) => {
 		return mergeProxy(defaultOptions, newOptions);
 	} }));
-	const allState = useStore(table.store, (state) => state);
-	const allOptions = useStore(table.optionsStore, (state) => state);
+	const allState = useSelector(table.store, (state) => state);
+	const allOptions = useSelector(table.optionsStore, (state) => state);
 	watchEffect(() => {
 		allState.value;
 		allOptions.value;
 		notifier.value++;
 	});
-	watch(() => [IS_REACTIVE ? unref(tableOptions.data) : tableOptions.data, tableOptions], () => {
-		table.setOptions((prev) => {
-			return mergeProxy(prev, IS_REACTIVE ? getOptionsWithReactiveData(tableOptions) : tableOptions);
-		});
+	watch(() => getReactiveOptionDeps(mergedOptions), () => {
+		syncTableOptions(table, mergedOptions);
+	}, { immediate: true });
+	watch(() => {
+		const controlledState = unref(tableOptions.state);
+		const controlledAtoms = unref(tableOptions.atoms);
+		if (!controlledState) return [];
+		const controlledValues = [];
+		for (const key of Object.keys(table.initialState)) {
+			if (!(key in controlledState) || (controlledAtoms === null || controlledAtoms === void 0 ? void 0 : controlledAtoms[key]) !== void 0) continue;
+			controlledValues.push(controlledState[key]);
+		}
+		return controlledValues;
+	}, (controlledValues) => {
+		if (controlledValues.length > 0) syncTableOptions(table, mergedOptions);
 	}, { immediate: true });
-	table.Subscribe = function Subscribe(props) {
-		const selected = useStore(table.store, props.selector);
+	table.Subscribe = ((props) => {
+		const selected = useSelector(props.atom !== void 0 ? props.atom : table.store, props.atom !== void 0 ? props.selector ?? ((x) => x) : props.selector, { compare: shallow });
 		if (typeof props.children === "function") return props.children(selected.value);
 		return props.children;
-	};
-	const stateStore = useStore(table.store, selector);
+	});
+	const stateStore = useSelector(table.store, selector);
 	return {
 		...table,
 		get state() {

package/dist/useTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"useTable.js","names":[],"sources":["../src/useTable.ts"],"sourcesContent":["import { isRef, ref, unref, watch, watchEffect } from 'vue'\nimport {\n  constructReactivityFeature,\n  constructTable,\n} from '@tanstack/table-core'\nimport { useStore } from '@tanstack/vue-store'\nimport { mergeProxy } from './merge-proxy'\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 TableOptionsWithReactiveData<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n> = Omit<TableOptions<TFeatures, TData>, 'data'> & {\n  data: MaybeRef<ReadonlyArray<TData>>\n}\n\nfunction getOptionsWithReactiveData<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n>(options: TableOptionsWithReactiveData<TFeatures, TData>) {\n  return mergeProxy(options, {\n    data: unref(options.data),\n  })\n}\n\nexport type VueTable<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TSelected = {},\n> = Table<TFeatures, TData> & {\n  /**\n   * A Vue component that allows you to subscribe to the table state.\n   *\n   * This is useful for opting into state subscriptions for specific parts of the table state.\n   *\n   * @example\n   * <table.Subscribe selector={(state) => ({ rowSelection: state.rowSelection })}>\n   *   {(state) => (\n   *     <tr>\n   *       // render the row\n   *     </tr>\n   *   )}\n   * </table.Subscribe>\n   */\n  Subscribe: <TSelected>(props: {\n    selector: (state: NoInfer<TableState<TFeatures>>) => TSelected\n    children:\n      | ((state: Readonly<TSelected>) => VNode | Array<VNode>)\n      | VNode\n      | Array<VNode>\n  }) => VNode | Array<VNode>\n  /**\n   * The selected state of the table. This state may not match the structure of `table.store.state` because it is selected by the `selector` function that 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\nexport function useTable<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TSelected = {},\n>(\n  tableOptions: TableOptionsWithReactiveData<TFeatures, TData>,\n  selector: (state: TableState<TFeatures>) => TSelected = () =>\n    ({}) as TSelected,\n): VueTable<TFeatures, TData, TSelected> {\n  const notifier = ref<number>(0)\n\n  const vueReactivityFeature = constructReactivityFeature({\n    stateNotifier: () => notifier.value,\n    optionsNotifier: () => notifier.value,\n  })\n\n  const IS_REACTIVE = isRef(tableOptions.data)\n\n  const mergedOptions = {\n    ...tableOptions,\n    _features: {\n      ...tableOptions._features,\n      vueReactivityFeature,\n    },\n  }\n\n  const resolvedOptions = mergeProxy(\n    IS_REACTIVE\n      ? getOptionsWithReactiveData(\n          mergedOptions as TableOptions<TFeatures, TData>,\n        )\n      : 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 mergeProxy(defaultOptions, newOptions)\n      },\n    },\n  ) as TableOptions<TFeatures, TData>\n\n  const table = constructTable(resolvedOptions) as VueTable<\n    TFeatures,\n    TData,\n    TSelected\n  >\n\n  const allState = useStore(table.store, (state) => state)\n  const allOptions = useStore(table.optionsStore, (state) => state)\n\n  watchEffect(() => {\n    allState.value\n    allOptions.value\n    notifier.value++\n  })\n\n  watch(\n    () =>\n      [\n        IS_REACTIVE ? unref(tableOptions.data) : tableOptions.data,\n        tableOptions,\n      ] as const,\n    () => {\n      table.setOptions((prev) => {\n        return mergeProxy(\n          prev,\n          IS_REACTIVE\n            ? getOptionsWithReactiveData(\n                tableOptions as TableOptions<TFeatures, TData>,\n              )\n            : tableOptions,\n        ) as TableOptions<TFeatures, TData>\n      })\n    },\n    { immediate: true },\n  )\n\n  table.Subscribe = function Subscribe<TSelected>(props: {\n    selector: (state: TableState<TFeatures>) => TSelected\n    children:\n      | ((state: Readonly<TSelected>) => VNode | Array<VNode>)\n      | VNode\n      | Array<VNode>\n  }): VNode | Array<VNode> {\n    const selected = useStore(table.store, props.selector)\n    if (typeof props.children === 'function') {\n      return props.children(selected.value)\n    }\n    return props.children\n  }\n\n  const stateStore = useStore(table.store, selector)\n\n  return {\n    ...table,\n    get state() {\n      return stateStore.value\n    },\n  } as VueTable<TFeatures, TData, TSelected>\n}\n"],"mappings":";;;;;;AAwBA,SAAS,2BAGP,SAAyD;AACzD,QAAO,WAAW,SAAS,EACzB,MAAM,MAAM,QAAQ,KAAK,EAC1B,CAAC;;AAwCJ,SAAgB,SAKd,cACA,kBACG,EAAE,GACkC;CACvC,MAAM,WAAW,IAAY,EAAE;CAE/B,MAAM,uBAAuB,2BAA2B;EACtD,qBAAqB,SAAS;EAC9B,uBAAuB,SAAS;EACjC,CAAC;CAEF,MAAM,cAAc,MAAM,aAAa,KAAK;CAE5C,MAAM,gBAAgB;EACpB,GAAG;EACH,WAAW;GACT,GAAG,aAAa;GAChB;GACD;EACF;CAmBD,MAAM,QAAQ,eAjBU,WACtB,cACI,2BACE,cACD,GACD,eACJ,EAEE,eACE,gBACA,eACG;AACH,SAAO,WAAW,gBAAgB,WAAW;IAEhD,CACF,CAE4C;CAM7C,MAAM,WAAW,SAAS,MAAM,QAAQ,UAAU,MAAM;CACxD,MAAM,aAAa,SAAS,MAAM,eAAe,UAAU,MAAM;AAEjE,mBAAkB;AAChB,WAAS;AACT,aAAW;AACX,WAAS;GACT;AAEF,aAEI,CACE,cAAc,MAAM,aAAa,KAAK,GAAG,aAAa,MACtD,aACD,QACG;AACJ,QAAM,YAAY,SAAS;AACzB,UAAO,WACL,MACA,cACI,2BACE,aACD,GACD,aACL;IACD;IAEJ,EAAE,WAAW,MAAM,CACpB;AAED,OAAM,YAAY,SAAS,UAAqB,OAMvB;EACvB,MAAM,WAAW,SAAS,MAAM,OAAO,MAAM,SAAS;AACtD,MAAI,OAAO,MAAM,aAAa,WAC5B,QAAO,MAAM,SAAS,SAAS,MAAM;AAEvC,SAAO,MAAM;;CAGf,MAAM,aAAa,SAAS,MAAM,OAAO,SAAS;AAElD,QAAO;EACL,GAAG;EACH,IAAI,QAAQ;AACV,UAAO,WAAW;;EAErB"}
+{"version":3,"file":"useTable.js","names":[],"sources":["../src/useTable.ts"],"sourcesContent":["import { isRef, ref, unref, watch, watchEffect } from 'vue'\nimport {\n  constructReactivityFeature,\n  constructTable,\n} from '@tanstack/table-core'\nimport { shallow, useSelector } from '@tanstack/vue-store'\nimport { mergeProxy } from './merge-proxy'\nimport type { Atom, ReadonlyAtom } 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 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 = {},\n> = Table<TFeatures, TData> & {\n  /**\n   * Store mode: `selector` required. Atom mode: pass `atom`; omit `selector` for the\n   * whole slice (identity), or pass `selector` to project. Split overloads so atom-only\n   * infers `TAtomValue` for `children` (see React `Subscribe`).\n   */\n  Subscribe: {\n    <TAtomValue>(props: {\n      atom: Atom<TAtomValue> | ReadonlyAtom<TAtomValue>\n      selector?: undefined\n      children:\n        | ((state: Readonly<TAtomValue>) => VNode | Array<VNode>)\n        | VNode\n        | Array<VNode>\n    }): VNode | Array<VNode>\n    <TAtomValue, TSubSelected>(props: {\n      atom: Atom<TAtomValue> | ReadonlyAtom<TAtomValue>\n      selector: (state: TAtomValue) => 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 `table.store.state` because it is selected by the `selector` function that 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\nexport function useTable<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TSelected = {},\n>(\n  tableOptions:\n    | TableOptions<TFeatures, TData>\n    | TableOptionsWithReactiveData<TFeatures, TData>,\n  selector: (state: TableState<TFeatures>) => TSelected = () =>\n    ({}) as TSelected,\n): VueTable<TFeatures, TData, TSelected> {\n  const notifier = ref<number>(0)\n\n  const syncTableOptions = (\n    table: Table<TFeatures, TData>,\n    options: TableOptionsWithReactiveData<TFeatures, TData>,\n  ) => {\n    table.setOptions(\n      () =>\n        getOptionsWithReactiveValues(options) as TableOptions<TFeatures, TData>,\n    )\n  }\n\n  const vueReactivityFeature = constructReactivityFeature({\n    stateNotifier: () => notifier.value,\n    optionsNotifier: () => notifier.value,\n  })\n\n  const mergedOptions = {\n    ...tableOptions,\n    _features: {\n      ...tableOptions._features,\n      vueReactivityFeature,\n    },\n  }\n\n  const resolvedOptions = mergeProxy(\n    getOptionsWithReactiveValues(\n      mergedOptions as TableOptionsWithReactiveData<TFeatures, TData>,\n    ),\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 mergeProxy(defaultOptions, newOptions)\n      },\n    },\n  ) as TableOptions<TFeatures, TData>\n\n  const table = constructTable(resolvedOptions) as VueTable<\n    TFeatures,\n    TData,\n    TSelected\n  >\n\n  const allState = useSelector(table.store, (state) => state)\n  const allOptions = useSelector(table.optionsStore, (state) => state)\n\n  watchEffect(() => {\n    allState.value\n    allOptions.value\n    notifier.value++\n  })\n\n  watch(\n    () =>\n      getReactiveOptionDeps(\n        mergedOptions as TableOptionsWithReactiveData<TFeatures, TData>,\n      ),\n    () => {\n      syncTableOptions(\n        table,\n        mergedOptions as TableOptionsWithReactiveData<TFeatures, TData>,\n      )\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(\n          table,\n          mergedOptions as TableOptionsWithReactiveData<TFeatures, TData>,\n        )\n      }\n    },\n    { immediate: true },\n  )\n\n  table.Subscribe = ((props: {\n    atom?: Atom<unknown> | ReadonlyAtom<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.atom !== undefined ? props.atom : table.store\n    const selectFn =\n      props.atom !== undefined\n        ? (props.selector ?? ((x: unknown) => x))\n        : props.selector\n    const selected = useSelector(source as never, selectFn 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  } as VueTable<TFeatures, TData, TSelected>\n}\n"],"mappings":";;;;;;AA2BA,SAAS,6BAGP,SAAyD;CACzD,MAAM,kBAA2C,EAAE;AAEnD,MAAK,MAAM,OAAO,OAAO,KAAK,QAAQ,CACpC,iBAAgB,OAAO,MACrB,QAAQ,KACT;AAGH,QAAO,WAAW,SAAS,gBAAgB;;AAG7C,SAAS,sBAGP,SAAyD;AACzD,QAAO,OAAO,KAAK,QAAQ,CAAC,KAAK,QAC/B,MAAM,QAAQ,KAA6D,CAC5E;;AAiDH,SAAgB,SAKd,cAGA,kBACG,EAAE,GACkC;CACvC,MAAM,WAAW,IAAY,EAAE;CAE/B,MAAM,oBACJ,OACA,YACG;AACH,QAAM,iBAEF,6BAA6B,QAAQ,CACxC;;CAGH,MAAM,uBAAuB,2BAA2B;EACtD,qBAAqB,SAAS;EAC9B,uBAAuB,SAAS;EACjC,CAAC;CAEF,MAAM,gBAAgB;EACpB,GAAG;EACH,WAAW;GACT,GAAG,aAAa;GAChB;GACD;EACF;CAiBD,MAAM,QAAQ,eAfU,WACtB,6BACE,cACD,EACD,EAEE,eACE,gBACA,eACG;AACH,SAAO,WAAW,gBAAgB,WAAW;IAEhD,CACF,CAE4C;CAM7C,MAAM,WAAW,YAAY,MAAM,QAAQ,UAAU,MAAM;CAC3D,MAAM,aAAa,YAAY,MAAM,eAAe,UAAU,MAAM;AAEpE,mBAAkB;AAChB,WAAS;AACT,aAAW;AACX,WAAS;GACT;AAEF,aAEI,sBACE,cACD,QACG;AACJ,mBACE,OACA,cACD;IAEH,EAAE,WAAW,MAAM,CACpB;AAED,aACQ;EACJ,MAAM,kBAAkB,MAAM,aAAa,MAAM;EAGjD,MAAM,kBAAkB,MAAM,aAAa,MAAM;AAIjD,MAAI,CAAC,gBACH,QAAO,EAAE;EAGX,MAAM,mBAAmC,EAAE;AAE3C,OAAK,MAAM,OAAO,OAAO,KAAK,MAAM,aAAa,EAAE;AACjD,OAAI,EAAE,OAAO,uFAAoB,gBAAkB,UAAS,OAC1D;AAKF,oBAAiB,KAAK,gBAAgB,KAAK;;AAG7C,SAAO;KAER,qBAAqB;AACpB,MAAI,iBAAiB,SAAS,EAC5B,kBACE,OACA,cACD;IAGL,EAAE,WAAW,MAAM,CACpB;AAED,OAAM,cAAc,UAOd;EAMJ,MAAM,WAAW,YALF,MAAM,SAAS,SAAY,MAAM,OAAO,MAAM,OAE3D,MAAM,SAAS,SACV,MAAM,cAAc,MAAe,KACpC,MAAM,UACqD,EAC/D,SAAS,SACV,CAAC;AACF,MAAI,OAAO,MAAM,aAAa,WAC5B,QAAO,MAAM,SAAS,SAAS,MAA2B;AAE5D,SAAO,MAAM;;CAGf,MAAM,aAAa,YAAY,MAAM,OAAO,SAAS;AAErD,QAAO;EACL,GAAG;EACH,IAAI,QAAQ;AACV,UAAO,WAAW;;EAErB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/vue-table",
-  "version": "9.0.0-alpha.32",
+  "version": "9.0.0-alpha.34",
   "description": "Headless UI for building powerful tables & datagrids for Vue.",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -29,6 +29,10 @@
       "import": "./dist/index.js",
       "require": "./dist/index.cjs"
     },
+    "./static-functions": {
+      "import": "./dist/static-functions.js",
+      "require": "./dist/static-functions.cjs"
+    },
     "./package.json": "./package.json"
   },
   "sideEffects": false,
@@ -40,11 +44,11 @@
     "src"
   ],
   "dependencies": {
-    "@tanstack/vue-store": "^0.9.3",
-    "@tanstack/table-core": "9.0.0-alpha.32"
+    "@tanstack/vue-store": "^0.11.0",
+    "@tanstack/table-core": "9.0.0-alpha.34"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^6.0.5",
+    "@vitejs/plugin-vue": "^6.0.6",
     "eslint-plugin-vue": "^10.8.0",
     "vue": "^3.5.32"
   },

package/src/createTableHook.ts

@@ -1,5 +1,5 @@
 import { createColumnHelper as coreCreateColumnHelper } from '@tanstack/table-core'
-import { useStore } from '@tanstack/vue-store'
+import { useSelector } from '@tanstack/vue-store'
 import { defineComponent, h, inject, provide } from 'vue'
 import { FlexRender } from './FlexRender'
 import { mergeProxy } from './merge-proxy'
@@ -424,7 +424,7 @@ export function createTableHook<
       setup(props, { slots }) {
         provide(TableContext, table)
         const selected = props.selector
-          ? useStore(table.store, props.selector)
+          ? useSelector(table.store, props.selector)
           : undefined
 
         return () => {
@@ -455,7 +455,7 @@ export function createTableHook<
         provide(CellContext, cell)
 
         const selected = props.selector
-          ? useStore(table.store, props.selector)
+          ? useSelector(table.store, props.selector)
           : undefined
 
         const extendedCell = Object.assign(cell, {
@@ -492,7 +492,7 @@ export function createTableHook<
         provide(HeaderContext, header)
 
         const selected = props.selector
-          ? useStore(table.store, props.selector)
+          ? useSelector(table.store, props.selector)
           : undefined
 
         const extendedHeader = Object.assign(header, {
@@ -529,7 +529,7 @@ export function createTableHook<
         provide(HeaderContext, header)
 
         const selected = props.selector
-          ? useStore(table.store, props.selector)
+          ? useSelector(table.store, props.selector)
           : undefined
 
         const extendedHeader = Object.assign(header, {

package/src/merge-proxy.ts

@@ -3,15 +3,18 @@ function trueFn() {
 }
 
 const $PROXY = Symbol('merge-proxy')
+const $SOURCES = Symbol('merge-proxy-sources')
 
 // https://github.com/solidjs/solid/blob/c20ca4fd8c36bc0522fedb2c7f38a110b7ee2663/packages/solid/src/render/component.ts#L51-L118
 const propTraps: ProxyHandler<{
   get: (k: string | number | symbol) => any
   has: (k: string | number | symbol) => boolean
   keys: () => Array<string>
+  sources: Array<any>
 }> = {
   get(_, property, receiver) {
     if (property === $PROXY) return receiver
+    if (property === $SOURCES) return _.sources
     return _.get(property)
   },
   has(_, property) {
@@ -55,23 +58,37 @@ function resolveSource(s: any) {
 
 export function mergeProxy<T extends Array<any>>(...sources: T): MergeProxy<T>
 export function mergeProxy(...sources: any): any {
+  const flattenedSources = sources.flatMap((source: any) => {
+    if (
+      typeof source === 'object' &&
+      source !== null &&
+      $SOURCES in source &&
+      Array.isArray(source[$SOURCES])
+    ) {
+      return source[$SOURCES]
+    }
+
+    return [source]
+  })
+
   return new Proxy(
     {
+      sources: flattenedSources,
       get(property: string | number | symbol) {
-        for (let i = sources.length - 1; i >= 0; i--) {
-          const v = resolveSource(sources[i])[property]
+        for (let i = flattenedSources.length - 1; i >= 0; i--) {
+          const v = resolveSource(flattenedSources[i])[property]
           if (v !== undefined) return v
         }
       },
       has(property: string | number | symbol) {
-        for (let i = sources.length - 1; i >= 0; i--) {
-          if (property in resolveSource(sources[i])) return true
+        for (let i = flattenedSources.length - 1; i >= 0; i--) {
+          if (property in resolveSource(flattenedSources[i])) return true
         }
         return false
       },
       keys() {
         const keys = []
-        for (const source of sources)
+        for (const source of flattenedSources)
           keys.push(...Object.keys(resolveSource(source)))
         return [...Array.from(new Set(keys))]
       },

package/src/static-functions.ts

@@ -0,0 +1 @@
+export * from '@tanstack/table-core/static-functions'

package/src/useTable.ts

@@ -3,8 +3,9 @@ import {
   constructReactivityFeature,
   constructTable,
 } from '@tanstack/table-core'
-import { useStore } from '@tanstack/vue-store'
+import { shallow, useSelector } from '@tanstack/vue-store'
 import { mergeProxy } from './merge-proxy'
+import type { Atom, ReadonlyAtom } from '@tanstack/vue-store'
 import type {
   NoInfer,
   RowData,
@@ -18,17 +19,34 @@ import type { MaybeRef, VNode } from 'vue'
 export type TableOptionsWithReactiveData<
   TFeatures extends TableFeatures,
   TData extends RowData,
-> = Omit<TableOptions<TFeatures, TData>, 'data'> & {
-  data: MaybeRef<ReadonlyArray<TData>>
+> = {
+  [K in keyof TableOptions<TFeatures, TData>]: K extends 'data'
+    ? MaybeRef<ReadonlyArray<TData>>
+    : MaybeRef<TableOptions<TFeatures, TData>[K]>
 }
 
-function getOptionsWithReactiveData<
+function getOptionsWithReactiveValues<
   TFeatures extends TableFeatures,
   TData extends RowData,
 >(options: TableOptionsWithReactiveData<TFeatures, TData>) {
-  return mergeProxy(options, {
-    data: unref(options.data),
-  })
+  const resolvedOptions: Record<string, unknown> = {}
+
+  for (const key of Object.keys(options)) {
+    resolvedOptions[key] = unref(
+      options[key as keyof TableOptionsWithReactiveData<TFeatures, TData>],
+    )
+  }
+
+  return mergeProxy(options, resolvedOptions)
+}
+
+function getReactiveOptionDeps<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+>(options: TableOptionsWithReactiveData<TFeatures, TData>) {
+  return Object.keys(options).map((key) =>
+    unref(options[key as keyof TableOptionsWithReactiveData<TFeatures, TData>]),
+  )
 }
 
 export type VueTable<
@@ -37,26 +55,35 @@ export type VueTable<
   TSelected = {},
 > = Table<TFeatures, TData> & {
   /**
-   * A Vue component that allows you to subscribe to the table state.
-   *
-   * This is useful for opting into state subscriptions for specific parts of the table state.
-   *
-   * @example
-   * <table.Subscribe selector={(state) => ({ rowSelection: state.rowSelection })}>
-   *   {(state) => (
-   *     <tr>
-   *       // render the row
-   *     </tr>
-   *   )}
-   * </table.Subscribe>
+   * Store mode: `selector` required. Atom mode: pass `atom`; omit `selector` for the
+   * whole slice (identity), or pass `selector` to project. Split overloads so atom-only
+   * infers `TAtomValue` for `children` (see React `Subscribe`).
    */
-  Subscribe: <TSelected>(props: {
-    selector: (state: NoInfer<TableState<TFeatures>>) => TSelected
-    children:
-      | ((state: Readonly<TSelected>) => VNode | Array<VNode>)
-      | VNode
-      | Array<VNode>
-  }) => VNode | Array<VNode>
+  Subscribe: {
+    <TAtomValue>(props: {
+      atom: Atom<TAtomValue> | ReadonlyAtom<TAtomValue>
+      selector?: undefined
+      children:
+        | ((state: Readonly<TAtomValue>) => VNode | Array<VNode>)
+        | VNode
+        | Array<VNode>
+    }): VNode | Array<VNode>
+    <TAtomValue, TSubSelected>(props: {
+      atom: Atom<TAtomValue> | ReadonlyAtom<TAtomValue>
+      selector: (state: TAtomValue) => 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 `table.store.state` because it is selected by the `selector` function that you pass as the 2nd argument to `useTable`.
    *
@@ -73,19 +100,29 @@ export function useTable<
   TData extends RowData,
   TSelected = {},
 >(
-  tableOptions: TableOptionsWithReactiveData<TFeatures, TData>,
+  tableOptions:
+    | TableOptions<TFeatures, TData>
+    | TableOptionsWithReactiveData<TFeatures, TData>,
   selector: (state: TableState<TFeatures>) => TSelected = () =>
     ({}) as TSelected,
 ): VueTable<TFeatures, TData, TSelected> {
   const notifier = ref<number>(0)
 
+  const syncTableOptions = (
+    table: Table<TFeatures, TData>,
+    options: TableOptionsWithReactiveData<TFeatures, TData>,
+  ) => {
+    table.setOptions(
+      () =>
+        getOptionsWithReactiveValues(options) as TableOptions<TFeatures, TData>,
+    )
+  }
+
   const vueReactivityFeature = constructReactivityFeature({
     stateNotifier: () => notifier.value,
     optionsNotifier: () => notifier.value,
   })
 
-  const IS_REACTIVE = isRef(tableOptions.data)
-
   const mergedOptions = {
     ...tableOptions,
     _features: {
@@ -95,11 +132,9 @@ export function useTable<
   }
 
   const resolvedOptions = mergeProxy(
-    IS_REACTIVE
-      ? getOptionsWithReactiveData(
-          mergedOptions as TableOptions<TFeatures, TData>,
-        )
-      : mergedOptions,
+    getOptionsWithReactiveValues(
+      mergedOptions as TableOptionsWithReactiveData<TFeatures, TData>,
+    ),
     {
       // Remove state and onStateChange - store handles it internally
       mergeOptions: (
@@ -117,8 +152,8 @@ export function useTable<
     TSelected
   >
 
-  const allState = useStore(table.store, (state) => state)
-  const allOptions = useStore(table.optionsStore, (state) => state)
+  const allState = useSelector(table.store, (state) => state)
+  const allOptions = useSelector(table.optionsStore, (state) => state)
 
   watchEffect(() => {
     allState.value
@@ -128,40 +163,79 @@ export function useTable<
 
   watch(
     () =>
-      [
-        IS_REACTIVE ? unref(tableOptions.data) : tableOptions.data,
-        tableOptions,
-      ] as const,
+      getReactiveOptionDeps(
+        mergedOptions as TableOptionsWithReactiveData<TFeatures, TData>,
+      ),
     () => {
-      table.setOptions((prev) => {
-        return mergeProxy(
-          prev,
-          IS_REACTIVE
-            ? getOptionsWithReactiveData(
-                tableOptions as TableOptions<TFeatures, TData>,
-              )
-            : tableOptions,
-        ) as TableOptions<TFeatures, TData>
-      })
+      syncTableOptions(
+        table,
+        mergedOptions as TableOptionsWithReactiveData<TFeatures, TData>,
+      )
     },
     { immediate: true },
   )
 
-  table.Subscribe = function Subscribe<TSelected>(props: {
-    selector: (state: TableState<TFeatures>) => TSelected
+  watch(
+    () => {
+      const controlledState = unref(tableOptions.state) as
+        | Record<string, unknown>
+        | undefined
+      const controlledAtoms = unref(tableOptions.atoms) as
+        | Record<string, unknown>
+        | undefined
+
+      if (!controlledState) {
+        return []
+      }
+
+      const controlledValues: Array<unknown> = []
+
+      for (const key of Object.keys(table.initialState)) {
+        if (!(key in controlledState) || controlledAtoms?.[key] !== undefined) {
+          continue
+        }
+
+        // Reading only controlled state slices here lets Vue subscribe to
+        // getters/computed values that are passed through `options.state`.
+        controlledValues.push(controlledState[key])
+      }
+
+      return controlledValues
+    },
+    (controlledValues) => {
+      if (controlledValues.length > 0) {
+        syncTableOptions(
+          table,
+          mergedOptions as TableOptionsWithReactiveData<TFeatures, TData>,
+        )
+      }
+    },
+    { immediate: true },
+  )
+
+  table.Subscribe = ((props: {
+    atom?: Atom<unknown> | ReadonlyAtom<unknown>
+    selector?: ((state: unknown) => unknown) | undefined
     children:
-      | ((state: Readonly<TSelected>) => VNode | Array<VNode>)
+      | ((state: Readonly<unknown>) => VNode | Array<VNode>)
       | VNode
       | Array<VNode>
-  }): VNode | Array<VNode> {
-    const selected = useStore(table.store, props.selector)
+  }) => {
+    const source = props.atom !== undefined ? props.atom : table.store
+    const selectFn =
+      props.atom !== undefined
+        ? (props.selector ?? ((x: unknown) => x))
+        : props.selector
+    const selected = useSelector(source as never, selectFn as never, {
+      compare: shallow,
+    })
     if (typeof props.children === 'function') {
-      return props.children(selected.value)
+      return props.children(selected.value as Readonly<unknown>)
     }
     return props.children
-  }
+  }) as VueTable<TFeatures, TData, TSelected>['Subscribe']
 
-  const stateStore = useStore(table.store, selector)
+  const stateStore = useSelector(table.store, selector)
 
   return {
     ...table,