@tanstack/vue-table 9.0.0-alpha.4 → 9.0.0-alpha.41

package/dist/merge-proxy.js

@@ -0,0 +1,63 @@
+//#region src/merge-proxy.ts
+function trueFn() {
+	return true;
+}
+const $PROXY = Symbol("merge-proxy");
+const $SOURCES = Symbol("merge-proxy-sources");
+const propTraps = {
+	get(_, property, receiver) {
+		if (property === $PROXY) return receiver;
+		if (property === $SOURCES) return _.sources;
+		return _.get(property);
+	},
+	has(_, property) {
+		return _.has(property);
+	},
+	set: trueFn,
+	deleteProperty: trueFn,
+	getOwnPropertyDescriptor(_, property) {
+		return {
+			configurable: true,
+			enumerable: true,
+			get() {
+				return _.get(property);
+			},
+			set: trueFn,
+			deleteProperty: trueFn
+		};
+	},
+	ownKeys(_) {
+		return _.keys();
+	}
+};
+function resolveSource(s) {
+	return "value" in s ? s.value : s;
+}
+function mergeProxy(...sources) {
+	const flattenedSources = sources.flatMap((source) => {
+		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) {
+			for (let i = flattenedSources.length - 1; i >= 0; i--) {
+				const v = resolveSource(flattenedSources[i])[property];
+				if (v !== void 0) return v;
+			}
+		},
+		has(property) {
+			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 flattenedSources) keys.push(...Object.keys(resolveSource(source)));
+			return [...Array.from(new Set(keys))];
+		}
+	}, propTraps);
+}
+
+//#endregion
+export { mergeProxy };
+//# sourceMappingURL=merge-proxy.js.map

package/dist/merge-proxy.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"merge-proxy.js","names":[],"sources":["../src/merge-proxy.ts"],"sourcesContent":["function trueFn() {\n  return true\n}\n\nconst $PROXY = Symbol('merge-proxy')\nconst $SOURCES = Symbol('merge-proxy-sources')\n\n// https://github.com/solidjs/solid/blob/c20ca4fd8c36bc0522fedb2c7f38a110b7ee2663/packages/solid/src/render/component.ts#L51-L118\nconst propTraps: ProxyHandler<{\n  get: (k: string | number | symbol) => any\n  has: (k: string | number | symbol) => boolean\n  keys: () => Array<string>\n  sources: Array<any>\n}> = {\n  get(_, property, receiver) {\n    if (property === $PROXY) return receiver\n    if (property === $SOURCES) return _.sources\n    return _.get(property)\n  },\n  has(_, property) {\n    return _.has(property)\n  },\n  set: trueFn,\n  deleteProperty: trueFn,\n  getOwnPropertyDescriptor(_, property) {\n    return {\n      configurable: true,\n      enumerable: true,\n      get() {\n        return _.get(property)\n      },\n      set: trueFn,\n      deleteProperty: trueFn,\n    }\n  },\n  ownKeys(_) {\n    return _.keys()\n  },\n}\n\ntype UnboxLazy<T> = T extends () => infer U ? U : T\ntype BoxedTupleTypes<T extends Array<any>> = {\n  [P in keyof T]: [UnboxLazy<T[P]>]\n}[Exclude<keyof T, keyof Array<any>>]\ntype UnionToIntersection<T> = (T extends any ? (k: T) => void : never) extends (\n  k: infer I,\n) => void\n  ? I\n  : never\ntype UnboxIntersection<T> = T extends { 0: infer U } ? U : never\ntype MergeProxy<T extends Array<any>> = UnboxIntersection<\n  UnionToIntersection<BoxedTupleTypes<T>>\n>\n\nfunction resolveSource(s: any) {\n  return 'value' in s ? s.value : s\n}\n\nexport function mergeProxy<T extends Array<any>>(...sources: T): MergeProxy<T>\nexport function mergeProxy(...sources: any): any {\n  const flattenedSources = sources.flatMap((source: any) => {\n    if (\n      typeof source === 'object' &&\n      source !== null &&\n      $SOURCES in source &&\n      Array.isArray(source[$SOURCES])\n    ) {\n      return source[$SOURCES]\n    }\n\n    return [source]\n  })\n\n  return new Proxy(\n    {\n      sources: flattenedSources,\n      get(property: string | number | symbol) {\n        for (let i = flattenedSources.length - 1; i >= 0; i--) {\n          const v = resolveSource(flattenedSources[i])[property]\n          if (v !== undefined) return v\n        }\n      },\n      has(property: string | number | symbol) {\n        for (let i = flattenedSources.length - 1; i >= 0; i--) {\n          if (property in resolveSource(flattenedSources[i])) return true\n        }\n        return false\n      },\n      keys() {\n        const keys = []\n        for (const source of flattenedSources)\n          keys.push(...Object.keys(resolveSource(source)))\n        return [...Array.from(new Set(keys))]\n      },\n    },\n    propTraps,\n  )\n}\n"],"mappings":";AAAA,SAAS,SAAS;AAChB,QAAO;;AAGT,MAAM,SAAS,OAAO,cAAc;AACpC,MAAM,WAAW,OAAO,sBAAsB;AAG9C,MAAM,YAKD;CACH,IAAI,GAAG,UAAU,UAAU;AACzB,MAAI,aAAa,OAAQ,QAAO;AAChC,MAAI,aAAa,SAAU,QAAO,EAAE;AACpC,SAAO,EAAE,IAAI,SAAS;;CAExB,IAAI,GAAG,UAAU;AACf,SAAO,EAAE,IAAI,SAAS;;CAExB,KAAK;CACL,gBAAgB;CAChB,yBAAyB,GAAG,UAAU;AACpC,SAAO;GACL,cAAc;GACd,YAAY;GACZ,MAAM;AACJ,WAAO,EAAE,IAAI,SAAS;;GAExB,KAAK;GACL,gBAAgB;GACjB;;CAEH,QAAQ,GAAG;AACT,SAAO,EAAE,MAAM;;CAElB;AAgBD,SAAS,cAAc,GAAQ;AAC7B,QAAO,WAAW,IAAI,EAAE,QAAQ;;AAIlC,SAAgB,WAAW,GAAG,SAAmB;CAC/C,MAAM,mBAAmB,QAAQ,SAAS,WAAgB;AACxD,MACE,OAAO,WAAW,YAClB,WAAW,QACX,YAAY,UACZ,MAAM,QAAQ,OAAO,UAAU,CAE/B,QAAO,OAAO;AAGhB,SAAO,CAAC,OAAO;GACf;AAEF,QAAO,IAAI,MACT;EACE,SAAS;EACT,IAAI,UAAoC;AACtC,QAAK,IAAI,IAAI,iBAAiB,SAAS,GAAG,KAAK,GAAG,KAAK;IACrD,MAAM,IAAI,cAAc,iBAAiB,GAAG,CAAC;AAC7C,QAAI,MAAM,OAAW,QAAO;;;EAGhC,IAAI,UAAoC;AACtC,QAAK,IAAI,IAAI,iBAAiB,SAAS,GAAG,KAAK,GAAG,IAChD,KAAI,YAAY,cAAc,iBAAiB,GAAG,CAAE,QAAO;AAE7D,UAAO;;EAET,OAAO;GACL,MAAM,OAAO,EAAE;AACf,QAAK,MAAM,UAAU,iBACnB,MAAK,KAAK,GAAG,OAAO,KAAK,cAAc,OAAO,CAAC,CAAC;AAClD,UAAO,CAAC,GAAG,MAAM,KAAK,IAAI,IAAI,KAAK,CAAC,CAAC;;EAExC,EACD,UACD"}

package/dist/static-functions.cjs

@@ -0,0 +1,9 @@
+
+
+var _tanstack_table_core_static_functions = require("@tanstack/table-core/static-functions");
+Object.keys(_tanstack_table_core_static_functions).forEach(function (k) {
+  if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+    enumerable: true,
+    get: function () { return _tanstack_table_core_static_functions[k]; }
+  });
+});

package/dist/static-functions.d.cts

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

package/dist/static-functions.d.ts

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

package/dist/static-functions.js

@@ -0,0 +1,3 @@
+export * from "@tanstack/table-core/static-functions"
+
+export {  };

package/dist/useTable.cjs

@@ -0,0 +1,73 @@
+const require_merge_proxy = require('./merge-proxy.cjs');
+let vue = require("vue");
+let _tanstack_table_core = require("@tanstack/table-core");
+let _tanstack_vue_store = require("@tanstack/vue-store");
+
+//#region src/useTable.ts
+function getOptionsWithReactiveValues(options) {
+	const resolvedOptions = {};
+	for (const key of Object.keys(options)) resolvedOptions[key] = (0, vue.unref)(options[key]);
+	return require_merge_proxy.mergeProxy(options, resolvedOptions);
+}
+function getReactiveOptionDeps(options) {
+	return Object.keys(options).map((key) => (0, vue.unref)(options[key]));
+}
+function useTable(tableOptions, selector = () => ({})) {
+	const notifier = (0, vue.ref)(0);
+	const syncTableOptions = (table, options) => {
+		table.setOptions(() => getOptionsWithReactiveValues(options));
+	};
+	const vueReactivityFeature = (0, _tanstack_table_core.constructReactivityFeature)({
+		stateNotifier: () => notifier.value,
+		optionsNotifier: () => notifier.value
+	});
+	const mergedOptions = {
+		...tableOptions,
+		_features: {
+			...tableOptions._features,
+			vueReactivityFeature
+		}
+	};
+	const table = (0, _tanstack_table_core.constructTable)(require_merge_proxy.mergeProxy(getOptionsWithReactiveValues(mergedOptions), { mergeOptions: (defaultOptions, newOptions) => {
+		return require_merge_proxy.mergeProxy(defaultOptions, newOptions);
+	} }));
+	const allState = (0, _tanstack_vue_store.useSelector)(table.store, (state) => state);
+	const allOptions = (0, _tanstack_vue_store.useSelector)(table.optionsStore, (state) => state);
+	(0, vue.watchEffect)(() => {
+		allState.value;
+		allOptions.value;
+		notifier.value++;
+	});
+	(0, vue.watch)(() => getReactiveOptionDeps(mergedOptions), () => {
+		syncTableOptions(table, mergedOptions);
+	}, { immediate: true });
+	(0, vue.watch)(() => {
+		const controlledState = (0, vue.unref)(tableOptions.state);
+		const controlledAtoms = (0, vue.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 = ((props) => {
+		const selected = (0, _tanstack_vue_store.useSelector)(props.source !== void 0 ? props.source : table.store, props.source !== void 0 ? props.selector ?? ((x) => x) : props.selector, { compare: _tanstack_vue_store.shallow });
+		if (typeof props.children === "function") return props.children(selected.value);
+		return props.children;
+	});
+	const stateStore = (0, _tanstack_vue_store.useSelector)(table.store, selector);
+	return {
+		...table,
+		get state() {
+			return stateStore.value;
+		}
+	};
+}
+
+//#endregion
+exports.useTable = useTable;
+//# sourceMappingURL=useTable.cjs.map

package/dist/useTable.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTable.cjs","names":["mergeProxy","shallow"],"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. 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: Atom<TSourceValue> | ReadonlyAtom<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: Atom<TSourceValue> | ReadonlyAtom<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 `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(table, 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(table, mergedOptions)\n      }\n    },\n    { immediate: true },\n  )\n\n  table.Subscribe = ((props: {\n    source?: 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.source !== undefined ? props.source : table.store\n    const selectFn =\n      props.source !== 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  }\n}\n"],"mappings":";;;;;;AA2BA,SAAS,6BAGP,SAAyD;CACzD,MAAM,kBAA2C,EAAE;AAEnD,MAAK,MAAM,OAAO,OAAO,KAAK,QAAQ,CACpC,iBAAgB,sBACd,QAAQ,KACT;AAGH,QAAOA,+BAAW,SAAS,gBAAgB;;AAG7C,SAAS,sBAGP,SAAyD;AACzD,QAAO,OAAO,KAAK,QAAQ,CAAC,KAAK,uBACzB,QAAQ,KAA6D,CAC5E;;AAiDH,SAAgB,SAKd,cAGA,kBACG,EAAE,GACkC;CACvC,MAAM,wBAAuB,EAAE;CAE/B,MAAM,oBACJ,OACA,YACG;AACH,QAAM,iBAEF,6BAA6B,QAAQ,CACxC;;CAGH,MAAM,4EAAkD;EACtD,qBAAqB,SAAS;EAC9B,uBAAuB,SAAS;EACjC,CAAC;CAEF,MAAM,gBAAgB;EACpB,GAAG;EACH,WAAW;GACT,GAAG,aAAa;GAChB;GACD;EACF;CAiBD,MAAM,iDAfkBA,+BACtB,6BACE,cACD,EACD,EAEE,eACE,gBACA,eACG;AACH,SAAOA,+BAAW,gBAAgB,WAAW;IAEhD,CAGyC,CAAC;CAM7C,MAAM,gDAAuB,MAAM,QAAQ,UAAU,MAAM;CAC3D,MAAM,kDAAyB,MAAM,eAAe,UAAU,MAAM;AAEpE,4BAAkB;AAChB,WAAS;AACT,aAAW;AACX,WAAS;GACT;AAEF,sBAEI,sBACE,cACD,QACG;AACJ,mBAAiB,OAAO,cAAc;IAExC,EAAE,WAAW,MAAM,CACpB;AAED,sBACQ;EACJ,MAAM,iCAAwB,aAAa,MAAM;EAGjD,MAAM,iCAAwB,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,kBAAiB,OAAO,cAAc;IAG1C,EAAE,WAAW,MAAM,CACpB;AAED,OAAM,cAAc,UAOd;EAMJ,MAAM,gDALS,MAAM,WAAW,SAAY,MAAM,SAAS,MAAM,OAE/D,MAAM,WAAW,SACZ,MAAM,cAAc,MAAe,KACpC,MAAM,UACqD,EAC/D,SAASC,6BACV,CAAC;AACF,MAAI,OAAO,MAAM,aAAa,WAC5B,QAAO,MAAM,SAAS,SAAS,MAA2B;AAE5D,SAAO,MAAM;;CAGf,MAAM,kDAAyB,MAAM,OAAO,SAAS;AAErD,QAAO;EACL,GAAG;EACH,IAAI,QAAQ;AACV,UAAO,WAAW;;EAErB"}

package/dist/useTable.d.cts

@@ -0,0 +1,42 @@
+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> = { [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> & {
+  /**
+   * 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: Atom<TSourceValue> | ReadonlyAtom<TSourceValue>;
+      selector?: undefined;
+      children: ((state: Readonly<TSourceValue>) => VNode | Array<VNode>) | VNode | Array<VNode>;
+    }): VNode | Array<VNode>;
+    <TSourceValue, TSubSelected>(props: {
+      source: Atom<TSourceValue> | ReadonlyAtom<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 `table.store.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)
+   */
+  readonly state: Readonly<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

@@ -0,0 +1,42 @@
+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> = { [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> & {
+  /**
+   * 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: Atom<TSourceValue> | ReadonlyAtom<TSourceValue>;
+      selector?: undefined;
+      children: ((state: Readonly<TSourceValue>) => VNode | Array<VNode>) | VNode | Array<VNode>;
+    }): VNode | Array<VNode>;
+    <TSourceValue, TSubSelected>(props: {
+      source: Atom<TSourceValue> | ReadonlyAtom<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 `table.store.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)
+   */
+  readonly state: Readonly<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

@@ -0,0 +1,73 @@
+import { mergeProxy } from "./merge-proxy.js";
+import { ref, unref, watch, watchEffect } from "vue";
+import { constructReactivityFeature, constructTable } from "@tanstack/table-core";
+import { shallow, useSelector } from "@tanstack/vue-store";
+
+//#region src/useTable.ts
+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 mergedOptions = {
+		...tableOptions,
+		_features: {
+			...tableOptions._features,
+			vueReactivityFeature
+		}
+	};
+	const table = constructTable(mergeProxy(getOptionsWithReactiveValues(mergedOptions), { mergeOptions: (defaultOptions, newOptions) => {
+		return mergeProxy(defaultOptions, newOptions);
+	} }));
+	const allState = useSelector(table.store, (state) => state);
+	const allOptions = useSelector(table.optionsStore, (state) => state);
+	watchEffect(() => {
+		allState.value;
+		allOptions.value;
+		notifier.value++;
+	});
+	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 = ((props) => {
+		const selected = useSelector(props.source !== void 0 ? props.source : table.store, props.source !== 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 = useSelector(table.store, selector);
+	return {
+		...table,
+		get state() {
+			return stateStore.value;
+		}
+	};
+}
+
+//#endregion
+export { useTable };
+//# sourceMappingURL=useTable.js.map

package/dist/useTable.js.map

@@ -0,0 +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 { 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. 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: Atom<TSourceValue> | ReadonlyAtom<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: Atom<TSourceValue> | ReadonlyAtom<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 `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(table, 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(table, mergedOptions)\n      }\n    },\n    { immediate: true },\n  )\n\n  table.Subscribe = ((props: {\n    source?: 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.source !== undefined ? props.source : table.store\n    const selectFn =\n      props.source !== 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  }\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,CAGyC,CAAC;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,mBAAiB,OAAO,cAAc;IAExC,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,kBAAiB,OAAO,cAAc;IAG1C,EAAE,WAAW,MAAM,CACpB;AAED,OAAM,cAAc,UAOd;EAMJ,MAAM,WAAW,YALF,MAAM,WAAW,SAAY,MAAM,SAAS,MAAM,OAE/D,MAAM,WAAW,SACZ,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.4",
+  "version": "9.0.0-alpha.41",
   "description": "Headless UI for building powerful tables & datagrids for Vue.",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -21,39 +21,49 @@
     "datagrid"
   ],
   "type": "module",
-  "types": "dist/esm/index.d.ts",
-  "main": "dist/cjs/index.cjs",
-  "module": "dist/esm/index.js",
+  "types": "./dist/index.d.cts",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
   "exports": {
     ".": {
-      "import": {
-        "types": "./dist/esm/index.d.ts",
-        "default": "./dist/esm/index.js"
-      },
-      "require": {
-        "types": "./dist/cjs/index.d.cts",
-        "default": "./dist/cjs/index.cjs"
-      }
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./flex-render": {
+      "import": "./dist/flex-render.js",
+      "require": "./dist/flex-render.cjs"
+    },
+    "./static-functions": {
+      "import": "./dist/static-functions.js",
+      "require": "./dist/static-functions.cjs"
     },
     "./package.json": "./package.json"
   },
   "sideEffects": false,
   "engines": {
-    "node": ">=12"
+    "node": ">=16"
   },
   "files": [
     "dist",
     "src"
   ],
   "dependencies": {
-    "@tanstack/table-core": "9.0.0-alpha.4"
+    "@tanstack/vue-store": "^0.11.0",
+    "@tanstack/table-core": "9.0.0-alpha.41"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^5.0.4",
-    "vue": "^3.4.25"
+    "@vitejs/plugin-vue": "^6.0.6",
+    "eslint-plugin-vue": "^10.9.0",
+    "vue": "^3.5.33"
   },
   "peerDependencies": {
     "vue": ">=3.2"
   },
-  "scripts": {}
+  "scripts": {
+    "clean": "rimraf ./build && rimraf ./dist",
+    "test:eslint": "eslint ./src",
+    "test:types": "tsc",
+    "test:build": "publint --strict",
+    "build": "tsdown"
+  }
 }

package/src/FlexRender.ts

@@ -0,0 +1,123 @@
+import { defineComponent, h, isVNode } from 'vue'
+import type { PropType } from 'vue'
+import type {
+  Cell,
+  CellData,
+  Header,
+  RowData,
+  TableFeatures,
+} from '@tanstack/table-core'
+
+/**
+ * If rendering headers, cells, or footers with custom markup, use flexRender instead of `cell.getValue()` or `cell.renderValue()`.
+ * @example flexRender(cell.column.columnDef.cell, cell.getContext())
+ */
+export function flexRender(render: any, props: any): any {
+  if (typeof render === 'function') {
+    const rendered = render(props)
+
+    if (isVNode(rendered)) {
+      return rendered
+    }
+
+    if (typeof rendered === 'function' || typeof rendered === 'object') {
+      return h(rendered, props)
+    }
+
+    return rendered
+  }
+
+  if (typeof render === 'object') {
+    return h(render, props)
+  }
+
+  return render
+}
+
+/**
+ * Simplified component for rendering headers, cells, or footers.
+ *
+ * Supports both the new shorthand pattern and the legacy `:render`/`:props` pattern:
+ * @example
+ * ```vue
+ * <!-- New shorthand pattern -->
+ * <FlexRender :cell="cell" />
+ * <FlexRender :header="header" />
+ * <FlexRender :footer="header" />
+ *
+ * <!-- Legacy pattern (still supported) -->
+ * <FlexRender :render="cell.column.columnDef.cell" :props="cell.getContext()" />
+ * ```
+ */
+export const FlexRender = defineComponent({
+  props: {
+    render: {
+      type: [Function, Object, String] as PropType<any>,
+      default: undefined,
+    },
+    props: {
+      type: Object as PropType<any>,
+      default: undefined,
+    },
+    cell: {
+      type: Object as PropType<Cell<any, any, any>>,
+      default: undefined,
+    },
+    header: {
+      type: Object as PropType<Header<any, any, any>>,
+      default: undefined,
+    },
+    footer: {
+      type: Object as PropType<Header<any, any, any>>,
+      default: undefined,
+    },
+  },
+  setup: (props: {
+    render?: any
+    props?: any
+    cell?: Cell<any, any, any>
+    header?: Header<any, any, any>
+    footer?: Header<any, any, any>
+  }) => {
+    return () => {
+      // New shorthand pattern: extract render and props from cell/header/footer
+      if (props.cell) {
+        const cell = props.cell
+        const def = cell.column.columnDef
+        // When the column-grouping feature is registered, a cell can be in
+        // one of three special modes that should not render `columnDef.cell`
+        // directly:
+        //   - aggregated: render `columnDef.aggregatedCell` (falling back to
+        //     `columnDef.cell` if the column did not define one)
+        //   - placeholder: a duplicate value within a group — render nothing
+        //   - grouped: fall through to `columnDef.cell`; consumers that want
+        //     a custom group header typically branch on `cell.getIsGrouped()`
+        //     themselves first
+        if (cell.getIsAggregated?.()) {
+          return flexRender(def.aggregatedCell ?? def.cell, cell.getContext())
+        }
+        if (cell.getIsPlaceholder?.()) {
+          return null
+        }
+        return flexRender(def.cell, cell.getContext())
+      }
+
+      if (props.header) {
+        return flexRender(
+          props.header.column.columnDef.header,
+          props.header.getContext(),
+        )
+      }
+
+      if (props.footer) {
+        return flexRender(
+          props.footer.column.columnDef.footer,
+          props.footer.getContext(),
+        )
+      }
+
+      // Legacy pattern: use render and props directly
+      return flexRender(props.render, props.props)
+    }
+  },
+})