@tanstack/vue-table 9.0.0-alpha.10 → 9.0.0-alpha.26

package/dist/merge-proxy.js

@@ -0,0 +1,56 @@
+//#region src/merge-proxy.ts
+function trueFn() {
+	return true;
+}
+const $PROXY = Symbol("merge-proxy");
+const propTraps = {
+	get(_, property, receiver) {
+		if (property === $PROXY) return receiver;
+		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) {
+	return new Proxy({
+		get(property) {
+			for (let i = sources.length - 1; i >= 0; i--) {
+				const v = resolveSource(sources[i])[property];
+				if (v !== void 0) return v;
+			}
+		},
+		has(property) {
+			for (let i = sources.length - 1; i >= 0; i--) if (property in resolveSource(sources[i])) return true;
+			return false;
+		},
+		keys() {
+			const keys = [];
+			for (const source of sources) 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')\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}> = {\n  get(_, property, receiver) {\n    if (property === $PROXY) return receiver\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  return new Proxy(\n    {\n      get(property: string | number | symbol) {\n        for (let i = sources.length - 1; i >= 0; i--) {\n          const v = resolveSource(sources[i])[property]\n          if (v !== undefined) return v\n        }\n      },\n      has(property: string | number | symbol) {\n        for (let i = sources.length - 1; i >= 0; i--) {\n          if (property in resolveSource(sources[i])) return true\n        }\n        return false\n      },\n      keys() {\n        const keys = []\n        for (const source of sources)\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;AAGpC,MAAM,YAID;CACH,IAAI,GAAG,UAAU,UAAU;AACzB,MAAI,aAAa,OAAQ,QAAO;AAChC,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;AAC/C,QAAO,IAAI,MACT;EACE,IAAI,UAAoC;AACtC,QAAK,IAAI,IAAI,QAAQ,SAAS,GAAG,KAAK,GAAG,KAAK;IAC5C,MAAM,IAAI,cAAc,QAAQ,GAAG,CAAC;AACpC,QAAI,MAAM,OAAW,QAAO;;;EAGhC,IAAI,UAAoC;AACtC,QAAK,IAAI,IAAI,QAAQ,SAAS,GAAG,KAAK,GAAG,IACvC,KAAI,YAAY,cAAc,QAAQ,GAAG,CAAE,QAAO;AAEpD,UAAO;;EAET,OAAO;GACL,MAAM,OAAO,EAAE;AACf,QAAK,MAAM,UAAU,QACnB,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/useTable.cjs

@@ -0,0 +1,55 @@
+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 getOptionsWithReactiveData(options) {
+	return require_merge_proxy.mergeProxy(options, { data: (0, vue.unref)(options.data) });
+}
+function useTable(tableOptions, selector = () => ({})) {
+	const notifier = (0, vue.ref)(0);
+	const vueReactivityFeature = (0, _tanstack_table_core.constructReactivityFeature)({
+		stateNotifier: () => notifier.value,
+		optionsNotifier: () => notifier.value
+	});
+	const IS_REACTIVE = (0, vue.isRef)(tableOptions.data);
+	const mergedOptions = {
+		...tableOptions,
+		_features: {
+			...tableOptions._features,
+			vueReactivityFeature
+		}
+	};
+	const table = (0, _tanstack_table_core.constructTable)(require_merge_proxy.mergeProxy(IS_REACTIVE ? getOptionsWithReactiveData(mergedOptions) : mergedOptions, { mergeOptions: (defaultOptions, newOptions) => {
+		return require_merge_proxy.mergeProxy(defaultOptions, newOptions);
+	} }));
+	const allState = (0, _tanstack_vue_store.useStore)(table.store, (state) => state);
+	const allOptions = (0, _tanstack_vue_store.useStore)(table.optionsStore, (state) => state);
+	(0, vue.watchEffect)(() => {
+		allState.value;
+		allOptions.value;
+		notifier.value++;
+	});
+	(0, vue.watch)(() => [IS_REACTIVE ? (0, vue.unref)(tableOptions.data) : tableOptions.data, tableOptions], () => {
+		table.setOptions((prev) => {
+			return require_merge_proxy.mergeProxy(prev, IS_REACTIVE ? getOptionsWithReactiveData(tableOptions) : tableOptions);
+		});
+	}, { immediate: true });
+	table.Subscribe = function Subscribe(props) {
+		const selected = (0, _tanstack_vue_store.useStore)(table.store, props.selector);
+		if (typeof props.children === "function") return props.children(selected.value);
+		return props.children;
+	};
+	const stateStore = (0, _tanstack_vue_store.useStore)(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"],"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,QAAOA,+BAAW,SAAS,EACzB,qBAAY,QAAQ,KAAK,EAC1B,CAAC;;AAwCJ,SAAgB,SAKd,cACA,kBACG,EAAE,GACkC;CACvC,MAAM,wBAAuB,EAAE;CAE/B,MAAM,4EAAkD;EACtD,qBAAqB,SAAS;EAC9B,uBAAuB,SAAS;EACjC,CAAC;CAEF,MAAM,6BAAoB,aAAa,KAAK;CAE5C,MAAM,gBAAgB;EACpB,GAAG;EACH,WAAW;GACT,GAAG,aAAa;GAChB;GACD;EACF;CAmBD,MAAM,iDAjBkBA,+BACtB,cACI,2BACE,cACD,GACD,eACJ,EAEE,eACE,gBACA,eACG;AACH,SAAOA,+BAAW,gBAAgB,WAAW;IAEhD,CACF,CAE4C;CAM7C,MAAM,6CAAoB,MAAM,QAAQ,UAAU,MAAM;CACxD,MAAM,+CAAsB,MAAM,eAAe,UAAU,MAAM;AAEjE,4BAAkB;AAChB,WAAS;AACT,aAAW;AACX,WAAS;GACT;AAEF,sBAEI,CACE,6BAAoB,aAAa,KAAK,GAAG,aAAa,MACtD,aACD,QACG;AACJ,QAAM,YAAY,SAAS;AACzB,UAAOA,+BACL,MACA,cACI,2BACE,aACD,GACD,aACL;IACD;IAEJ,EAAE,WAAW,MAAM,CACpB;AAED,OAAM,YAAY,SAAS,UAAqB,OAMvB;EACvB,MAAM,6CAAoB,MAAM,OAAO,MAAM,SAAS;AACtD,MAAI,OAAO,MAAM,aAAa,WAC5B,QAAO,MAAM,SAAS,SAAS,MAAM;AAEvC,SAAO,MAAM;;CAGf,MAAM,+CAAsB,MAAM,OAAO,SAAS;AAElD,QAAO;EACL,GAAG;EACH,IAAI,QAAQ;AACV,UAAO,WAAW;;EAErB"}

package/dist/useTable.d.cts

@@ -0,0 +1,40 @@
+import { MaybeRef, VNode } from "vue";
+import { NoInfer, RowData, Table, TableFeatures, TableOptions, TableState } from "@tanstack/table-core";
+
+//#region src/useTable.d.ts
+type TableOptionsWithReactiveData<TFeatures extends TableFeatures, TData extends RowData> = Omit<TableOptions<TFeatures, TData>, 'data'> & {
+  data: MaybeRef<ReadonlyArray<TData>>;
+};
+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>
+   */
+  Subscribe: <TSelected>(props: {
+    selector: (state: NoInfer<TableState<TFeatures>>) => TSelected;
+    children: ((state: Readonly<TSelected>) => 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: 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,40 @@
+import { MaybeRef, VNode } from "vue";
+import { NoInfer, RowData, Table, TableFeatures, TableOptions, TableState } from "@tanstack/table-core";
+
+//#region src/useTable.d.ts
+type TableOptionsWithReactiveData<TFeatures extends TableFeatures, TData extends RowData> = Omit<TableOptions<TFeatures, TData>, 'data'> & {
+  data: MaybeRef<ReadonlyArray<TData>>;
+};
+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>
+   */
+  Subscribe: <TSelected>(props: {
+    selector: (state: NoInfer<TableState<TFeatures>>) => TSelected;
+    children: ((state: Readonly<TSelected>) => 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: 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,55 @@
+import { mergeProxy } from "./merge-proxy.js";
+import { isRef, ref, unref, watch, watchEffect } from "vue";
+import { constructReactivityFeature, constructTable } from "@tanstack/table-core";
+import { useStore } from "@tanstack/vue-store";
+
+//#region src/useTable.ts
+function getOptionsWithReactiveData(options) {
+	return mergeProxy(options, { data: unref(options.data) });
+}
+function useTable(tableOptions, selector = () => ({})) {
+	const notifier = ref(0);
+	const vueReactivityFeature = constructReactivityFeature({
+		stateNotifier: () => notifier.value,
+		optionsNotifier: () => notifier.value
+	});
+	const IS_REACTIVE = isRef(tableOptions.data);
+	const mergedOptions = {
+		...tableOptions,
+		_features: {
+			...tableOptions._features,
+			vueReactivityFeature
+		}
+	};
+	const table = constructTable(mergeProxy(IS_REACTIVE ? getOptionsWithReactiveData(mergedOptions) : mergedOptions, { mergeOptions: (defaultOptions, newOptions) => {
+		return mergeProxy(defaultOptions, newOptions);
+	} }));
+	const allState = useStore(table.store, (state) => state);
+	const allOptions = useStore(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);
+		});
+	}, { immediate: true });
+	table.Subscribe = function Subscribe(props) {
+		const selected = useStore(table.store, props.selector);
+		if (typeof props.children === "function") return props.children(selected.value);
+		return props.children;
+	};
+	const stateStore = useStore(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 { 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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/vue-table",
-  "version": "9.0.0-alpha.10",
+  "version": "9.0.0-alpha.26",
   "description": "Headless UI for building powerful tables & datagrids for Vue.",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -21,39 +21,41 @@
     "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"
     },
     "./package.json": "./package.json"
   },
   "sideEffects": false,
   "engines": {
-    "node": ">=12"
+    "node": ">=16"
   },
   "files": [
     "dist",
     "src"
   ],
   "dependencies": {
-    "@tanstack/table-core": "9.0.0-alpha.10"
+    "@tanstack/vue-store": "^0.9.3",
+    "@tanstack/table-core": "9.0.0-alpha.23"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^5.0.5",
-    "vue": "^3.4.31"
+    "@vitejs/plugin-vue": "^6.0.5",
+    "eslint-plugin-vue": "^10.8.0",
+    "vue": "^3.5.32"
   },
   "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,109 @@
+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) {
+        return flexRender(
+          props.cell.column.columnDef.cell,
+          props.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)
+    }
+  },
+})