@tanstack/vue-table 9.0.0-beta.5 → 9.0.0-beta.51
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +2 -0
- package/dist/FlexRender.cjs +2 -3
- package/dist/FlexRender.cjs.map +1 -1
- package/dist/FlexRender.js +2 -3
- package/dist/FlexRender.js.map +1 -1
- package/dist/createTableHook.cjs +4 -9
- package/dist/createTableHook.cjs.map +1 -1
- package/dist/createTableHook.d.cts +39 -12
- package/dist/createTableHook.d.ts +39 -12
- package/dist/createTableHook.js +4 -9
- package/dist/createTableHook.js.map +1 -1
- package/dist/experimental-worker-plugin.cjs +9 -0
- package/dist/experimental-worker-plugin.d.cts +1 -0
- package/dist/experimental-worker-plugin.d.ts +1 -0
- package/dist/experimental-worker-plugin.js +3 -0
- package/dist/index.d.cts +2 -2
- package/dist/index.d.ts +2 -2
- package/dist/reactivity.cjs +2 -6
- package/dist/reactivity.cjs.map +1 -1
- package/dist/reactivity.js +2 -6
- package/dist/reactivity.js.map +1 -1
- package/dist/useTable.cjs +3 -7
- package/dist/useTable.cjs.map +1 -1
- package/dist/useTable.d.cts +1 -8
- package/dist/useTable.d.ts +1 -8
- package/dist/useTable.js +3 -7
- package/dist/useTable.js.map +1 -1
- package/package.json +8 -4
- package/skills/create-table-hook/SKILL.md +146 -0
- package/skills/getting-started/SKILL.md +144 -0
- package/skills/migrate-v8-to-v9/SKILL.md +185 -0
- package/skills/table-state/SKILL.md +191 -0
- package/skills/with-tanstack-query/SKILL.md +127 -0
- package/skills/with-tanstack-virtual/SKILL.md +116 -0
- package/src/createTableHook.ts +108 -17
- package/src/experimental-worker-plugin.ts +1 -0
- package/src/reactivity.ts +1 -2
- package/src/useTable.ts +3 -11
- package/skills/vue/client-to-server/SKILL.md +0 -365
- package/skills/vue/compose-with-tanstack-form/SKILL.md +0 -369
- package/skills/vue/compose-with-tanstack-pacer/SKILL.md +0 -318
- package/skills/vue/compose-with-tanstack-query/SKILL.md +0 -385
- package/skills/vue/compose-with-tanstack-store/SKILL.md +0 -301
- package/skills/vue/compose-with-tanstack-virtual/SKILL.md +0 -340
- package/skills/vue/getting-started/SKILL.md +0 -409
- package/skills/vue/migrate-v8-to-v9/SKILL.md +0 -375
- package/skills/vue/production-readiness/SKILL.md +0 -271
- package/skills/vue/table-state/SKILL.md +0 -403
package/dist/reactivity.cjs
CHANGED
|
@@ -1,12 +1,8 @@
|
|
|
1
1
|
let vue = require("vue");
|
|
2
|
-
let _tanstack_store = require("@tanstack/store");
|
|
3
2
|
|
|
4
3
|
//#region src/reactivity.ts
|
|
5
4
|
function observerToCallback(observerOrNext) {
|
|
6
|
-
return typeof observerOrNext === "function" ? observerOrNext : (value) =>
|
|
7
|
-
var _observerOrNext$next;
|
|
8
|
-
return (_observerOrNext$next = observerOrNext.next) === null || _observerOrNext$next === void 0 ? void 0 : _observerOrNext$next.call(observerOrNext, value);
|
|
9
|
-
};
|
|
5
|
+
return typeof observerOrNext === "function" ? observerOrNext : (value) => observerOrNext.next?.(value);
|
|
10
6
|
}
|
|
11
7
|
function refToReadonlyAtom(source) {
|
|
12
8
|
return Object.assign(source, {
|
|
@@ -55,7 +51,7 @@ function vueReactivity() {
|
|
|
55
51
|
return refToWritableAtom((0, vue.shallowRef)(value));
|
|
56
52
|
},
|
|
57
53
|
untrack: (fn) => fn(),
|
|
58
|
-
batch:
|
|
54
|
+
batch: (fn) => fn()
|
|
59
55
|
};
|
|
60
56
|
}
|
|
61
57
|
|
package/dist/reactivity.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"reactivity.cjs","names":[],"sources":["../src/reactivity.ts"],"sourcesContent":["import { computed, shallowRef, watch } from 'vue'\nimport
|
|
1
|
+
{"version":3,"file":"reactivity.cjs","names":[],"sources":["../src/reactivity.ts"],"sourcesContent":["import { computed, shallowRef, watch } from 'vue'\nimport type {\n TableAtomOptions,\n TableReactivityBindings,\n} from '@tanstack/table-core/reactivity'\nimport type {\n Atom,\n Observer,\n ReadonlyAtom,\n Subscription,\n} from '@tanstack/store'\nimport type { ComputedRef, ShallowRef } from 'vue'\n\nfunction observerToCallback<T>(\n observerOrNext: Observer<T> | ((value: T) => void),\n): (value: T) => void {\n return typeof observerOrNext === 'function'\n ? observerOrNext\n : (value) => observerOrNext.next?.(value)\n}\n\nfunction refToReadonlyAtom<T>(\n source: ComputedRef<T> | ShallowRef<T>,\n): ReadonlyAtom<T> {\n return Object.assign(source, {\n get: () => source.value,\n subscribe: ((observerOrNext: Observer<T> | ((value: T) => void)) => {\n const stop = watch(source, observerToCallback(observerOrNext), {\n flush: 'sync',\n })\n return { unsubscribe: stop }\n }) as ReadonlyAtom<T>['subscribe'],\n })\n}\n\nfunction refToWritableAtom<T>(source: ShallowRef<T>): Atom<T> {\n return Object.assign(source, {\n set: (updater: T | ((prevVal: T) => T)) => {\n source.value =\n typeof updater === 'function'\n ? (updater as (prevVal: T) => T)(source.value)\n : updater\n },\n get: () => source.value,\n subscribe: ((observerOrNext: Observer<T> | ((value: T) => void)) => {\n const stop = watch(source, observerToCallback(observerOrNext), {\n flush: 'sync',\n })\n return { unsubscribe: stop }\n }) as Atom<T>['subscribe'],\n })\n}\n\n/**\n * Creates the table-core reactivity bindings used by the Vue adapter.\n *\n * Table state atoms are backed by TanStack Store atoms. The options store stays\n * framework-native because row-model APIs read `table.options` directly during\n * render. Readonly table atoms bridge Store dependency tracking into Vue computed\n * refs.\n */\nexport function vueReactivity(): TableReactivityBindings {\n const subscriptions = new Set<Subscription>()\n\n return {\n createOptionsStore: true,\n wrapExternalAtoms: true,\n addSubscription: (subscription) => {\n subscriptions.add(subscription)\n },\n unmount: () => {\n subscriptions.forEach((s) => s.unsubscribe())\n subscriptions.clear()\n },\n schedule: (fn) => queueMicrotask(() => fn()),\n createReadonlyAtom: <T>(fn: () => T, _options?: TableAtomOptions<T>) => {\n return refToReadonlyAtom(computed(() => fn()))\n },\n createWritableAtom: <T>(\n value: T,\n _options?: TableAtomOptions<T>,\n ): Atom<T> => {\n return refToWritableAtom(shallowRef(value) as ShallowRef<T>)\n },\n untrack: (fn) => fn(),\n batch: (fn) => fn(),\n }\n}\n"],"mappings":";;;AAaA,SAAS,mBACP,gBACoB;CACpB,OAAO,OAAO,mBAAmB,aAC7B,kBACC,UAAU,eAAe,OAAO,KAAK;AAC5C;AAEA,SAAS,kBACP,QACiB;CACjB,OAAO,OAAO,OAAO,QAAQ;EAC3B,WAAW,OAAO;EAClB,aAAa,mBAAuD;GAIlE,OAAO,EAAE,4BAHU,QAAQ,mBAAmB,cAAc,GAAG,EAC7D,OAAO,OACT,CACyB,EAAE;EAC7B;CACF,CAAC;AACH;AAEA,SAAS,kBAAqB,QAAgC;CAC5D,OAAO,OAAO,OAAO,QAAQ;EAC3B,MAAM,YAAqC;GACzC,OAAO,QACL,OAAO,YAAY,aACd,QAA8B,OAAO,KAAK,IAC3C;EACR;EACA,WAAW,OAAO;EAClB,aAAa,mBAAuD;GAIlE,OAAO,EAAE,4BAHU,QAAQ,mBAAmB,cAAc,GAAG,EAC7D,OAAO,OACT,CACyB,EAAE;EAC7B;CACF,CAAC;AACH;;;;;;;;;AAUA,SAAgB,gBAAyC;CACvD,MAAM,gCAAgB,IAAI,IAAkB;CAE5C,OAAO;EACL,oBAAoB;EACpB,mBAAmB;EACnB,kBAAkB,iBAAiB;GACjC,cAAc,IAAI,YAAY;EAChC;EACA,eAAe;GACb,cAAc,SAAS,MAAM,EAAE,YAAY,CAAC;GAC5C,cAAc,MAAM;EACtB;EACA,WAAW,OAAO,qBAAqB,GAAG,CAAC;EAC3C,qBAAwB,IAAa,aAAmC;GACtE,OAAO,0CAAiC,GAAG,CAAC,CAAC;EAC/C;EACA,qBACE,OACA,aACY;GACZ,OAAO,sCAA6B,KAAK,CAAkB;EAC7D;EACA,UAAU,OAAO,GAAG;EACpB,QAAQ,OAAO,GAAG;CACpB;AACF"}
|
package/dist/reactivity.js
CHANGED
|
@@ -1,12 +1,8 @@
|
|
|
1
1
|
import { computed, shallowRef, watch } from "vue";
|
|
2
|
-
import { batch } from "@tanstack/store";
|
|
3
2
|
|
|
4
3
|
//#region src/reactivity.ts
|
|
5
4
|
function observerToCallback(observerOrNext) {
|
|
6
|
-
return typeof observerOrNext === "function" ? observerOrNext : (value) =>
|
|
7
|
-
var _observerOrNext$next;
|
|
8
|
-
return (_observerOrNext$next = observerOrNext.next) === null || _observerOrNext$next === void 0 ? void 0 : _observerOrNext$next.call(observerOrNext, value);
|
|
9
|
-
};
|
|
5
|
+
return typeof observerOrNext === "function" ? observerOrNext : (value) => observerOrNext.next?.(value);
|
|
10
6
|
}
|
|
11
7
|
function refToReadonlyAtom(source) {
|
|
12
8
|
return Object.assign(source, {
|
|
@@ -55,7 +51,7 @@ function vueReactivity() {
|
|
|
55
51
|
return refToWritableAtom(shallowRef(value));
|
|
56
52
|
},
|
|
57
53
|
untrack: (fn) => fn(),
|
|
58
|
-
batch
|
|
54
|
+
batch: (fn) => fn()
|
|
59
55
|
};
|
|
60
56
|
}
|
|
61
57
|
|
package/dist/reactivity.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"reactivity.js","names":[],"sources":["../src/reactivity.ts"],"sourcesContent":["import { computed, shallowRef, watch } from 'vue'\nimport
|
|
1
|
+
{"version":3,"file":"reactivity.js","names":[],"sources":["../src/reactivity.ts"],"sourcesContent":["import { computed, shallowRef, watch } from 'vue'\nimport type {\n TableAtomOptions,\n TableReactivityBindings,\n} from '@tanstack/table-core/reactivity'\nimport type {\n Atom,\n Observer,\n ReadonlyAtom,\n Subscription,\n} from '@tanstack/store'\nimport type { ComputedRef, ShallowRef } from 'vue'\n\nfunction observerToCallback<T>(\n observerOrNext: Observer<T> | ((value: T) => void),\n): (value: T) => void {\n return typeof observerOrNext === 'function'\n ? observerOrNext\n : (value) => observerOrNext.next?.(value)\n}\n\nfunction refToReadonlyAtom<T>(\n source: ComputedRef<T> | ShallowRef<T>,\n): ReadonlyAtom<T> {\n return Object.assign(source, {\n get: () => source.value,\n subscribe: ((observerOrNext: Observer<T> | ((value: T) => void)) => {\n const stop = watch(source, observerToCallback(observerOrNext), {\n flush: 'sync',\n })\n return { unsubscribe: stop }\n }) as ReadonlyAtom<T>['subscribe'],\n })\n}\n\nfunction refToWritableAtom<T>(source: ShallowRef<T>): Atom<T> {\n return Object.assign(source, {\n set: (updater: T | ((prevVal: T) => T)) => {\n source.value =\n typeof updater === 'function'\n ? (updater as (prevVal: T) => T)(source.value)\n : updater\n },\n get: () => source.value,\n subscribe: ((observerOrNext: Observer<T> | ((value: T) => void)) => {\n const stop = watch(source, observerToCallback(observerOrNext), {\n flush: 'sync',\n })\n return { unsubscribe: stop }\n }) as Atom<T>['subscribe'],\n })\n}\n\n/**\n * Creates the table-core reactivity bindings used by the Vue adapter.\n *\n * Table state atoms are backed by TanStack Store atoms. The options store stays\n * framework-native because row-model APIs read `table.options` directly during\n * render. Readonly table atoms bridge Store dependency tracking into Vue computed\n * refs.\n */\nexport function vueReactivity(): TableReactivityBindings {\n const subscriptions = new Set<Subscription>()\n\n return {\n createOptionsStore: true,\n wrapExternalAtoms: true,\n addSubscription: (subscription) => {\n subscriptions.add(subscription)\n },\n unmount: () => {\n subscriptions.forEach((s) => s.unsubscribe())\n subscriptions.clear()\n },\n schedule: (fn) => queueMicrotask(() => fn()),\n createReadonlyAtom: <T>(fn: () => T, _options?: TableAtomOptions<T>) => {\n return refToReadonlyAtom(computed(() => fn()))\n },\n createWritableAtom: <T>(\n value: T,\n _options?: TableAtomOptions<T>,\n ): Atom<T> => {\n return refToWritableAtom(shallowRef(value) as ShallowRef<T>)\n },\n untrack: (fn) => fn(),\n batch: (fn) => fn(),\n }\n}\n"],"mappings":";;;AAaA,SAAS,mBACP,gBACoB;CACpB,OAAO,OAAO,mBAAmB,aAC7B,kBACC,UAAU,eAAe,OAAO,KAAK;AAC5C;AAEA,SAAS,kBACP,QACiB;CACjB,OAAO,OAAO,OAAO,QAAQ;EAC3B,WAAW,OAAO;EAClB,aAAa,mBAAuD;GAIlE,OAAO,EAAE,aAHI,MAAM,QAAQ,mBAAmB,cAAc,GAAG,EAC7D,OAAO,OACT,CACyB,EAAE;EAC7B;CACF,CAAC;AACH;AAEA,SAAS,kBAAqB,QAAgC;CAC5D,OAAO,OAAO,OAAO,QAAQ;EAC3B,MAAM,YAAqC;GACzC,OAAO,QACL,OAAO,YAAY,aACd,QAA8B,OAAO,KAAK,IAC3C;EACR;EACA,WAAW,OAAO;EAClB,aAAa,mBAAuD;GAIlE,OAAO,EAAE,aAHI,MAAM,QAAQ,mBAAmB,cAAc,GAAG,EAC7D,OAAO,OACT,CACyB,EAAE;EAC7B;CACF,CAAC;AACH;;;;;;;;;AAUA,SAAgB,gBAAyC;CACvD,MAAM,gCAAgB,IAAI,IAAkB;CAE5C,OAAO;EACL,oBAAoB;EACpB,mBAAmB;EACnB,kBAAkB,iBAAiB;GACjC,cAAc,IAAI,YAAY;EAChC;EACA,eAAe;GACb,cAAc,SAAS,MAAM,EAAE,YAAY,CAAC;GAC5C,cAAc,MAAM;EACtB;EACA,WAAW,OAAO,qBAAqB,GAAG,CAAC;EAC3C,qBAAwB,IAAa,aAAmC;GACtE,OAAO,kBAAkB,eAAe,GAAG,CAAC,CAAC;EAC/C;EACA,qBACE,OACA,aACY;GACZ,OAAO,kBAAkB,WAAW,KAAK,CAAkB;EAC7D;EACA,UAAU,OAAO,GAAG;EACpB,QAAQ,OAAO,GAAG;CACpB;AACF"}
|
package/dist/useTable.cjs
CHANGED
|
@@ -25,7 +25,6 @@ function getReactiveOptionDeps(options) {
|
|
|
25
25
|
* const table = useTable(
|
|
26
26
|
* {
|
|
27
27
|
* features,
|
|
28
|
-
* rowModels: {},
|
|
29
28
|
* columns,
|
|
30
29
|
* data,
|
|
31
30
|
* },
|
|
@@ -38,17 +37,14 @@ function useTable(tableOptions) {
|
|
|
38
37
|
};
|
|
39
38
|
const reactivity = require_reactivity.vueReactivity();
|
|
40
39
|
const mergedOptions = require_merge_proxy.mergeProxy(tableOptions, { features: {
|
|
41
|
-
|
|
40
|
+
coreReactivityFeature: reactivity,
|
|
42
41
|
...(0, vue.unref)(tableOptions.features) ?? {}
|
|
43
42
|
} });
|
|
44
43
|
const coreTable = (0, _tanstack_table_core.constructTable)(require_merge_proxy.mergeProxy(getOptionsWithReactiveValues(mergedOptions), { mergeOptions: (defaultOptions, newOptions) => {
|
|
45
44
|
return require_merge_proxy.flatMerge(defaultOptions, newOptions);
|
|
46
45
|
} }));
|
|
47
46
|
const table = coreTable;
|
|
48
|
-
if ((0, vue.getCurrentScope)()) (0, vue.onScopeDispose)(() =>
|
|
49
|
-
var _reactivity$unmount;
|
|
50
|
-
return (_reactivity$unmount = reactivity.unmount) === null || _reactivity$unmount === void 0 ? void 0 : _reactivity$unmount.call(reactivity);
|
|
51
|
-
});
|
|
47
|
+
if ((0, vue.getCurrentScope)()) (0, vue.onScopeDispose)(() => reactivity.unmount?.());
|
|
52
48
|
(0, vue.watch)(() => getReactiveOptionDeps(mergedOptions), () => {
|
|
53
49
|
syncTableOptions(coreTable, mergedOptions);
|
|
54
50
|
}, { immediate: true });
|
|
@@ -58,7 +54,7 @@ function useTable(tableOptions) {
|
|
|
58
54
|
if (!controlledState) return [];
|
|
59
55
|
const controlledValues = [];
|
|
60
56
|
for (const key of Object.keys(table.initialState)) {
|
|
61
|
-
if (!(key in controlledState) ||
|
|
57
|
+
if (!(key in controlledState) || controlledAtoms?.[key] !== void 0) continue;
|
|
62
58
|
controlledValues.push(controlledState[key]);
|
|
63
59
|
}
|
|
64
60
|
return controlledValues;
|
package/dist/useTable.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useTable.cjs","names":["mergeProxy","flatMerge","vueReactivity"],"sources":["../src/useTable.ts"],"sourcesContent":["import { getCurrentScope, onScopeDispose, unref, watch } from 'vue'\nimport { constructTable } from '@tanstack/table-core'\nimport { flatMerge, mergeProxy } from './merge-proxy'\nimport { vueReactivity } from './reactivity'\nimport type {\n RowData,\n Table,\n TableFeatures,\n TableOptions,\n
|
|
1
|
+
{"version":3,"file":"useTable.cjs","names":["mergeProxy","flatMerge","vueReactivity"],"sources":["../src/useTable.ts"],"sourcesContent":["import { getCurrentScope, onScopeDispose, unref, watch } from 'vue'\nimport { constructTable } from '@tanstack/table-core'\nimport { flatMerge, mergeProxy } from './merge-proxy'\nimport { vueReactivity } from './reactivity'\nimport type {\n RowData,\n Table,\n TableFeatures,\n TableOptions,\n} 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> = Table<TFeatures, TData> & {\n /** Creates a reactive render boundary. The child function reads the table\n * atoms it needs, so Vue only tracks those atom reads.\n */\n Subscribe: (props: {\n children: (atoms: Table<TFeatures, TData>['atoms']) => VNode | Array<VNode>\n }) => VNode | Array<VNode>\n}\n\n/**\n * Creates a Vue table instance backed by Vue-aware TanStack Store atoms.\n *\n * Table options may contain Vue refs or computed values. The adapter unwraps\n * those reactive inputs, watches them with synchronous flushing, and keeps the\n * table options in sync. Use `table.Subscribe` or native Vue computed values\n * around `table.atoms.<slice>.get()` for selected reactive reads.\n *\n * @example\n * ```ts\n * const table = useTable(\n * {\n * features,\n * columns,\n * data,\n * },\n * )\n * ```\n */\nexport function useTable<\n TFeatures extends TableFeatures,\n TData extends RowData,\n>(\n tableOptions:\n | TableOptions<TFeatures, TData>\n | TableOptionsWithReactiveData<TFeatures, TData>,\n): VueTable<TFeatures, TData> {\n const syncTableOptions = (\n table: Table<TFeatures, TData>,\n options: TableOptionsWithReactiveData<TFeatures, TData>,\n ) => {\n table.setOptions((prev) =>\n flatMerge(prev, getOptionsWithReactiveValues(options)),\n )\n }\n\n const reactivity = vueReactivity()\n\n const mergedOptions = mergeProxy(tableOptions, {\n features: {\n coreReactivityFeature: reactivity,\n ...(unref(tableOptions.features) ?? {}),\n },\n }) as TableOptionsWithReactiveData<TFeatures, TData>\n\n const resolvedOptions = mergeProxy(\n getOptionsWithReactiveValues(mergedOptions),\n {\n // Remove state and onStateChange - store handles it internally\n mergeOptions: (\n defaultOptions: TableOptions<TFeatures, TData>,\n newOptions: Partial<TableOptions<TFeatures, TData>>,\n ) => {\n return flatMerge(defaultOptions, newOptions)\n },\n },\n ) as TableOptions<TFeatures, TData>\n\n const coreTable = constructTable(resolvedOptions)\n const table = coreTable as unknown as VueTable<TFeatures, TData>\n\n if (getCurrentScope()) {\n onScopeDispose(() => reactivity.unmount?.())\n }\n\n watch(\n () => getReactiveOptionDeps(mergedOptions),\n () => {\n syncTableOptions(coreTable, mergedOptions)\n },\n { immediate: true },\n )\n\n watch(\n () => {\n const controlledState = unref(tableOptions.state) as\n | Record<string, unknown>\n | undefined\n const controlledAtoms = unref(tableOptions.atoms) as\n | Record<string, unknown>\n | undefined\n\n if (!controlledState) {\n return []\n }\n\n const controlledValues: Array<unknown> = []\n\n for (const key of Object.keys(table.initialState)) {\n if (!(key in controlledState) || controlledAtoms?.[key] !== undefined) {\n continue\n }\n\n // Reading only controlled state slices here lets Vue subscribe to\n // getters/computed values that are passed through `options.state`.\n controlledValues.push(controlledState[key])\n }\n\n return controlledValues\n },\n (controlledValues) => {\n if (controlledValues.length > 0) {\n syncTableOptions(coreTable, mergedOptions)\n }\n },\n { immediate: true },\n )\n\n table.Subscribe = (props: {\n children: (atoms: Table<TFeatures, TData>['atoms']) => VNode | Array<VNode>\n }) => {\n return props.children(table.atoms as Table<TFeatures, TData>['atoms'])\n }\n\n return table\n}\n"],"mappings":";;;;;;AAqBA,SAAS,6BAGP,SAAyD;CACzD,MAAM,kBAA2C,CAAC;CAElD,KAAK,MAAM,OAAO,OAAO,KAAK,OAAO,GACnC,gBAAgB,sBACd,QAAQ,IACV;CAGF,OAAOA,+BAAW,SAAS,eAAe;AAC5C;AAEA,SAAS,sBAGP,SAAyD;CACzD,OAAO,OAAO,KAAK,OAAO,CAAC,CAAC,KAAK,uBACzB,QAAQ,IAA4D,CAC5E;AACF;;;;;;;;;;;;;;;;;;;;AAiCA,SAAgB,SAId,cAG4B;CAC5B,MAAM,oBACJ,OACA,YACG;EACH,MAAM,YAAY,SAChBC,8BAAU,MAAM,6BAA6B,OAAO,CAAC,CACvD;CACF;CAEA,MAAM,aAAaC,iCAAc;CAEjC,MAAM,gBAAgBF,+BAAW,cAAc,EAC7C,UAAU;EACR,uBAAuB;EACvB,kBAAU,aAAa,QAAQ,KAAK,CAAC;CACvC,EACF,CAAC;CAeD,MAAM,qDAbkBA,+BACtB,6BAA6B,aAAa,GAC1C,EAEE,eACE,gBACA,eACG;EACH,OAAOC,8BAAU,gBAAgB,UAAU;CAC7C,EACF,CAG6C,CAAC;CAChD,MAAM,QAAQ;CAEd,6BAAoB,GAClB,8BAAqB,WAAW,UAAU,CAAC;CAG7C,qBACQ,sBAAsB,aAAa,SACnC;EACJ,iBAAiB,WAAW,aAAa;CAC3C,GACA,EAAE,WAAW,KAAK,CACpB;CAEA,qBACQ;EACJ,MAAM,iCAAwB,aAAa,KAAK;EAGhD,MAAM,iCAAwB,aAAa,KAAK;EAIhD,IAAI,CAAC,iBACH,OAAO,CAAC;EAGV,MAAM,mBAAmC,CAAC;EAE1C,KAAK,MAAM,OAAO,OAAO,KAAK,MAAM,YAAY,GAAG;GACjD,IAAI,EAAE,OAAO,oBAAoB,kBAAkB,SAAS,QAC1D;GAKF,iBAAiB,KAAK,gBAAgB,IAAI;EAC5C;EAEA,OAAO;CACT,IACC,qBAAqB;EACpB,IAAI,iBAAiB,SAAS,GAC5B,iBAAiB,WAAW,aAAa;CAE7C,GACA,EAAE,WAAW,KAAK,CACpB;CAEA,MAAM,aAAa,UAEb;EACJ,OAAO,MAAM,SAAS,MAAM,KAAyC;CACvE;CAEA,OAAO;AACT"}
|
package/dist/useTable.d.cts
CHANGED
|
@@ -3,13 +3,7 @@ import { MaybeRef, VNode } from "vue";
|
|
|
3
3
|
|
|
4
4
|
//#region src/useTable.d.ts
|
|
5
5
|
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]> };
|
|
6
|
-
type VueTable<TFeatures extends TableFeatures, TData extends RowData> =
|
|
7
|
-
/**
|
|
8
|
-
* @deprecated Prefer `table.atoms.<slice>.get()` for slice snapshots, or
|
|
9
|
-
* `table.Subscribe` for explicit subscriptions. `table.store.state` is a
|
|
10
|
-
* current-value snapshot and is easy to misuse in render code.
|
|
11
|
-
*/
|
|
12
|
-
readonly store: Table<TFeatures, TData>['store'];
|
|
6
|
+
type VueTable<TFeatures extends TableFeatures, TData extends RowData> = Table<TFeatures, TData> & {
|
|
13
7
|
/** Creates a reactive render boundary. The child function reads the table
|
|
14
8
|
* atoms it needs, so Vue only tracks those atom reads.
|
|
15
9
|
*/
|
|
@@ -30,7 +24,6 @@ type VueTable<TFeatures extends TableFeatures, TData extends RowData> = Omit<Tab
|
|
|
30
24
|
* const table = useTable(
|
|
31
25
|
* {
|
|
32
26
|
* features,
|
|
33
|
-
* rowModels: {},
|
|
34
27
|
* columns,
|
|
35
28
|
* data,
|
|
36
29
|
* },
|
package/dist/useTable.d.ts
CHANGED
|
@@ -3,13 +3,7 @@ import { RowData, Table, TableFeatures, TableOptions } from "@tanstack/table-cor
|
|
|
3
3
|
|
|
4
4
|
//#region src/useTable.d.ts
|
|
5
5
|
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]> };
|
|
6
|
-
type VueTable<TFeatures extends TableFeatures, TData extends RowData> =
|
|
7
|
-
/**
|
|
8
|
-
* @deprecated Prefer `table.atoms.<slice>.get()` for slice snapshots, or
|
|
9
|
-
* `table.Subscribe` for explicit subscriptions. `table.store.state` is a
|
|
10
|
-
* current-value snapshot and is easy to misuse in render code.
|
|
11
|
-
*/
|
|
12
|
-
readonly store: Table<TFeatures, TData>['store'];
|
|
6
|
+
type VueTable<TFeatures extends TableFeatures, TData extends RowData> = Table<TFeatures, TData> & {
|
|
13
7
|
/** Creates a reactive render boundary. The child function reads the table
|
|
14
8
|
* atoms it needs, so Vue only tracks those atom reads.
|
|
15
9
|
*/
|
|
@@ -30,7 +24,6 @@ type VueTable<TFeatures extends TableFeatures, TData extends RowData> = Omit<Tab
|
|
|
30
24
|
* const table = useTable(
|
|
31
25
|
* {
|
|
32
26
|
* features,
|
|
33
|
-
* rowModels: {},
|
|
34
27
|
* columns,
|
|
35
28
|
* data,
|
|
36
29
|
* },
|
package/dist/useTable.js
CHANGED
|
@@ -25,7 +25,6 @@ function getReactiveOptionDeps(options) {
|
|
|
25
25
|
* const table = useTable(
|
|
26
26
|
* {
|
|
27
27
|
* features,
|
|
28
|
-
* rowModels: {},
|
|
29
28
|
* columns,
|
|
30
29
|
* data,
|
|
31
30
|
* },
|
|
@@ -38,17 +37,14 @@ function useTable(tableOptions) {
|
|
|
38
37
|
};
|
|
39
38
|
const reactivity = vueReactivity();
|
|
40
39
|
const mergedOptions = mergeProxy(tableOptions, { features: {
|
|
41
|
-
|
|
40
|
+
coreReactivityFeature: reactivity,
|
|
42
41
|
...unref(tableOptions.features) ?? {}
|
|
43
42
|
} });
|
|
44
43
|
const coreTable = constructTable(mergeProxy(getOptionsWithReactiveValues(mergedOptions), { mergeOptions: (defaultOptions, newOptions) => {
|
|
45
44
|
return flatMerge(defaultOptions, newOptions);
|
|
46
45
|
} }));
|
|
47
46
|
const table = coreTable;
|
|
48
|
-
if (getCurrentScope()) onScopeDispose(() =>
|
|
49
|
-
var _reactivity$unmount;
|
|
50
|
-
return (_reactivity$unmount = reactivity.unmount) === null || _reactivity$unmount === void 0 ? void 0 : _reactivity$unmount.call(reactivity);
|
|
51
|
-
});
|
|
47
|
+
if (getCurrentScope()) onScopeDispose(() => reactivity.unmount?.());
|
|
52
48
|
watch(() => getReactiveOptionDeps(mergedOptions), () => {
|
|
53
49
|
syncTableOptions(coreTable, mergedOptions);
|
|
54
50
|
}, { immediate: true });
|
|
@@ -58,7 +54,7 @@ function useTable(tableOptions) {
|
|
|
58
54
|
if (!controlledState) return [];
|
|
59
55
|
const controlledValues = [];
|
|
60
56
|
for (const key of Object.keys(table.initialState)) {
|
|
61
|
-
if (!(key in controlledState) ||
|
|
57
|
+
if (!(key in controlledState) || controlledAtoms?.[key] !== void 0) continue;
|
|
62
58
|
controlledValues.push(controlledState[key]);
|
|
63
59
|
}
|
|
64
60
|
return controlledValues;
|
package/dist/useTable.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useTable.js","names":[],"sources":["../src/useTable.ts"],"sourcesContent":["import { getCurrentScope, onScopeDispose, unref, watch } from 'vue'\nimport { constructTable } from '@tanstack/table-core'\nimport { flatMerge, mergeProxy } from './merge-proxy'\nimport { vueReactivity } from './reactivity'\nimport type {\n RowData,\n Table,\n TableFeatures,\n TableOptions,\n
|
|
1
|
+
{"version":3,"file":"useTable.js","names":[],"sources":["../src/useTable.ts"],"sourcesContent":["import { getCurrentScope, onScopeDispose, unref, watch } from 'vue'\nimport { constructTable } from '@tanstack/table-core'\nimport { flatMerge, mergeProxy } from './merge-proxy'\nimport { vueReactivity } from './reactivity'\nimport type {\n RowData,\n Table,\n TableFeatures,\n TableOptions,\n} 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> = Table<TFeatures, TData> & {\n /** Creates a reactive render boundary. The child function reads the table\n * atoms it needs, so Vue only tracks those atom reads.\n */\n Subscribe: (props: {\n children: (atoms: Table<TFeatures, TData>['atoms']) => VNode | Array<VNode>\n }) => VNode | Array<VNode>\n}\n\n/**\n * Creates a Vue table instance backed by Vue-aware TanStack Store atoms.\n *\n * Table options may contain Vue refs or computed values. The adapter unwraps\n * those reactive inputs, watches them with synchronous flushing, and keeps the\n * table options in sync. Use `table.Subscribe` or native Vue computed values\n * around `table.atoms.<slice>.get()` for selected reactive reads.\n *\n * @example\n * ```ts\n * const table = useTable(\n * {\n * features,\n * columns,\n * data,\n * },\n * )\n * ```\n */\nexport function useTable<\n TFeatures extends TableFeatures,\n TData extends RowData,\n>(\n tableOptions:\n | TableOptions<TFeatures, TData>\n | TableOptionsWithReactiveData<TFeatures, TData>,\n): VueTable<TFeatures, TData> {\n const syncTableOptions = (\n table: Table<TFeatures, TData>,\n options: TableOptionsWithReactiveData<TFeatures, TData>,\n ) => {\n table.setOptions((prev) =>\n flatMerge(prev, getOptionsWithReactiveValues(options)),\n )\n }\n\n const reactivity = vueReactivity()\n\n const mergedOptions = mergeProxy(tableOptions, {\n features: {\n coreReactivityFeature: reactivity,\n ...(unref(tableOptions.features) ?? {}),\n },\n }) as TableOptionsWithReactiveData<TFeatures, TData>\n\n const resolvedOptions = mergeProxy(\n getOptionsWithReactiveValues(mergedOptions),\n {\n // Remove state and onStateChange - store handles it internally\n mergeOptions: (\n defaultOptions: TableOptions<TFeatures, TData>,\n newOptions: Partial<TableOptions<TFeatures, TData>>,\n ) => {\n return flatMerge(defaultOptions, newOptions)\n },\n },\n ) as TableOptions<TFeatures, TData>\n\n const coreTable = constructTable(resolvedOptions)\n const table = coreTable as unknown as VueTable<TFeatures, TData>\n\n if (getCurrentScope()) {\n onScopeDispose(() => reactivity.unmount?.())\n }\n\n watch(\n () => getReactiveOptionDeps(mergedOptions),\n () => {\n syncTableOptions(coreTable, mergedOptions)\n },\n { immediate: true },\n )\n\n watch(\n () => {\n const controlledState = unref(tableOptions.state) as\n | Record<string, unknown>\n | undefined\n const controlledAtoms = unref(tableOptions.atoms) as\n | Record<string, unknown>\n | undefined\n\n if (!controlledState) {\n return []\n }\n\n const controlledValues: Array<unknown> = []\n\n for (const key of Object.keys(table.initialState)) {\n if (!(key in controlledState) || controlledAtoms?.[key] !== undefined) {\n continue\n }\n\n // Reading only controlled state slices here lets Vue subscribe to\n // getters/computed values that are passed through `options.state`.\n controlledValues.push(controlledState[key])\n }\n\n return controlledValues\n },\n (controlledValues) => {\n if (controlledValues.length > 0) {\n syncTableOptions(coreTable, mergedOptions)\n }\n },\n { immediate: true },\n )\n\n table.Subscribe = (props: {\n children: (atoms: Table<TFeatures, TData>['atoms']) => VNode | Array<VNode>\n }) => {\n return props.children(table.atoms as Table<TFeatures, TData>['atoms'])\n }\n\n return table\n}\n"],"mappings":";;;;;;AAqBA,SAAS,6BAGP,SAAyD;CACzD,MAAM,kBAA2C,CAAC;CAElD,KAAK,MAAM,OAAO,OAAO,KAAK,OAAO,GACnC,gBAAgB,OAAO,MACrB,QAAQ,IACV;CAGF,OAAO,WAAW,SAAS,eAAe;AAC5C;AAEA,SAAS,sBAGP,SAAyD;CACzD,OAAO,OAAO,KAAK,OAAO,CAAC,CAAC,KAAK,QAC/B,MAAM,QAAQ,IAA4D,CAC5E;AACF;;;;;;;;;;;;;;;;;;;;AAiCA,SAAgB,SAId,cAG4B;CAC5B,MAAM,oBACJ,OACA,YACG;EACH,MAAM,YAAY,SAChB,UAAU,MAAM,6BAA6B,OAAO,CAAC,CACvD;CACF;CAEA,MAAM,aAAa,cAAc;CAEjC,MAAM,gBAAgB,WAAW,cAAc,EAC7C,UAAU;EACR,uBAAuB;EACvB,GAAI,MAAM,aAAa,QAAQ,KAAK,CAAC;CACvC,EACF,CAAC;CAeD,MAAM,YAAY,eAbM,WACtB,6BAA6B,aAAa,GAC1C,EAEE,eACE,gBACA,eACG;EACH,OAAO,UAAU,gBAAgB,UAAU;CAC7C,EACF,CAG6C,CAAC;CAChD,MAAM,QAAQ;CAEd,IAAI,gBAAgB,GAClB,qBAAqB,WAAW,UAAU,CAAC;CAG7C,YACQ,sBAAsB,aAAa,SACnC;EACJ,iBAAiB,WAAW,aAAa;CAC3C,GACA,EAAE,WAAW,KAAK,CACpB;CAEA,YACQ;EACJ,MAAM,kBAAkB,MAAM,aAAa,KAAK;EAGhD,MAAM,kBAAkB,MAAM,aAAa,KAAK;EAIhD,IAAI,CAAC,iBACH,OAAO,CAAC;EAGV,MAAM,mBAAmC,CAAC;EAE1C,KAAK,MAAM,OAAO,OAAO,KAAK,MAAM,YAAY,GAAG;GACjD,IAAI,EAAE,OAAO,oBAAoB,kBAAkB,SAAS,QAC1D;GAKF,iBAAiB,KAAK,gBAAgB,IAAI;EAC5C;EAEA,OAAO;CACT,IACC,qBAAqB;EACpB,IAAI,iBAAiB,SAAS,GAC5B,iBAAiB,WAAW,aAAa;CAE7C,GACA,EAAE,WAAW,KAAK,CACpB;CAEA,MAAM,aAAa,UAEb;EACJ,OAAO,MAAM,SAAS,MAAM,KAAyC;CACvE;CAEA,OAAO;AACT"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tanstack/vue-table",
|
|
3
|
-
"version": "9.0.0-beta.
|
|
3
|
+
"version": "9.0.0-beta.51",
|
|
4
4
|
"description": "Headless UI for building powerful tables & datagrids for Vue.",
|
|
5
5
|
"author": "Tanner Linsley",
|
|
6
6
|
"license": "MIT",
|
|
@@ -30,6 +30,10 @@
|
|
|
30
30
|
"import": "./dist/index.js",
|
|
31
31
|
"require": "./dist/index.cjs"
|
|
32
32
|
},
|
|
33
|
+
"./experimental-worker-plugin": {
|
|
34
|
+
"import": "./dist/experimental-worker-plugin.js",
|
|
35
|
+
"require": "./dist/experimental-worker-plugin.cjs"
|
|
36
|
+
},
|
|
33
37
|
"./flex-render": {
|
|
34
38
|
"import": "./dist/flex-render.js",
|
|
35
39
|
"require": "./dist/flex-render.cjs"
|
|
@@ -42,7 +46,7 @@
|
|
|
42
46
|
},
|
|
43
47
|
"sideEffects": false,
|
|
44
48
|
"engines": {
|
|
45
|
-
"node": ">=
|
|
49
|
+
"node": ">=20"
|
|
46
50
|
},
|
|
47
51
|
"files": [
|
|
48
52
|
"dist",
|
|
@@ -51,12 +55,12 @@
|
|
|
51
55
|
],
|
|
52
56
|
"dependencies": {
|
|
53
57
|
"@tanstack/store": "^0.11.0",
|
|
54
|
-
"@tanstack/table-core": "
|
|
58
|
+
"@tanstack/table-core": "9.0.0-beta.51"
|
|
55
59
|
},
|
|
56
60
|
"devDependencies": {
|
|
57
61
|
"@vitejs/plugin-vue": "^6.0.7",
|
|
58
62
|
"eslint-plugin-vue": "^10.9.2",
|
|
59
|
-
"vue": "^3.5.
|
|
63
|
+
"vue": "^3.5.38"
|
|
60
64
|
},
|
|
61
65
|
"peerDependencies": {
|
|
62
66
|
"vue": ">=3.2"
|
|
@@ -0,0 +1,146 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: create-table-hook
|
|
3
|
+
description: >
|
|
4
|
+
Create a reusable Vue useAppTable/createAppColumnHelper with shared features/defaults, reactive per-table options, optional component registries, dynamic App wrappers, typed context hooks, and explicit types that break circular inference.
|
|
5
|
+
metadata:
|
|
6
|
+
type: framework
|
|
7
|
+
library: '@tanstack/vue-table'
|
|
8
|
+
framework: vue
|
|
9
|
+
library_version: '9.0.0-beta.51'
|
|
10
|
+
requires:
|
|
11
|
+
- '@tanstack/table-core#core'
|
|
12
|
+
- getting-started
|
|
13
|
+
- table-state
|
|
14
|
+
sources:
|
|
15
|
+
- 'TanStack/table:docs/framework/vue/guide/composable-tables.md'
|
|
16
|
+
- 'TanStack/table:examples/vue/composable-tables'
|
|
17
|
+
- 'TanStack/table:packages/vue-table/src/createTableHook.ts'
|
|
18
|
+
---
|
|
19
|
+
|
|
20
|
+
This skill builds on `@tanstack/table-core#core`, `getting-started`, and `table-state`. Use it for recurring app conventions; use `useTable` for a one-off.
|
|
21
|
+
|
|
22
|
+
## Setup
|
|
23
|
+
|
|
24
|
+
```ts
|
|
25
|
+
import {
|
|
26
|
+
createTableHook,
|
|
27
|
+
rowSortingFeature,
|
|
28
|
+
tableFeatures,
|
|
29
|
+
} from '@tanstack/vue-table'
|
|
30
|
+
import type { RowData, VueTable } from '@tanstack/vue-table'
|
|
31
|
+
|
|
32
|
+
const features = tableFeatures({ rowSortingFeature })
|
|
33
|
+
const hook = createTableHook({ features })
|
|
34
|
+
export const useAppTable = hook.useAppTable
|
|
35
|
+
export const createAppColumnHelper = hook.createAppColumnHelper
|
|
36
|
+
export const useTableContext: <TData extends RowData = RowData>() => VueTable<
|
|
37
|
+
typeof features,
|
|
38
|
+
TData
|
|
39
|
+
> = hook.useTableContext
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
The explicit exported context-hook types are important when registered components import the hook module that also imports those components.
|
|
43
|
+
|
|
44
|
+
## Core Patterns
|
|
45
|
+
|
|
46
|
+
### Keep per-table values reactive
|
|
47
|
+
|
|
48
|
+
```ts
|
|
49
|
+
const helper = createAppColumnHelper<Person>()
|
|
50
|
+
const columns = helper.columns([helper.accessor('name', { header: 'Name' })])
|
|
51
|
+
const table = useAppTable({ columns, data })
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
Pass refs/computed options through unchanged.
|
|
55
|
+
|
|
56
|
+
### Wrap registered component context
|
|
57
|
+
|
|
58
|
+
Render through `table.AppTable`, `table.AppCell`, or `table.AppHeader`; inside registered components call the corresponding typed context hook instead of prop drilling.
|
|
59
|
+
|
|
60
|
+
## Common Mistakes
|
|
61
|
+
|
|
62
|
+
### HIGH Creating circular inferred exports
|
|
63
|
+
|
|
64
|
+
Wrong:
|
|
65
|
+
|
|
66
|
+
```ts
|
|
67
|
+
export const { useAppTable, useTableContext } = createTableHook({
|
|
68
|
+
tableComponents: { Pager },
|
|
69
|
+
})
|
|
70
|
+
```
|
|
71
|
+
|
|
72
|
+
Correct:
|
|
73
|
+
|
|
74
|
+
```ts
|
|
75
|
+
const hook = createTableHook({ tableComponents: { Pager } })
|
|
76
|
+
export const useTableContext: <TData extends RowData = RowData>() => VueTable<
|
|
77
|
+
typeof features,
|
|
78
|
+
TData
|
|
79
|
+
> = hook.useTableContext
|
|
80
|
+
```
|
|
81
|
+
|
|
82
|
+
When `Pager` imports `useTableContext`, inferred destructured exports can form a circular inference/import chain.
|
|
83
|
+
|
|
84
|
+
Source: `docs/framework/vue/guide/composable-tables.md`
|
|
85
|
+
|
|
86
|
+
### HIGH Flattening reactive table options
|
|
87
|
+
|
|
88
|
+
Wrong:
|
|
89
|
+
|
|
90
|
+
```ts
|
|
91
|
+
useAppTable({ columns, data: data.value })
|
|
92
|
+
```
|
|
93
|
+
|
|
94
|
+
Correct:
|
|
95
|
+
|
|
96
|
+
```ts
|
|
97
|
+
useAppTable({ columns, data })
|
|
98
|
+
```
|
|
99
|
+
|
|
100
|
+
The app hook preserves the adapter’s `MaybeRef` option contract.
|
|
101
|
+
|
|
102
|
+
Source: `packages/vue-table/src/createTableHook.ts`
|
|
103
|
+
|
|
104
|
+
### HIGH Using context without App wrappers
|
|
105
|
+
|
|
106
|
+
Wrong:
|
|
107
|
+
|
|
108
|
+
```ts
|
|
109
|
+
const table = useTableContext()
|
|
110
|
+
```
|
|
111
|
+
|
|
112
|
+
Correct:
|
|
113
|
+
|
|
114
|
+
```vue
|
|
115
|
+
<component :is="table.AppTable"><Pager /></component>
|
|
116
|
+
```
|
|
117
|
+
|
|
118
|
+
The typed context exists only below the corresponding dynamic wrapper.
|
|
119
|
+
|
|
120
|
+
Source: `packages/vue-table/src/createTableHook.ts`
|
|
121
|
+
|
|
122
|
+
### MEDIUM Treating Subscribe children as slots
|
|
123
|
+
|
|
124
|
+
Wrong:
|
|
125
|
+
|
|
126
|
+
```tsx
|
|
127
|
+
<table.Subscribe>
|
|
128
|
+
{(atoms) => <Pager page={atoms.pagination.get()} />}
|
|
129
|
+
</table.Subscribe>
|
|
130
|
+
```
|
|
131
|
+
|
|
132
|
+
Correct:
|
|
133
|
+
|
|
134
|
+
```tsx
|
|
135
|
+
<table.Subscribe
|
|
136
|
+
children={(atoms) => <Pager page={atoms.pagination.get()} />}
|
|
137
|
+
/>
|
|
138
|
+
```
|
|
139
|
+
|
|
140
|
+
Vue’s adapter expects an explicit `children` prop in JSX.
|
|
141
|
+
|
|
142
|
+
Source: `packages/vue-table/src/useTable.ts`
|
|
143
|
+
|
|
144
|
+
## API Discovery
|
|
145
|
+
|
|
146
|
+
Inspect `node_modules/@tanstack/vue-table/src/createTableHook.ts` for the returned helpers, wrapper props, registry types, and context contracts.
|
|
@@ -0,0 +1,144 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: getting-started
|
|
3
|
+
description: >
|
|
4
|
+
Create a Vue TanStack Table v9 table with useTable, explicit tableFeatures, stable columns/features, reactive ref or computed data, and Vue FlexRender without destructuring reactive snapshots.
|
|
5
|
+
metadata:
|
|
6
|
+
type: framework
|
|
7
|
+
library: '@tanstack/vue-table'
|
|
8
|
+
framework: vue
|
|
9
|
+
library_version: '9.0.0-beta.51'
|
|
10
|
+
requires:
|
|
11
|
+
- '@tanstack/table-core#core'
|
|
12
|
+
- '@tanstack/table-core#table-features'
|
|
13
|
+
sources:
|
|
14
|
+
- 'TanStack/table:docs/framework/vue/guide/migrating.md'
|
|
15
|
+
- 'TanStack/table:examples/vue/basic-use-table'
|
|
16
|
+
- 'TanStack/table:packages/vue-table/src/index.ts'
|
|
17
|
+
---
|
|
18
|
+
|
|
19
|
+
This skill builds on `@tanstack/table-core#core` and `@tanstack/table-core#table-features`. Read them first for the headless model and explicit feature registration.
|
|
20
|
+
|
|
21
|
+
## Setup
|
|
22
|
+
|
|
23
|
+
```vue
|
|
24
|
+
<script setup lang="ts">
|
|
25
|
+
import { ref } from 'vue'
|
|
26
|
+
import { FlexRender, tableFeatures, useTable } from '@tanstack/vue-table'
|
|
27
|
+
|
|
28
|
+
type Person = { name: string; age: number }
|
|
29
|
+
const features = tableFeatures({})
|
|
30
|
+
const columns = [
|
|
31
|
+
{ accessorKey: 'name', header: 'Name' },
|
|
32
|
+
{ accessorKey: 'age', header: 'Age' },
|
|
33
|
+
]
|
|
34
|
+
const data = ref<Person[]>([{ name: 'Ada', age: 36 }])
|
|
35
|
+
const table = useTable({ features, columns, data })
|
|
36
|
+
</script>
|
|
37
|
+
|
|
38
|
+
<template>
|
|
39
|
+
<table>
|
|
40
|
+
<thead>
|
|
41
|
+
<tr v-for="group in table.getHeaderGroups()" :key="group.id">
|
|
42
|
+
<th v-for="header in group.headers" :key="header.id">
|
|
43
|
+
<FlexRender v-if="!header.isPlaceholder" :header="header" />
|
|
44
|
+
</th>
|
|
45
|
+
</tr>
|
|
46
|
+
</thead>
|
|
47
|
+
<tbody>
|
|
48
|
+
<tr v-for="row in table.getRowModel().rows" :key="row.id">
|
|
49
|
+
<td v-for="cell in row.getAllCells()" :key="cell.id">
|
|
50
|
+
<FlexRender :cell="cell" />
|
|
51
|
+
</td>
|
|
52
|
+
</tr>
|
|
53
|
+
</tbody>
|
|
54
|
+
</table>
|
|
55
|
+
</template>
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
## Core Patterns
|
|
59
|
+
|
|
60
|
+
### Preserve Vue option shapes
|
|
61
|
+
|
|
62
|
+
`useTable` accepts refs/computed values and unwraps them while watching dependencies. Keep `data`, controlled state, and other reactive options as refs or computed values; keep static columns/features stable.
|
|
63
|
+
|
|
64
|
+
### Add a client row model explicitly
|
|
65
|
+
|
|
66
|
+
```ts
|
|
67
|
+
import {
|
|
68
|
+
createSortedRowModel,
|
|
69
|
+
rowSortingFeature,
|
|
70
|
+
sortFn_alphanumeric,
|
|
71
|
+
tableFeatures,
|
|
72
|
+
} from '@tanstack/vue-table'
|
|
73
|
+
|
|
74
|
+
const features = tableFeatures({
|
|
75
|
+
rowSortingFeature,
|
|
76
|
+
sortedRowModel: createSortedRowModel(),
|
|
77
|
+
sortFns: { alphanumeric: sortFn_alphanumeric },
|
|
78
|
+
})
|
|
79
|
+
```
|
|
80
|
+
|
|
81
|
+
The slot follows its prerequisite feature in the same call. Import individual `sortFn_*` built-ins and register only the ones your columns reference; the full `sortFns` registry object still works but bundles every built-in.
|
|
82
|
+
|
|
83
|
+
## Common Mistakes
|
|
84
|
+
|
|
85
|
+
### HIGH Flattening a ref into a snapshot
|
|
86
|
+
|
|
87
|
+
Wrong:
|
|
88
|
+
|
|
89
|
+
```ts
|
|
90
|
+
const table = useTable({ features, columns, data: data.value })
|
|
91
|
+
```
|
|
92
|
+
|
|
93
|
+
Correct:
|
|
94
|
+
|
|
95
|
+
```ts
|
|
96
|
+
const table = useTable({ features, columns, data })
|
|
97
|
+
```
|
|
98
|
+
|
|
99
|
+
Passing `.value` captures one array instead of letting the adapter watch the ref.
|
|
100
|
+
|
|
101
|
+
Source: `packages/vue-table/src/useTable.ts`
|
|
102
|
+
|
|
103
|
+
### HIGH Using the v8 entrypoint
|
|
104
|
+
|
|
105
|
+
Wrong:
|
|
106
|
+
|
|
107
|
+
```ts
|
|
108
|
+
const table = useVueTable({ data, columns, getCoreRowModel: getCoreRowModel() })
|
|
109
|
+
```
|
|
110
|
+
|
|
111
|
+
Correct:
|
|
112
|
+
|
|
113
|
+
```ts
|
|
114
|
+
const table = useTable({ features, columns, data })
|
|
115
|
+
```
|
|
116
|
+
|
|
117
|
+
V9 uses `useTable`; core processing is automatic and optional row models live in `tableFeatures`.
|
|
118
|
+
|
|
119
|
+
Source: `docs/framework/vue/guide/migrating.md`
|
|
120
|
+
|
|
121
|
+
### HIGH Assuming headless means prebuilt UI
|
|
122
|
+
|
|
123
|
+
Wrong:
|
|
124
|
+
|
|
125
|
+
```vue
|
|
126
|
+
<TanStackTable :table="table" />
|
|
127
|
+
```
|
|
128
|
+
|
|
129
|
+
Correct:
|
|
130
|
+
|
|
131
|
+
```vue
|
|
132
|
+
<td
|
|
133
|
+
v-for="cell in row.getAllCells()"
|
|
134
|
+
:key="cell.id"
|
|
135
|
+
><FlexRender :cell="cell" /></td>
|
|
136
|
+
```
|
|
137
|
+
|
|
138
|
+
The adapter renders definitions but owns no table component, CSS, or design-system integration.
|
|
139
|
+
|
|
140
|
+
Source: `examples/vue/basic-use-table/src/App.tsx`
|
|
141
|
+
|
|
142
|
+
## API Discovery
|
|
143
|
+
|
|
144
|
+
Inspect `node_modules/@tanstack/vue-table/src/index.ts`, then `useTable.ts` and `FlexRender.ts`. Inspect core feature APIs in `node_modules/@tanstack/table-core/src/features/<feature>/`.
|