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

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.25",
   "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.31"
   },
   "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,28 @@
+import { defineComponent, h, isVNode } from 'vue'
+
+export const FlexRender = defineComponent({
+  props: ['render', 'props'],
+  setup: (props: { render: any; props: any }) => {
+    return () => {
+      if (typeof props.render === 'function') {
+        const rendered = props.render(props.props)
+
+        if (isVNode(rendered)) {
+          return rendered
+        }
+
+        if (typeof rendered === 'function' || typeof rendered === 'object') {
+          return h(rendered, props.props)
+        }
+
+        return rendered
+      }
+
+      if (typeof props.render === 'object') {
+        return h(props.render, props.props)
+      }
+
+      return props.render
+    }
+  },
+})