@tanstack/vue-table 9.0.0-beta.5 → 9.0.0-beta.50

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.
Files changed (48) hide show
  1. package/README.md +2 -0
  2. package/dist/FlexRender.cjs +2 -3
  3. package/dist/FlexRender.cjs.map +1 -1
  4. package/dist/FlexRender.js +2 -3
  5. package/dist/FlexRender.js.map +1 -1
  6. package/dist/createTableHook.cjs +4 -9
  7. package/dist/createTableHook.cjs.map +1 -1
  8. package/dist/createTableHook.d.cts +39 -12
  9. package/dist/createTableHook.d.ts +39 -12
  10. package/dist/createTableHook.js +4 -9
  11. package/dist/createTableHook.js.map +1 -1
  12. package/dist/experimental-worker-plugin.cjs +9 -0
  13. package/dist/experimental-worker-plugin.d.cts +1 -0
  14. package/dist/experimental-worker-plugin.d.ts +1 -0
  15. package/dist/experimental-worker-plugin.js +3 -0
  16. package/dist/index.d.cts +2 -2
  17. package/dist/index.d.ts +2 -2
  18. package/dist/reactivity.cjs +2 -6
  19. package/dist/reactivity.cjs.map +1 -1
  20. package/dist/reactivity.js +2 -6
  21. package/dist/reactivity.js.map +1 -1
  22. package/dist/useTable.cjs +3 -7
  23. package/dist/useTable.cjs.map +1 -1
  24. package/dist/useTable.d.cts +1 -8
  25. package/dist/useTable.d.ts +1 -8
  26. package/dist/useTable.js +3 -7
  27. package/dist/useTable.js.map +1 -1
  28. package/package.json +8 -4
  29. package/skills/create-table-hook/SKILL.md +146 -0
  30. package/skills/getting-started/SKILL.md +144 -0
  31. package/skills/migrate-v8-to-v9/SKILL.md +185 -0
  32. package/skills/table-state/SKILL.md +191 -0
  33. package/skills/with-tanstack-query/SKILL.md +127 -0
  34. package/skills/with-tanstack-virtual/SKILL.md +116 -0
  35. package/src/createTableHook.ts +108 -17
  36. package/src/experimental-worker-plugin.ts +1 -0
  37. package/src/reactivity.ts +1 -2
  38. package/src/useTable.ts +3 -11
  39. package/skills/vue/client-to-server/SKILL.md +0 -365
  40. package/skills/vue/compose-with-tanstack-form/SKILL.md +0 -369
  41. package/skills/vue/compose-with-tanstack-pacer/SKILL.md +0 -318
  42. package/skills/vue/compose-with-tanstack-query/SKILL.md +0 -385
  43. package/skills/vue/compose-with-tanstack-store/SKILL.md +0 -301
  44. package/skills/vue/compose-with-tanstack-virtual/SKILL.md +0 -340
  45. package/skills/vue/getting-started/SKILL.md +0 -409
  46. package/skills/vue/migrate-v8-to-v9/SKILL.md +0 -375
  47. package/skills/vue/production-readiness/SKILL.md +0 -271
  48. package/skills/vue/table-state/SKILL.md +0 -403
@@ -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: _tanstack_store.batch
54
+ batch: (fn) => fn()
59
55
  };
60
56
  }
61
57
 
@@ -1 +1 @@
1
- {"version":3,"file":"reactivity.cjs","names":[],"sources":["../src/reactivity.ts"],"sourcesContent":["import { computed, shallowRef, watch } from 'vue'\nimport { batch } from '@tanstack/store'\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,\n }\n}\n"],"mappings":";;;;AAcA,SAAS,mBACP,gBACoB;CACpB,OAAO,OAAO,mBAAmB,aAC7B,kBACC,UAAU;;gDAAe,uGAAO,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;CACF;AACF"}
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"}
@@ -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
 
@@ -1 +1 @@
1
- {"version":3,"file":"reactivity.js","names":[],"sources":["../src/reactivity.ts"],"sourcesContent":["import { computed, shallowRef, watch } from 'vue'\nimport { batch } from '@tanstack/store'\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,\n }\n}\n"],"mappings":";;;;AAcA,SAAS,mBACP,gBACoB;CACpB,OAAO,OAAO,mBAAmB,aAC7B,kBACC,UAAU;;gDAAe,uGAAO,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;CACF;AACF"}
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
- coreReativityFeature: reactivity,
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) || (controlledAtoms === null || controlledAtoms === void 0 ? void 0 : controlledAtoms[key]) !== void 0) continue;
57
+ if (!(key in controlledState) || controlledAtoms?.[key] !== void 0) continue;
62
58
  controlledValues.push(controlledState[key]);
63
59
  }
64
60
  return controlledValues;
@@ -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 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> = Omit<Table<TFeatures, TData>, 'store'> & {\n /**\n * @deprecated Prefer `table.atoms.<slice>.get()` for slice snapshots, or\n * `table.Subscribe` for explicit subscriptions. `table.store.state` is a\n * current-value snapshot and is easy to misuse in render code.\n */\n readonly store: Table<TFeatures, TData>['store']\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 * rowModels: {},\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 coreReativityFeature: 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)\n }\n\n return table\n}\n"],"mappings":";;;;;;AAsBA,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;;;;;;;;;;;;;;;;;;;;;AAwCA,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,sBAAsB;EACtB,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;;2CAAW,kGAAU;EAAC;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,uFAAoB,gBAAkB,UAAS,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,KAAK;CACnC;CAEA,OAAO;AACT"}
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"}
@@ -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> = Omit<Table<TFeatures, TData>, 'store'> & {
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
  * },
@@ -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> = Omit<Table<TFeatures, TData>, 'store'> & {
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
- coreReativityFeature: reactivity,
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) || (controlledAtoms === null || controlledAtoms === void 0 ? void 0 : controlledAtoms[key]) !== void 0) continue;
57
+ if (!(key in controlledState) || controlledAtoms?.[key] !== void 0) continue;
62
58
  controlledValues.push(controlledState[key]);
63
59
  }
64
60
  return controlledValues;
@@ -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 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> = Omit<Table<TFeatures, TData>, 'store'> & {\n /**\n * @deprecated Prefer `table.atoms.<slice>.get()` for slice snapshots, or\n * `table.Subscribe` for explicit subscriptions. `table.store.state` is a\n * current-value snapshot and is easy to misuse in render code.\n */\n readonly store: Table<TFeatures, TData>['store']\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 * rowModels: {},\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 coreReativityFeature: 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)\n }\n\n return table\n}\n"],"mappings":";;;;;;AAsBA,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;;;;;;;;;;;;;;;;;;;;;AAwCA,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,sBAAsB;EACtB,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;;2CAAW,kGAAU;EAAC;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,uFAAoB,gBAAkB,UAAS,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,KAAK;CACnC;CAEA,OAAO;AACT"}
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.5",
3
+ "version": "9.0.0-beta.50",
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": ">=16"
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": "^9.0.0-beta.2"
58
+ "@tanstack/table-core": "9.0.0-beta.50"
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.35"
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.50'
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.50'
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>/`.