@tanstack/vue-table 9.0.0-beta.2 → 9.0.0-beta.4

package/dist/reactivity.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"reactivity.cjs","names":[],"sources":["../src/reactivity.ts"],"sourcesContent":["import {\n  computed,\n  getCurrentScope,\n  onScopeDispose,\n  shallowRef,\n  watch,\n} from 'vue'\nimport { batch, createAtom } from '@tanstack/vue-store'\nimport type {\n  TableAtomOptions,\n  TableReactivityBindings,\n} from '@tanstack/table-core/reactivity'\nimport type { Atom, Observer, ReadonlyAtom } from '@tanstack/vue-store'\nimport type { ComputedRef, ShallowRef } from 'vue'\n\nconst optionsStoreDebugName = 'table/optionsStore'\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  return {\n    createOptionsStore: true,\n    wrapExternalAtoms: false,\n    addSubscription: () => {\n      throw new Error(\n        'Feature not supported in current reactivity implementation',\n      )\n    },\n    unmount: () => {\n      throw new Error(\n        'Feature not supported in current reactivity implementation',\n      )\n    },\n    schedule: (fn) => queueMicrotask(() => fn()),\n    createReadonlyAtom: <T>(fn: () => T, _options?: TableAtomOptions<T>) => {\n      const storeAtom = createAtom(() => fn(), {\n        compare: _options?.compare,\n      })\n      const version = shallowRef(0)\n      const subscription = storeAtom.subscribe(() => {\n        version.value += 1\n      })\n      if (getCurrentScope()) {\n        onScopeDispose(() => subscription.unsubscribe())\n      }\n\n      return refToReadonlyAtom(\n        computed(() => {\n          version.value\n          return storeAtom.get()\n        }),\n      )\n    },\n    createWritableAtom: <T>(\n      value: T,\n      _options?: TableAtomOptions<T>,\n    ): Atom<T> => {\n      if (_options?.debugName === optionsStoreDebugName) {\n        return refToWritableAtom(shallowRef(value) as ShallowRef<T>)\n      }\n\n      return createAtom(value, {\n        compare: _options?.compare,\n      })\n    },\n    untrack: (fn) => fn(),\n    batch,\n  }\n}\n"],"mappings":";;;;AAeA,MAAM,wBAAwB;AAE9B,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,OAAO;EACL,oBAAoB;EACpB,mBAAmB;EACnB,uBAAuB;GACrB,MAAM,IAAI,MACR,4DACF;EACF;EACA,eAAe;GACb,MAAM,IAAI,MACR,4DACF;EACF;EACA,WAAW,OAAO,qBAAqB,GAAG,CAAC;EAC3C,qBAAwB,IAAa,aAAmC;GACtE,MAAM,sDAA6B,GAAG,GAAG,EACvC,6DAAS,SAAU,QACrB,CAAC;GACD,MAAM,8BAAqB,CAAC;GAC5B,MAAM,eAAe,UAAU,gBAAgB;IAC7C,QAAQ,SAAS;GACnB,CAAC;GACD,6BAAoB,GAClB,8BAAqB,aAAa,YAAY,CAAC;GAGjD,OAAO,0CACU;IACb,QAAQ;IACR,OAAO,UAAU,IAAI;GACvB,CAAC,CACH;EACF;EACA,qBACE,OACA,aACY;GACZ,yDAAI,SAAU,eAAc,uBAC1B,OAAO,sCAA6B,KAAK,CAAkB;GAG7D,2CAAkB,OAAO,EACvB,6DAAS,SAAU,QACrB,CAAC;EACH;EACA,UAAU,OAAO,GAAG;EACpB;CACF;AACF"}
+{"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"}

package/dist/reactivity.js

@@ -1,8 +1,7 @@
-import { computed, getCurrentScope, onScopeDispose, shallowRef, watch } from "vue";
-import { batch, createAtom } from "@tanstack/vue-store";
+import { computed, shallowRef, watch } from "vue";
+import { batch } from "@tanstack/store";
 
 //#region src/reactivity.ts
-const optionsStoreDebugName = "table/optionsStore";
 function observerToCallback(observerOrNext) {
 	return typeof observerOrNext === "function" ? observerOrNext : (value) => {
 		var _observerOrNext$next;
@@ -37,31 +36,23 @@ function refToWritableAtom(source) {
 * refs.
 */
 function vueReactivity() {
+	const subscriptions = /* @__PURE__ */ new Set();
 	return {
 		createOptionsStore: true,
-		wrapExternalAtoms: false,
-		addSubscription: () => {
-			throw new Error("Feature not supported in current reactivity implementation");
+		wrapExternalAtoms: true,
+		addSubscription: (subscription) => {
+			subscriptions.add(subscription);
 		},
 		unmount: () => {
-			throw new Error("Feature not supported in current reactivity implementation");
+			subscriptions.forEach((s) => s.unsubscribe());
+			subscriptions.clear();
 		},
 		schedule: (fn) => queueMicrotask(() => fn()),
 		createReadonlyAtom: (fn, _options) => {
-			const storeAtom = createAtom(() => fn(), { compare: _options === null || _options === void 0 ? void 0 : _options.compare });
-			const version = shallowRef(0);
-			const subscription = storeAtom.subscribe(() => {
-				version.value += 1;
-			});
-			if (getCurrentScope()) onScopeDispose(() => subscription.unsubscribe());
-			return refToReadonlyAtom(computed(() => {
-				version.value;
-				return storeAtom.get();
-			}));
+			return refToReadonlyAtom(computed(() => fn()));
 		},
 		createWritableAtom: (value, _options) => {
-			if ((_options === null || _options === void 0 ? void 0 : _options.debugName) === optionsStoreDebugName) return refToWritableAtom(shallowRef(value));
-			return createAtom(value, { compare: _options === null || _options === void 0 ? void 0 : _options.compare });
+			return refToWritableAtom(shallowRef(value));
 		},
 		untrack: (fn) => fn(),
 		batch

package/dist/reactivity.js.map

@@ -1 +1 @@
-{"version":3,"file":"reactivity.js","names":[],"sources":["../src/reactivity.ts"],"sourcesContent":["import {\n  computed,\n  getCurrentScope,\n  onScopeDispose,\n  shallowRef,\n  watch,\n} from 'vue'\nimport { batch, createAtom } from '@tanstack/vue-store'\nimport type {\n  TableAtomOptions,\n  TableReactivityBindings,\n} from '@tanstack/table-core/reactivity'\nimport type { Atom, Observer, ReadonlyAtom } from '@tanstack/vue-store'\nimport type { ComputedRef, ShallowRef } from 'vue'\n\nconst optionsStoreDebugName = 'table/optionsStore'\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  return {\n    createOptionsStore: true,\n    wrapExternalAtoms: false,\n    addSubscription: () => {\n      throw new Error(\n        'Feature not supported in current reactivity implementation',\n      )\n    },\n    unmount: () => {\n      throw new Error(\n        'Feature not supported in current reactivity implementation',\n      )\n    },\n    schedule: (fn) => queueMicrotask(() => fn()),\n    createReadonlyAtom: <T>(fn: () => T, _options?: TableAtomOptions<T>) => {\n      const storeAtom = createAtom(() => fn(), {\n        compare: _options?.compare,\n      })\n      const version = shallowRef(0)\n      const subscription = storeAtom.subscribe(() => {\n        version.value += 1\n      })\n      if (getCurrentScope()) {\n        onScopeDispose(() => subscription.unsubscribe())\n      }\n\n      return refToReadonlyAtom(\n        computed(() => {\n          version.value\n          return storeAtom.get()\n        }),\n      )\n    },\n    createWritableAtom: <T>(\n      value: T,\n      _options?: TableAtomOptions<T>,\n    ): Atom<T> => {\n      if (_options?.debugName === optionsStoreDebugName) {\n        return refToWritableAtom(shallowRef(value) as ShallowRef<T>)\n      }\n\n      return createAtom(value, {\n        compare: _options?.compare,\n      })\n    },\n    untrack: (fn) => fn(),\n    batch,\n  }\n}\n"],"mappings":";;;;AAeA,MAAM,wBAAwB;AAE9B,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,OAAO;EACL,oBAAoB;EACpB,mBAAmB;EACnB,uBAAuB;GACrB,MAAM,IAAI,MACR,4DACF;EACF;EACA,eAAe;GACb,MAAM,IAAI,MACR,4DACF;EACF;EACA,WAAW,OAAO,qBAAqB,GAAG,CAAC;EAC3C,qBAAwB,IAAa,aAAmC;GACtE,MAAM,YAAY,iBAAiB,GAAG,GAAG,EACvC,6DAAS,SAAU,QACrB,CAAC;GACD,MAAM,UAAU,WAAW,CAAC;GAC5B,MAAM,eAAe,UAAU,gBAAgB;IAC7C,QAAQ,SAAS;GACnB,CAAC;GACD,IAAI,gBAAgB,GAClB,qBAAqB,aAAa,YAAY,CAAC;GAGjD,OAAO,kBACL,eAAe;IACb,QAAQ;IACR,OAAO,UAAU,IAAI;GACvB,CAAC,CACH;EACF;EACA,qBACE,OACA,aACY;GACZ,yDAAI,SAAU,eAAc,uBAC1B,OAAO,kBAAkB,WAAW,KAAK,CAAkB;GAG7D,OAAO,WAAW,OAAO,EACvB,6DAAS,SAAU,QACrB,CAAC;EACH;EACA,UAAU,OAAO,GAAG;EACpB;CACF;AACF"}
+{"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"}

package/dist/useTable.cjs

@@ -2,7 +2,6 @@ const require_merge_proxy = require('./merge-proxy.cjs');
 const require_reactivity = require('./reactivity.cjs');
 let vue = require("vue");
 let _tanstack_table_core = require("@tanstack/table-core");
-let _tanstack_vue_store = require("@tanstack/vue-store");
 
 //#region src/useTable.ts
 function getOptionsWithReactiveValues(options) {
@@ -18,8 +17,8 @@ function getReactiveOptionDeps(options) {
 *
 * Table options may contain Vue refs or computed values. The adapter unwraps
 * those reactive inputs, watches them with synchronous flushing, and keeps the
-* table options in sync. The optional selector projects from `table.store` and
-* exposes the selected value on `table.state`.
+* table options in sync. Use `table.Subscribe` or native Vue computed values
+* around `table.atoms.<slice>.get()` for selected reactive reads.
 *
 * @example
 * ```ts
@@ -30,24 +29,26 @@ function getReactiveOptionDeps(options) {
 *     columns,
 *     data,
 *   },
-*   (state) => ({ pagination: state.pagination }),
 * )
-*
-* table.state.pagination
 * ```
 */
-function useTable(tableOptions, selector) {
+function useTable(tableOptions) {
 	const syncTableOptions = (table, options) => {
 		table.setOptions((prev) => require_merge_proxy.flatMerge(prev, getOptionsWithReactiveValues(options)));
 	};
+	const reactivity = require_reactivity.vueReactivity();
 	const mergedOptions = require_merge_proxy.mergeProxy(tableOptions, { features: {
-		coreReativityFeature: require_reactivity.vueReactivity(),
+		coreReativityFeature: reactivity,
 		...(0, vue.unref)(tableOptions.features) ?? {}
 	} });
 	const coreTable = (0, _tanstack_table_core.constructTable)(require_merge_proxy.mergeProxy(getOptionsWithReactiveValues(mergedOptions), { mergeOptions: (defaultOptions, newOptions) => {
 		return require_merge_proxy.flatMerge(defaultOptions, newOptions);
 	} }));
 	const table = coreTable;
+	if ((0, vue.getCurrentScope)()) (0, vue.onScopeDispose)(() => {
+		var _reactivity$unmount;
+		return (_reactivity$unmount = reactivity.unmount) === null || _reactivity$unmount === void 0 ? void 0 : _reactivity$unmount.call(reactivity);
+	});
 	(0, vue.watch)(() => getReactiveOptionDeps(mergedOptions), () => {
 		syncTableOptions(coreTable, mergedOptions);
 	}, { immediate: true });
@@ -64,18 +65,10 @@ function useTable(tableOptions, selector) {
 	}, (controlledValues) => {
 		if (controlledValues.length > 0) syncTableOptions(coreTable, mergedOptions);
 	}, { immediate: true });
-	table.Subscribe = ((props) => {
-		const selected = (0, _tanstack_vue_store.useSelector)(props.source ?? table.store, props.selector, { compare: _tanstack_vue_store.shallow });
-		if (typeof props.children === "function") return props.children(selected.value);
-		return props.children;
-	});
-	const stateStore = (0, _tanstack_vue_store.useSelector)(table.store, selector);
-	return {
-		...table,
-		get state() {
-			return stateStore.value;
-		}
+	table.Subscribe = (props) => {
+		return props.children(table.atoms);
 	};
+	return table;
 }
 
 //#endregion

package/dist/useTable.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useTable.cjs","names":["mergeProxy","flatMerge","vueReactivity","shallow"],"sources":["../src/useTable.ts"],"sourcesContent":["import { unref, watch } from 'vue'\nimport { constructTable } from '@tanstack/table-core'\nimport { shallow, useSelector } from '@tanstack/vue-store'\nimport { flatMerge, mergeProxy } from './merge-proxy'\nimport { vueReactivity } from './reactivity'\nimport type {\n  Atom,\n  ReadonlyAtom,\n  ReadonlyStore,\n  Store,\n} from '@tanstack/vue-store'\nimport type {\n  NoInfer,\n  RowData,\n  Table,\n  TableFeatures,\n  TableOptions,\n  TableState,\n} from '@tanstack/table-core'\nimport type { MaybeRef, VNode } from 'vue'\n\nexport type SubscribeSource<TValue> =\n  | Atom<TValue>\n  | ReadonlyAtom<TValue>\n  | Store<TValue>\n  | ReadonlyStore<TValue>\n\nexport type TableOptionsWithReactiveData<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n> = {\n  [K in keyof TableOptions<TFeatures, TData>]: K extends 'data'\n    ? MaybeRef<ReadonlyArray<TData>>\n    : MaybeRef<TableOptions<TFeatures, TData>[K]>\n}\n\nfunction getOptionsWithReactiveValues<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n>(options: TableOptionsWithReactiveData<TFeatures, TData>) {\n  const resolvedOptions: Record<string, unknown> = {}\n\n  for (const key of Object.keys(options)) {\n    resolvedOptions[key] = unref(\n      options[key as keyof TableOptionsWithReactiveData<TFeatures, TData>],\n    )\n  }\n\n  return mergeProxy(options, resolvedOptions)\n}\n\nfunction getReactiveOptionDeps<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n>(options: TableOptionsWithReactiveData<TFeatures, TData>) {\n  return Object.keys(options).map((key) =>\n    unref(options[key as keyof TableOptionsWithReactiveData<TFeatures, TData>]),\n  )\n}\n\nexport type VueTable<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TSelected = TableState<TFeatures>,\n> = Omit<Table<TFeatures, TData>, 'store'> & {\n  /**\n   * @deprecated Prefer `table.state` for render reads,\n   * `table.atoms.<slice>.get()` for slice snapshots, or\n   * `table.Subscribe` / `useSelector(table.store, selector)` for explicit\n   * subscriptions. `table.store.state` is a current-value snapshot and is easy\n   * to misuse in render code.\n   */\n  readonly store: Table<TFeatures, TData>['store']\n  /**\n   * Store mode: `selector` required. Source mode: pass `source` (atom or store); omit\n   * `selector` for the whole value (identity), or pass `selector` to project. Split\n   * overloads so source-only infers `TSourceValue` for `children` (see React `Subscribe`).\n   */\n  Subscribe: {\n    <TSourceValue>(props: {\n      source: SubscribeSource<TSourceValue>\n      selector?: undefined\n      children:\n        | ((state: Readonly<TSourceValue>) => VNode | Array<VNode>)\n        | VNode\n        | Array<VNode>\n    }): VNode | Array<VNode>\n    <TSourceValue, TSubSelected>(props: {\n      source: SubscribeSource<TSourceValue>\n      selector: (state: TSourceValue) => TSubSelected\n      children:\n        | ((state: Readonly<TSubSelected>) => VNode | Array<VNode>)\n        | VNode\n        | Array<VNode>\n    }): VNode | Array<VNode>\n    <TSubSelected>(props: {\n      selector: (state: NoInfer<TableState<TFeatures>>) => TSubSelected\n      children:\n        | ((state: Readonly<TSubSelected>) => VNode | Array<VNode>)\n        | VNode\n        | Array<VNode>\n    }): VNode | Array<VNode>\n  }\n  /**\n   * The selected state of the table. This state may not match the structure of\n   * the full table state because it is selected by the selector function that\n   * you pass as the 2nd argument to `useTable`.\n   *\n   * @example\n   * const table = useTable(options, (state) => ({ globalFilter: state.globalFilter })) // only globalFilter is part of the selected state\n   *\n   * console.log(table.state.globalFilter)\n   */\n  readonly state: Readonly<TSelected>\n}\n\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. The optional selector projects from `table.store` and\n * exposes the selected value on `table.state`.\n *\n * @example\n * ```ts\n * const table = useTable(\n *   {\n *     features,\n *     rowModels: {},\n *     columns,\n *     data,\n *   },\n *   (state) => ({ pagination: state.pagination }),\n * )\n *\n * table.state.pagination\n * ```\n */\nexport function useTable<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TSelected = TableState<TFeatures>,\n>(\n  tableOptions:\n    | TableOptions<TFeatures, TData>\n    | TableOptionsWithReactiveData<TFeatures, TData>,\n  selector?: (state: TableState<TFeatures>) => TSelected,\n): VueTable<TFeatures, TData, TSelected> {\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 mergedOptions = mergeProxy(tableOptions, {\n    features: {\n      coreReativityFeature: vueReactivity(),\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, TSelected>\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    source?: SubscribeSource<unknown>\n    selector?: ((state: unknown) => unknown) | undefined\n    children:\n      | ((state: Readonly<unknown>) => VNode | Array<VNode>)\n      | VNode\n      | Array<VNode>\n  }) => {\n    const source = props.source ?? table.store\n    const selected = useSelector(source as never, props.selector as never, {\n      compare: shallow,\n    })\n    if (typeof props.children === 'function') {\n      return props.children(selected.value as Readonly<unknown>)\n    }\n    return props.children\n  }) as VueTable<TFeatures, TData, TSelected>['Subscribe']\n\n  const stateStore = useSelector(table.store, selector)\n\n  return {\n    ...table,\n    get state() {\n      return stateStore.value\n    },\n  }\n}\n"],"mappings":";;;;;;;AAoCA,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;;;;;;;;;;;;;;;;;;;;;;;;AAiFA,SAAgB,SAKd,cAGA,UACuC;CACvC,MAAM,oBACJ,OACA,YACG;EACH,MAAM,YAAY,SAChBC,8BAAU,MAAM,6BAA6B,OAAO,CAAC,CACvD;CACF;CAEA,MAAM,gBAAgBD,+BAAW,cAAc,EAC7C,UAAU;EACR,sBAAsBE,iCAAc;EACpC,kBAAU,aAAa,QAAQ,KAAK,CAAC;CACvC,EACF,CAAC;CAeD,MAAM,qDAbkBF,+BACtB,6BAA6B,aAAa,GAC1C,EAEE,eACE,gBACA,eACG;EACH,OAAOC,8BAAU,gBAAgB,UAAU;CAC7C,EACF,CAG6C,CAAC;CAChD,MAAM,QAAQ;CAEd,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,cAAc,UAOd;EAEJ,MAAM,gDADS,MAAM,UAAU,MAAM,OACS,MAAM,UAAmB,EACrE,SAASE,4BACX,CAAC;EACD,IAAI,OAAO,MAAM,aAAa,YAC5B,OAAO,MAAM,SAAS,SAAS,KAA0B;EAE3D,OAAO,MAAM;CACf;CAEA,MAAM,kDAAyB,MAAM,OAAO,QAAQ;CAEpD,OAAO;EACL,GAAG;EACH,IAAI,QAAQ;GACV,OAAO,WAAW;EACpB;CACF;AACF"}
+{"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"}

package/dist/useTable.d.cts

@@ -1,59 +1,29 @@
-import { NoInfer, RowData, Table, TableFeatures, TableOptions, TableState } from "@tanstack/table-core";
-import { Atom, ReadonlyAtom, ReadonlyStore, Store } from "@tanstack/vue-store";
+import { RowData, Table, TableFeatures, TableOptions } from "@tanstack/table-core";
 import { MaybeRef, VNode } from "vue";
 
 //#region src/useTable.d.ts
-type SubscribeSource<TValue> = Atom<TValue> | ReadonlyAtom<TValue> | Store<TValue> | ReadonlyStore<TValue>;
 type TableOptionsWithReactiveData<TFeatures extends TableFeatures, TData extends RowData> = { [K in keyof TableOptions<TFeatures, TData>]: K extends 'data' ? MaybeRef<ReadonlyArray<TData>> : MaybeRef<TableOptions<TFeatures, TData>[K]> };
-type VueTable<TFeatures extends TableFeatures, TData extends RowData, TSelected = TableState<TFeatures>> = Omit<Table<TFeatures, TData>, 'store'> & {
+type VueTable<TFeatures extends TableFeatures, TData extends RowData> = Omit<Table<TFeatures, TData>, 'store'> & {
   /**
-   * @deprecated Prefer `table.state` for render reads,
-   * `table.atoms.<slice>.get()` for slice snapshots, or
-   * `table.Subscribe` / `useSelector(table.store, selector)` for explicit
-   * subscriptions. `table.store.state` is a current-value snapshot and is easy
-   * to misuse in render code.
+   * @deprecated Prefer `table.atoms.<slice>.get()` for slice snapshots, or
+   * `table.Subscribe` for explicit subscriptions. `table.store.state` is a
+   * current-value snapshot and is easy to misuse in render code.
    */
   readonly store: Table<TFeatures, TData>['store'];
-  /**
-   * Store mode: `selector` required. Source mode: pass `source` (atom or store); omit
-   * `selector` for the whole value (identity), or pass `selector` to project. Split
-   * overloads so source-only infers `TSourceValue` for `children` (see React `Subscribe`).
-   */
-  Subscribe: {
-    <TSourceValue>(props: {
-      source: SubscribeSource<TSourceValue>;
-      selector?: undefined;
-      children: ((state: Readonly<TSourceValue>) => VNode | Array<VNode>) | VNode | Array<VNode>;
-    }): VNode | Array<VNode>;
-    <TSourceValue, TSubSelected>(props: {
-      source: SubscribeSource<TSourceValue>;
-      selector: (state: TSourceValue) => TSubSelected;
-      children: ((state: Readonly<TSubSelected>) => VNode | Array<VNode>) | VNode | Array<VNode>;
-    }): VNode | Array<VNode>;
-    <TSubSelected>(props: {
-      selector: (state: NoInfer<TableState<TFeatures>>) => TSubSelected;
-      children: ((state: Readonly<TSubSelected>) => VNode | Array<VNode>) | VNode | Array<VNode>;
-    }): VNode | Array<VNode>;
-  };
-  /**
-   * The selected state of the table. This state may not match the structure of
-   * the full table state because it is selected by the selector function that
-   * you pass as the 2nd argument to `useTable`.
-   *
-   * @example
-   * const table = useTable(options, (state) => ({ globalFilter: state.globalFilter })) // only globalFilter is part of the selected state
-   *
-   * console.log(table.state.globalFilter)
+  /** Creates a reactive render boundary. The child function reads the table
+   * atoms it needs, so Vue only tracks those atom reads.
    */
-  readonly state: Readonly<TSelected>;
+  Subscribe: (props: {
+    children: (atoms: Table<TFeatures, TData>['atoms']) => VNode | Array<VNode>;
+  }) => VNode | Array<VNode>;
 };
 /**
  * Creates a Vue table instance backed by Vue-aware TanStack Store atoms.
  *
  * Table options may contain Vue refs or computed values. The adapter unwraps
  * those reactive inputs, watches them with synchronous flushing, and keeps the
- * table options in sync. The optional selector projects from `table.store` and
- * exposes the selected value on `table.state`.
+ * table options in sync. Use `table.Subscribe` or native Vue computed values
+ * around `table.atoms.<slice>.get()` for selected reactive reads.
  *
  * @example
  * ```ts
@@ -64,13 +34,10 @@ type VueTable<TFeatures extends TableFeatures, TData extends RowData, TSelected
  *     columns,
  *     data,
  *   },
- *   (state) => ({ pagination: state.pagination }),
  * )
- *
- * table.state.pagination
  * ```
  */
-declare function useTable<TFeatures extends TableFeatures, TData extends RowData, TSelected = TableState<TFeatures>>(tableOptions: TableOptions<TFeatures, TData> | TableOptionsWithReactiveData<TFeatures, TData>, selector?: (state: TableState<TFeatures>) => TSelected): VueTable<TFeatures, TData, TSelected>;
+declare function useTable<TFeatures extends TableFeatures, TData extends RowData>(tableOptions: TableOptions<TFeatures, TData> | TableOptionsWithReactiveData<TFeatures, TData>): VueTable<TFeatures, TData>;
 //#endregion
-export { SubscribeSource, TableOptionsWithReactiveData, VueTable, useTable };
+export { TableOptionsWithReactiveData, VueTable, useTable };
 //# sourceMappingURL=useTable.d.cts.map

package/dist/useTable.d.ts

@@ -1,59 +1,29 @@
 import { MaybeRef, VNode } from "vue";
-import { NoInfer, RowData, Table, TableFeatures, TableOptions, TableState } from "@tanstack/table-core";
-import { Atom, ReadonlyAtom, ReadonlyStore, Store } from "@tanstack/vue-store";
+import { RowData, Table, TableFeatures, TableOptions } from "@tanstack/table-core";
 
 //#region src/useTable.d.ts
-type SubscribeSource<TValue> = Atom<TValue> | ReadonlyAtom<TValue> | Store<TValue> | ReadonlyStore<TValue>;
 type TableOptionsWithReactiveData<TFeatures extends TableFeatures, TData extends RowData> = { [K in keyof TableOptions<TFeatures, TData>]: K extends 'data' ? MaybeRef<ReadonlyArray<TData>> : MaybeRef<TableOptions<TFeatures, TData>[K]> };
-type VueTable<TFeatures extends TableFeatures, TData extends RowData, TSelected = TableState<TFeatures>> = Omit<Table<TFeatures, TData>, 'store'> & {
+type VueTable<TFeatures extends TableFeatures, TData extends RowData> = Omit<Table<TFeatures, TData>, 'store'> & {
   /**
-   * @deprecated Prefer `table.state` for render reads,
-   * `table.atoms.<slice>.get()` for slice snapshots, or
-   * `table.Subscribe` / `useSelector(table.store, selector)` for explicit
-   * subscriptions. `table.store.state` is a current-value snapshot and is easy
-   * to misuse in render code.
+   * @deprecated Prefer `table.atoms.<slice>.get()` for slice snapshots, or
+   * `table.Subscribe` for explicit subscriptions. `table.store.state` is a
+   * current-value snapshot and is easy to misuse in render code.
    */
   readonly store: Table<TFeatures, TData>['store'];
-  /**
-   * Store mode: `selector` required. Source mode: pass `source` (atom or store); omit
-   * `selector` for the whole value (identity), or pass `selector` to project. Split
-   * overloads so source-only infers `TSourceValue` for `children` (see React `Subscribe`).
-   */
-  Subscribe: {
-    <TSourceValue>(props: {
-      source: SubscribeSource<TSourceValue>;
-      selector?: undefined;
-      children: ((state: Readonly<TSourceValue>) => VNode | Array<VNode>) | VNode | Array<VNode>;
-    }): VNode | Array<VNode>;
-    <TSourceValue, TSubSelected>(props: {
-      source: SubscribeSource<TSourceValue>;
-      selector: (state: TSourceValue) => TSubSelected;
-      children: ((state: Readonly<TSubSelected>) => VNode | Array<VNode>) | VNode | Array<VNode>;
-    }): VNode | Array<VNode>;
-    <TSubSelected>(props: {
-      selector: (state: NoInfer<TableState<TFeatures>>) => TSubSelected;
-      children: ((state: Readonly<TSubSelected>) => VNode | Array<VNode>) | VNode | Array<VNode>;
-    }): VNode | Array<VNode>;
-  };
-  /**
-   * The selected state of the table. This state may not match the structure of
-   * the full table state because it is selected by the selector function that
-   * you pass as the 2nd argument to `useTable`.
-   *
-   * @example
-   * const table = useTable(options, (state) => ({ globalFilter: state.globalFilter })) // only globalFilter is part of the selected state
-   *
-   * console.log(table.state.globalFilter)
+  /** Creates a reactive render boundary. The child function reads the table
+   * atoms it needs, so Vue only tracks those atom reads.
    */
-  readonly state: Readonly<TSelected>;
+  Subscribe: (props: {
+    children: (atoms: Table<TFeatures, TData>['atoms']) => VNode | Array<VNode>;
+  }) => VNode | Array<VNode>;
 };
 /**
  * Creates a Vue table instance backed by Vue-aware TanStack Store atoms.
  *
  * Table options may contain Vue refs or computed values. The adapter unwraps
  * those reactive inputs, watches them with synchronous flushing, and keeps the
- * table options in sync. The optional selector projects from `table.store` and
- * exposes the selected value on `table.state`.
+ * table options in sync. Use `table.Subscribe` or native Vue computed values
+ * around `table.atoms.<slice>.get()` for selected reactive reads.
  *
  * @example
  * ```ts
@@ -64,13 +34,10 @@ type VueTable<TFeatures extends TableFeatures, TData extends RowData, TSelected
  *     columns,
  *     data,
  *   },
- *   (state) => ({ pagination: state.pagination }),
  * )
- *
- * table.state.pagination
  * ```
  */
-declare function useTable<TFeatures extends TableFeatures, TData extends RowData, TSelected = TableState<TFeatures>>(tableOptions: TableOptions<TFeatures, TData> | TableOptionsWithReactiveData<TFeatures, TData>, selector?: (state: TableState<TFeatures>) => TSelected): VueTable<TFeatures, TData, TSelected>;
+declare function useTable<TFeatures extends TableFeatures, TData extends RowData>(tableOptions: TableOptions<TFeatures, TData> | TableOptionsWithReactiveData<TFeatures, TData>): VueTable<TFeatures, TData>;
 //#endregion
-export { SubscribeSource, TableOptionsWithReactiveData, VueTable, useTable };
+export { TableOptionsWithReactiveData, VueTable, useTable };
 //# sourceMappingURL=useTable.d.ts.map

package/dist/useTable.js

@@ -1,8 +1,7 @@
 import { flatMerge, mergeProxy } from "./merge-proxy.js";
 import { vueReactivity } from "./reactivity.js";
-import { unref, watch } from "vue";
+import { getCurrentScope, onScopeDispose, unref, watch } from "vue";
 import { constructTable } from "@tanstack/table-core";
-import { shallow, useSelector } from "@tanstack/vue-store";
 
 //#region src/useTable.ts
 function getOptionsWithReactiveValues(options) {
@@ -18,8 +17,8 @@ function getReactiveOptionDeps(options) {
 *
 * Table options may contain Vue refs or computed values. The adapter unwraps
 * those reactive inputs, watches them with synchronous flushing, and keeps the
-* table options in sync. The optional selector projects from `table.store` and
-* exposes the selected value on `table.state`.
+* table options in sync. Use `table.Subscribe` or native Vue computed values
+* around `table.atoms.<slice>.get()` for selected reactive reads.
 *
 * @example
 * ```ts
@@ -30,24 +29,26 @@ function getReactiveOptionDeps(options) {
 *     columns,
 *     data,
 *   },
-*   (state) => ({ pagination: state.pagination }),
 * )
-*
-* table.state.pagination
 * ```
 */
-function useTable(tableOptions, selector) {
+function useTable(tableOptions) {
 	const syncTableOptions = (table, options) => {
 		table.setOptions((prev) => flatMerge(prev, getOptionsWithReactiveValues(options)));
 	};
+	const reactivity = vueReactivity();
 	const mergedOptions = mergeProxy(tableOptions, { features: {
-		coreReativityFeature: vueReactivity(),
+		coreReativityFeature: reactivity,
 		...unref(tableOptions.features) ?? {}
 	} });
 	const coreTable = constructTable(mergeProxy(getOptionsWithReactiveValues(mergedOptions), { mergeOptions: (defaultOptions, newOptions) => {
 		return flatMerge(defaultOptions, newOptions);
 	} }));
 	const table = coreTable;
+	if (getCurrentScope()) onScopeDispose(() => {
+		var _reactivity$unmount;
+		return (_reactivity$unmount = reactivity.unmount) === null || _reactivity$unmount === void 0 ? void 0 : _reactivity$unmount.call(reactivity);
+	});
 	watch(() => getReactiveOptionDeps(mergedOptions), () => {
 		syncTableOptions(coreTable, mergedOptions);
 	}, { immediate: true });
@@ -64,18 +65,10 @@ function useTable(tableOptions, selector) {
 	}, (controlledValues) => {
 		if (controlledValues.length > 0) syncTableOptions(coreTable, mergedOptions);
 	}, { immediate: true });
-	table.Subscribe = ((props) => {
-		const selected = useSelector(props.source ?? table.store, props.selector, { compare: shallow });
-		if (typeof props.children === "function") return props.children(selected.value);
-		return props.children;
-	});
-	const stateStore = useSelector(table.store, selector);
-	return {
-		...table,
-		get state() {
-			return stateStore.value;
-		}
+	table.Subscribe = (props) => {
+		return props.children(table.atoms);
 	};
+	return table;
 }
 
 //#endregion

package/dist/useTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"useTable.js","names":[],"sources":["../src/useTable.ts"],"sourcesContent":["import { unref, watch } from 'vue'\nimport { constructTable } from '@tanstack/table-core'\nimport { shallow, useSelector } from '@tanstack/vue-store'\nimport { flatMerge, mergeProxy } from './merge-proxy'\nimport { vueReactivity } from './reactivity'\nimport type {\n  Atom,\n  ReadonlyAtom,\n  ReadonlyStore,\n  Store,\n} from '@tanstack/vue-store'\nimport type {\n  NoInfer,\n  RowData,\n  Table,\n  TableFeatures,\n  TableOptions,\n  TableState,\n} from '@tanstack/table-core'\nimport type { MaybeRef, VNode } from 'vue'\n\nexport type SubscribeSource<TValue> =\n  | Atom<TValue>\n  | ReadonlyAtom<TValue>\n  | Store<TValue>\n  | ReadonlyStore<TValue>\n\nexport type TableOptionsWithReactiveData<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n> = {\n  [K in keyof TableOptions<TFeatures, TData>]: K extends 'data'\n    ? MaybeRef<ReadonlyArray<TData>>\n    : MaybeRef<TableOptions<TFeatures, TData>[K]>\n}\n\nfunction getOptionsWithReactiveValues<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n>(options: TableOptionsWithReactiveData<TFeatures, TData>) {\n  const resolvedOptions: Record<string, unknown> = {}\n\n  for (const key of Object.keys(options)) {\n    resolvedOptions[key] = unref(\n      options[key as keyof TableOptionsWithReactiveData<TFeatures, TData>],\n    )\n  }\n\n  return mergeProxy(options, resolvedOptions)\n}\n\nfunction getReactiveOptionDeps<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n>(options: TableOptionsWithReactiveData<TFeatures, TData>) {\n  return Object.keys(options).map((key) =>\n    unref(options[key as keyof TableOptionsWithReactiveData<TFeatures, TData>]),\n  )\n}\n\nexport type VueTable<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TSelected = TableState<TFeatures>,\n> = Omit<Table<TFeatures, TData>, 'store'> & {\n  /**\n   * @deprecated Prefer `table.state` for render reads,\n   * `table.atoms.<slice>.get()` for slice snapshots, or\n   * `table.Subscribe` / `useSelector(table.store, selector)` for explicit\n   * subscriptions. `table.store.state` is a current-value snapshot and is easy\n   * to misuse in render code.\n   */\n  readonly store: Table<TFeatures, TData>['store']\n  /**\n   * Store mode: `selector` required. Source mode: pass `source` (atom or store); omit\n   * `selector` for the whole value (identity), or pass `selector` to project. Split\n   * overloads so source-only infers `TSourceValue` for `children` (see React `Subscribe`).\n   */\n  Subscribe: {\n    <TSourceValue>(props: {\n      source: SubscribeSource<TSourceValue>\n      selector?: undefined\n      children:\n        | ((state: Readonly<TSourceValue>) => VNode | Array<VNode>)\n        | VNode\n        | Array<VNode>\n    }): VNode | Array<VNode>\n    <TSourceValue, TSubSelected>(props: {\n      source: SubscribeSource<TSourceValue>\n      selector: (state: TSourceValue) => TSubSelected\n      children:\n        | ((state: Readonly<TSubSelected>) => VNode | Array<VNode>)\n        | VNode\n        | Array<VNode>\n    }): VNode | Array<VNode>\n    <TSubSelected>(props: {\n      selector: (state: NoInfer<TableState<TFeatures>>) => TSubSelected\n      children:\n        | ((state: Readonly<TSubSelected>) => VNode | Array<VNode>)\n        | VNode\n        | Array<VNode>\n    }): VNode | Array<VNode>\n  }\n  /**\n   * The selected state of the table. This state may not match the structure of\n   * the full table state because it is selected by the selector function that\n   * you pass as the 2nd argument to `useTable`.\n   *\n   * @example\n   * const table = useTable(options, (state) => ({ globalFilter: state.globalFilter })) // only globalFilter is part of the selected state\n   *\n   * console.log(table.state.globalFilter)\n   */\n  readonly state: Readonly<TSelected>\n}\n\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. The optional selector projects from `table.store` and\n * exposes the selected value on `table.state`.\n *\n * @example\n * ```ts\n * const table = useTable(\n *   {\n *     features,\n *     rowModels: {},\n *     columns,\n *     data,\n *   },\n *   (state) => ({ pagination: state.pagination }),\n * )\n *\n * table.state.pagination\n * ```\n */\nexport function useTable<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TSelected = TableState<TFeatures>,\n>(\n  tableOptions:\n    | TableOptions<TFeatures, TData>\n    | TableOptionsWithReactiveData<TFeatures, TData>,\n  selector?: (state: TableState<TFeatures>) => TSelected,\n): VueTable<TFeatures, TData, TSelected> {\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 mergedOptions = mergeProxy(tableOptions, {\n    features: {\n      coreReativityFeature: vueReactivity(),\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, TSelected>\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    source?: SubscribeSource<unknown>\n    selector?: ((state: unknown) => unknown) | undefined\n    children:\n      | ((state: Readonly<unknown>) => VNode | Array<VNode>)\n      | VNode\n      | Array<VNode>\n  }) => {\n    const source = props.source ?? table.store\n    const selected = useSelector(source as never, props.selector as never, {\n      compare: shallow,\n    })\n    if (typeof props.children === 'function') {\n      return props.children(selected.value as Readonly<unknown>)\n    }\n    return props.children\n  }) as VueTable<TFeatures, TData, TSelected>['Subscribe']\n\n  const stateStore = useSelector(table.store, selector)\n\n  return {\n    ...table,\n    get state() {\n      return stateStore.value\n    },\n  }\n}\n"],"mappings":";;;;;;;AAoCA,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;;;;;;;;;;;;;;;;;;;;;;;;AAiFA,SAAgB,SAKd,cAGA,UACuC;CACvC,MAAM,oBACJ,OACA,YACG;EACH,MAAM,YAAY,SAChB,UAAU,MAAM,6BAA6B,OAAO,CAAC,CACvD;CACF;CAEA,MAAM,gBAAgB,WAAW,cAAc,EAC7C,UAAU;EACR,sBAAsB,cAAc;EACpC,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,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,cAAc,UAOd;EAEJ,MAAM,WAAW,YADF,MAAM,UAAU,MAAM,OACS,MAAM,UAAmB,EACrE,SAAS,QACX,CAAC;EACD,IAAI,OAAO,MAAM,aAAa,YAC5B,OAAO,MAAM,SAAS,SAAS,KAA0B;EAE3D,OAAO,MAAM;CACf;CAEA,MAAM,aAAa,YAAY,MAAM,OAAO,QAAQ;CAEpD,OAAO;EACL,GAAG;EACH,IAAI,QAAQ;GACV,OAAO,WAAW;EACpB;CACF;AACF"}
+{"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/vue-table",
-  "version": "9.0.0-beta.2",
+  "version": "9.0.0-beta.4",
   "description": "Headless UI for building powerful tables & datagrids for Vue.",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -50,8 +50,8 @@
     "skills"
   ],
   "dependencies": {
-    "@tanstack/table-core": "9.0.0-beta.1",
-    "@tanstack/vue-store": "^0.11.0"
+    "@tanstack/store": "^0.11.0",
+    "@tanstack/table-core": "^9.0.0-beta.2"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^6.0.7",