@tanstack/alpine-table 9.0.0-beta.25 → 9.0.0-beta.27

package/dist/createTable.cjs

@@ -4,9 +4,27 @@ const require_reactivity = require('./reactivity.cjs');
 let _tanstack_table_core = require("@tanstack/table-core");
 let alpinejs = require("alpinejs");
 alpinejs = require_runtime.__toESM(alpinejs, 1);
+let _tanstack_store = require("@tanstack/store");
 
 //#region src/createTable.ts
-function createTable(tableOptions) {
+/**
+* Creates an Alpine-reactive table instance.
+*
+* Reactivity is bridged through a single version counter that every proxied
+* table read registers as a dependency, so by default ANY state change
+* re-evaluates every Alpine binding that touches the table. Pass a `selector`
+* to gate that: the counter then only bumps when the selected slice of state
+* changes (shallow compare). Use `() => ({})` to opt out of state-driven
+* re-evaluation entirely and handle high-frequency state (e.g. column
+* resizing) with explicit `table.atoms.<slice>.subscribe()` side effects.
+* Options changes (e.g. new `data`) always re-evaluate.
+*
+* @example
+* ```ts
+* const table = createTable(options, (state) => ({ sorting: state.sorting }))
+* ```
+*/
+function createTable(tableOptions, selector) {
 	const table = (0, _tanstack_table_core.constructTable)({
 		...tableOptions,
 		features: {
@@ -23,7 +41,13 @@ function createTable(tableOptions) {
 	table.flexRender = require_flexRender.flexRender;
 	table.FlexRender = require_flexRender.FlexRender;
 	const reactivity = alpinejs.default.reactive({ _ver: 0 });
+	let lastSelected = selector ? selector(table.store.state) : void 0;
 	table.store.subscribe(() => {
+		if (selector) {
+			const nextSelected = selector(table.store.state);
+			if ((0, _tanstack_store.shallow)(lastSelected, nextSelected)) return;
+			lastSelected = nextSelected;
+		}
 		reactivity._ver++;
 	});
 	let initialized = false;
@@ -39,6 +63,7 @@ function createTable(tableOptions) {
 		initialized = true;
 	});
 	const proxyCache = /* @__PURE__ */ new WeakMap();
+	const wrapperCache = /* @__PURE__ */ new WeakMap();
 	const toReactiveProxy = (value) => {
 		if (typeof value !== "object" || value === null) return value;
 		if (value instanceof Map || value instanceof Set || value instanceof WeakMap || value instanceof WeakSet || value instanceof Date || value instanceof RegExp || value instanceof Promise) return value;
@@ -47,10 +72,24 @@ function createTable(tableOptions) {
 		const proxy = new Proxy(value, { get(target, prop, receiver) {
 			if (prop === "__v_skip") return true;
 			const resolvedValue = Reflect.get(target, prop, receiver);
-			if (typeof resolvedValue === "function") return (...args) => {
-				reactivity._ver;
-				return toReactiveProxy(resolvedValue.apply(target, args));
-			};
+			if (typeof resolvedValue === "function") {
+				let targetWrappers = wrapperCache.get(target);
+				if (!targetWrappers) {
+					targetWrappers = /* @__PURE__ */ new Map();
+					wrapperCache.set(target, targetWrappers);
+				}
+				const cached = targetWrappers.get(prop);
+				if (cached && cached.original === resolvedValue) return cached.wrapper;
+				const wrapper = (...args) => {
+					reactivity._ver;
+					return toReactiveProxy(resolvedValue.apply(target, args));
+				};
+				targetWrappers.set(prop, {
+					original: resolvedValue,
+					wrapper
+				});
+				return wrapper;
+			}
 			reactivity._ver;
 			return toReactiveProxy(resolvedValue);
 		} });

package/dist/createTable.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"createTable.cjs","names":["alpineReactivity","flexRender","FlexRender","Alpine"],"sources":["../src/createTable.ts"],"sourcesContent":["import Alpine from 'alpinejs'\nimport { constructTable } from '@tanstack/table-core'\nimport { FlexRender, flexRender } from './flexRender'\nimport { alpineReactivity } from './reactivity'\nimport type {\n  RowData,\n  Table,\n  TableFeatures,\n  TableOptions,\n} from '@tanstack/table-core'\n\nexport type AlpineTable<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n> = Table<TFeatures, TData> & {\n  /**\n   * A lower-level helper to render the content of a cell, header, or footer from a render function and its context.\n   */\n  flexRender: typeof flexRender\n\n  /**\n   * A convenience helper to render a cell, header, or footer object. Call from `x-html`, e.g. `FlexRender({ header })`.\n   */\n  FlexRender: typeof FlexRender\n}\n\nexport function createTable<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n>(tableOptions: TableOptions<TFeatures, TData>): AlpineTable<TFeatures, TData> {\n  const mergedOptions: TableOptions<TFeatures, TData> = {\n    ...tableOptions,\n    features: {\n      coreReactivityFeature: alpineReactivity(),\n      ...tableOptions.features,\n    },\n    mergeOptions: (\n      defaultOptions: TableOptions<TFeatures, TData>,\n      newOptions: Partial<TableOptions<TFeatures, TData>>,\n    ) => {\n      return {\n        ...defaultOptions,\n        ...newOptions,\n      }\n    },\n  }\n\n  const table = constructTable(mergedOptions) as unknown as AlpineTable<\n    TFeatures,\n    TData\n  >\n\n  table.flexRender = flexRender\n  table.FlexRender = FlexRender\n\n  const reactivity = Alpine.reactive({ _ver: 0 })\n\n  table.store.subscribe(() => {\n    reactivity._ver++\n  })\n\n  // Reactively sync options when external Alpine-reactive getters change (e.g.\n  // a `get data()` backed by `Alpine.reactive`). Reading the option getters\n  // inside the effect registers the dependencies, so the effect re-runs when\n  // they change and re-applies the live values via `setOptions`.\n  //\n  // `setOptions` writes to the options store, not the state store, so a `data`\n  // (or other option) change does not emit on `table.store` and would not bump\n  // `_ver` on its own. We bump `_ver` here so the template re-pulls derived\n  // APIs like `getRowModel()`, which recompute from the new options. The effect\n  // never reads `_ver`, so writing it does not re-trigger this effect.\n  let initialized = false\n  Alpine.effect(() => {\n    const state = tableOptions.state as Record<string, unknown> | undefined\n    if (state) {\n      for (const key in state) {\n        void state[key]\n      }\n    }\n    void tableOptions.data\n\n    table.setOptions((prev) => ({\n      ...prev,\n      ...tableOptions,\n    }))\n\n    if (initialized) {\n      reactivity._ver++\n    }\n    initialized = true\n  })\n\n  const proxyCache = new WeakMap<object, object>()\n\n  const toReactiveProxy = <TValue>(value: TValue): TValue => {\n    if (typeof value !== 'object' || value === null) {\n      return value\n    }\n\n    // Built-in exotic objects (Map, Set, Date, etc.) rely on internal slots and\n    // throw \"incompatible receiver\" when their getters/methods run with a Proxy\n    // as the receiver (e.g. `getFacetedUniqueValues().size`). Return them as-is;\n    // the read that produced them already tracked `_ver` at the call site.\n    if (\n      value instanceof Map ||\n      value instanceof Set ||\n      value instanceof WeakMap ||\n      value instanceof WeakSet ||\n      value instanceof Date ||\n      value instanceof RegExp ||\n      value instanceof Promise\n    ) {\n      return value\n    }\n\n    const cachedProxy = proxyCache.get(value)\n    if (cachedProxy) {\n      return cachedProxy as TValue\n    }\n\n    const proxy = new Proxy(value, {\n      get(target, prop, receiver) {\n        if (prop === '__v_skip') {\n          return true\n        }\n\n        const resolvedValue = Reflect.get(target, prop, receiver)\n\n        if (typeof resolvedValue === 'function') {\n          return (...args: Array<unknown>) => {\n            void reactivity._ver\n            return toReactiveProxy(\n              (resolvedValue as Function).apply(target, args),\n            )\n          }\n        }\n\n        void reactivity._ver\n        return toReactiveProxy(resolvedValue)\n      },\n    })\n\n    proxyCache.set(value, proxy)\n    return proxy\n  }\n\n  return toReactiveProxy(table)\n}\n"],"mappings":";;;;;;;;AA0BA,SAAgB,YAGd,cAA6E;CAkB7E,MAAM,iDAAuB;EAhB3B,GAAG;EACH,UAAU;GACR,uBAAuBA,oCAAiB;GACxC,GAAG,aAAa;EAClB;EACA,eACE,gBACA,eACG;GACH,OAAO;IACL,GAAG;IACH,GAAG;GACL;EACF;CAGuC,CAAC;CAK1C,MAAM,aAAaC;CACnB,MAAM,aAAaC;CAEnB,MAAM,aAAaC,iBAAO,SAAS,EAAE,MAAM,EAAE,CAAC;CAE9C,MAAM,MAAM,gBAAgB;EAC1B,WAAW;CACb,CAAC;CAYD,IAAI,cAAc;CAClB,iBAAO,aAAa;EAClB,MAAM,QAAQ,aAAa;EAC3B,IAAI,OACF,KAAK,MAAM,OAAO,OAChB,AAAK,MAAM;EAGf,AAAK,aAAa;EAElB,MAAM,YAAY,UAAU;GAC1B,GAAG;GACH,GAAG;EACL,EAAE;EAEF,IAAI,aACF,WAAW;EAEb,cAAc;CAChB,CAAC;CAED,MAAM,6BAAa,IAAI,QAAwB;CAE/C,MAAM,mBAA2B,UAA0B;EACzD,IAAI,OAAO,UAAU,YAAY,UAAU,MACzC,OAAO;EAOT,IACE,iBAAiB,OACjB,iBAAiB,OACjB,iBAAiB,WACjB,iBAAiB,WACjB,iBAAiB,QACjB,iBAAiB,UACjB,iBAAiB,SAEjB,OAAO;EAGT,MAAM,cAAc,WAAW,IAAI,KAAK;EACxC,IAAI,aACF,OAAO;EAGT,MAAM,QAAQ,IAAI,MAAM,OAAO,EAC7B,IAAI,QAAQ,MAAM,UAAU;GAC1B,IAAI,SAAS,YACX,OAAO;GAGT,MAAM,gBAAgB,QAAQ,IAAI,QAAQ,MAAM,QAAQ;GAExD,IAAI,OAAO,kBAAkB,YAC3B,QAAQ,GAAG,SAAyB;IAClC,AAAK,WAAW;IAChB,OAAO,gBACJ,cAA2B,MAAM,QAAQ,IAAI,CAChD;GACF;GAGF,AAAK,WAAW;GAChB,OAAO,gBAAgB,aAAa;EACtC,EACF,CAAC;EAED,WAAW,IAAI,OAAO,KAAK;EAC3B,OAAO;CACT;CAEA,OAAO,gBAAgB,KAAK;AAC9B"}
+{"version":3,"file":"createTable.cjs","names":["alpineReactivity","flexRender","FlexRender","Alpine"],"sources":["../src/createTable.ts"],"sourcesContent":["import Alpine from 'alpinejs'\nimport { shallow } from '@tanstack/store'\nimport { constructTable } from '@tanstack/table-core'\nimport { FlexRender, flexRender } from './flexRender'\nimport { alpineReactivity } from './reactivity'\nimport type {\n  RowData,\n  Table,\n  TableFeatures,\n  TableOptions,\n  TableState,\n} from '@tanstack/table-core'\n\nexport type AlpineTable<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n> = Table<TFeatures, TData> & {\n  /**\n   * A lower-level helper to render the content of a cell, header, or footer from a render function and its context.\n   */\n  flexRender: typeof flexRender\n\n  /**\n   * A convenience helper to render a cell, header, or footer object. Call from `x-html`, e.g. `FlexRender({ header })`.\n   */\n  FlexRender: typeof FlexRender\n}\n\n/**\n * Creates an Alpine-reactive table instance.\n *\n * Reactivity is bridged through a single version counter that every proxied\n * table read registers as a dependency, so by default ANY state change\n * re-evaluates every Alpine binding that touches the table. Pass a `selector`\n * to gate that: the counter then only bumps when the selected slice of state\n * changes (shallow compare). Use `() => ({})` to opt out of state-driven\n * re-evaluation entirely and handle high-frequency state (e.g. column\n * resizing) with explicit `table.atoms.<slice>.subscribe()` side effects.\n * Options changes (e.g. new `data`) always re-evaluate.\n *\n * @example\n * ```ts\n * const table = createTable(options, (state) => ({ sorting: state.sorting }))\n * ```\n */\nexport function createTable<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n>(\n  tableOptions: TableOptions<TFeatures, TData>,\n  selector?: (state: TableState<TFeatures>) => unknown,\n): AlpineTable<TFeatures, TData> {\n  const mergedOptions: TableOptions<TFeatures, TData> = {\n    ...tableOptions,\n    features: {\n      coreReactivityFeature: alpineReactivity(),\n      ...tableOptions.features,\n    },\n    mergeOptions: (\n      defaultOptions: TableOptions<TFeatures, TData>,\n      newOptions: Partial<TableOptions<TFeatures, TData>>,\n    ) => {\n      return {\n        ...defaultOptions,\n        ...newOptions,\n      }\n    },\n  }\n\n  const table = constructTable(mergedOptions) as unknown as AlpineTable<\n    TFeatures,\n    TData\n  >\n\n  table.flexRender = flexRender\n  table.FlexRender = FlexRender\n\n  const reactivity = Alpine.reactive({ _ver: 0 })\n\n  // With a selector, only bump the version counter (and thereby re-evaluate\n  // table-reading Alpine bindings) when the selected state actually changes.\n  // No selector keeps the previous behavior of re-evaluating on every state\n  // change.\n  let lastSelected = selector ? selector(table.store.state) : undefined\n\n  table.store.subscribe(() => {\n    if (selector) {\n      const nextSelected = selector(table.store.state)\n      if (shallow(lastSelected as any, nextSelected as any)) {\n        return\n      }\n      lastSelected = nextSelected\n    }\n    reactivity._ver++\n  })\n\n  // Reactively sync options when external Alpine-reactive getters change (e.g.\n  // a `get data()` backed by `Alpine.reactive`). Reading the option getters\n  // inside the effect registers the dependencies, so the effect re-runs when\n  // they change and re-applies the live values via `setOptions`.\n  //\n  // `setOptions` writes to the options store, not the state store, so a `data`\n  // (or other option) change does not emit on `table.store` and would not bump\n  // `_ver` on its own. We bump `_ver` here so the template re-pulls derived\n  // APIs like `getRowModel()`, which recompute from the new options. The effect\n  // never reads `_ver`, so writing it does not re-trigger this effect.\n  let initialized = false\n  Alpine.effect(() => {\n    const state = tableOptions.state as Record<string, unknown> | undefined\n    if (state) {\n      for (const key in state) {\n        void state[key]\n      }\n    }\n    void tableOptions.data\n\n    table.setOptions((prev) => ({\n      ...prev,\n      ...tableOptions,\n    }))\n\n    if (initialized) {\n      reactivity._ver++\n    }\n    initialized = true\n  })\n\n  const proxyCache = new WeakMap<object, object>()\n\n  // Cache method wrappers per (target, prop) so repeated reads of the same\n  // function property (e.g. `cell.renderValue` across thousands of cells)\n  // reuse one closure instead of allocating a new one per access.\n  const wrapperCache = new WeakMap<\n    object,\n    Map<PropertyKey, { original: Function; wrapper: Function }>\n  >()\n\n  const toReactiveProxy = <TValue>(value: TValue): TValue => {\n    if (typeof value !== 'object' || value === null) {\n      return value\n    }\n\n    // Built-in exotic objects (Map, Set, Date, etc.) rely on internal slots and\n    // throw \"incompatible receiver\" when their getters/methods run with a Proxy\n    // as the receiver (e.g. `getFacetedUniqueValues().size`). Return them as-is;\n    // the read that produced them already tracked `_ver` at the call site.\n    if (\n      value instanceof Map ||\n      value instanceof Set ||\n      value instanceof WeakMap ||\n      value instanceof WeakSet ||\n      value instanceof Date ||\n      value instanceof RegExp ||\n      value instanceof Promise\n    ) {\n      return value\n    }\n\n    const cachedProxy = proxyCache.get(value)\n    if (cachedProxy) {\n      return cachedProxy as TValue\n    }\n\n    const proxy = new Proxy(value, {\n      get(target, prop, receiver) {\n        if (prop === '__v_skip') {\n          return true\n        }\n\n        const resolvedValue = Reflect.get(target, prop, receiver)\n\n        if (typeof resolvedValue === 'function') {\n          let targetWrappers = wrapperCache.get(target)\n          if (!targetWrappers) {\n            targetWrappers = new Map()\n            wrapperCache.set(target, targetWrappers)\n          }\n          const cached = targetWrappers.get(prop)\n          if (cached && cached.original === resolvedValue) {\n            return cached.wrapper\n          }\n          const wrapper = (...args: Array<unknown>) => {\n            void reactivity._ver\n            return toReactiveProxy(\n              (resolvedValue as Function).apply(target, args),\n            )\n          }\n          targetWrappers.set(prop, { original: resolvedValue, wrapper })\n          return wrapper\n        }\n\n        void reactivity._ver\n        return toReactiveProxy(resolvedValue)\n      },\n    })\n\n    proxyCache.set(value, proxy)\n    return proxy\n  }\n\n  return toReactiveProxy(table)\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AA6CA,SAAgB,YAId,cACA,UAC+B;CAkB/B,MAAM,iDAAuB;EAhB3B,GAAG;EACH,UAAU;GACR,uBAAuBA,oCAAiB;GACxC,GAAG,aAAa;EAClB;EACA,eACE,gBACA,eACG;GACH,OAAO;IACL,GAAG;IACH,GAAG;GACL;EACF;CAGuC,CAAC;CAK1C,MAAM,aAAaC;CACnB,MAAM,aAAaC;CAEnB,MAAM,aAAaC,iBAAO,SAAS,EAAE,MAAM,EAAE,CAAC;CAM9C,IAAI,eAAe,WAAW,SAAS,MAAM,MAAM,KAAK,IAAI;CAE5D,MAAM,MAAM,gBAAgB;EAC1B,IAAI,UAAU;GACZ,MAAM,eAAe,SAAS,MAAM,MAAM,KAAK;GAC/C,iCAAY,cAAqB,YAAmB,GAClD;GAEF,eAAe;EACjB;EACA,WAAW;CACb,CAAC;CAYD,IAAI,cAAc;CAClB,iBAAO,aAAa;EAClB,MAAM,QAAQ,aAAa;EAC3B,IAAI,OACF,KAAK,MAAM,OAAO,OAChB,AAAK,MAAM;EAGf,AAAK,aAAa;EAElB,MAAM,YAAY,UAAU;GAC1B,GAAG;GACH,GAAG;EACL,EAAE;EAEF,IAAI,aACF,WAAW;EAEb,cAAc;CAChB,CAAC;CAED,MAAM,6BAAa,IAAI,QAAwB;CAK/C,MAAM,+BAAe,IAAI,QAGvB;CAEF,MAAM,mBAA2B,UAA0B;EACzD,IAAI,OAAO,UAAU,YAAY,UAAU,MACzC,OAAO;EAOT,IACE,iBAAiB,OACjB,iBAAiB,OACjB,iBAAiB,WACjB,iBAAiB,WACjB,iBAAiB,QACjB,iBAAiB,UACjB,iBAAiB,SAEjB,OAAO;EAGT,MAAM,cAAc,WAAW,IAAI,KAAK;EACxC,IAAI,aACF,OAAO;EAGT,MAAM,QAAQ,IAAI,MAAM,OAAO,EAC7B,IAAI,QAAQ,MAAM,UAAU;GAC1B,IAAI,SAAS,YACX,OAAO;GAGT,MAAM,gBAAgB,QAAQ,IAAI,QAAQ,MAAM,QAAQ;GAExD,IAAI,OAAO,kBAAkB,YAAY;IACvC,IAAI,iBAAiB,aAAa,IAAI,MAAM;IAC5C,IAAI,CAAC,gBAAgB;KACnB,iCAAiB,IAAI,IAAI;KACzB,aAAa,IAAI,QAAQ,cAAc;IACzC;IACA,MAAM,SAAS,eAAe,IAAI,IAAI;IACtC,IAAI,UAAU,OAAO,aAAa,eAChC,OAAO,OAAO;IAEhB,MAAM,WAAW,GAAG,SAAyB;KAC3C,AAAK,WAAW;KAChB,OAAO,gBACJ,cAA2B,MAAM,QAAQ,IAAI,CAChD;IACF;IACA,eAAe,IAAI,MAAM;KAAE,UAAU;KAAe;IAAQ,CAAC;IAC7D,OAAO;GACT;GAEA,AAAK,WAAW;GAChB,OAAO,gBAAgB,aAAa;EACtC,EACF,CAAC;EAED,WAAW,IAAI,OAAO,KAAK;EAC3B,OAAO;CACT;CAEA,OAAO,gBAAgB,KAAK;AAC9B"}

package/dist/createTable.d.cts

@@ -1,5 +1,5 @@
 import { FlexRender, flexRender } from "./flexRender.cjs";
-import { RowData, Table, TableFeatures, TableOptions } from "@tanstack/table-core";
+import { RowData, Table, TableFeatures, TableOptions, TableState } from "@tanstack/table-core";
 
 //#region src/createTable.d.ts
 type AlpineTable<TFeatures extends TableFeatures, TData extends RowData> = Table<TFeatures, TData> & {
@@ -12,7 +12,24 @@ type AlpineTable<TFeatures extends TableFeatures, TData extends RowData> = Table
    */
   FlexRender: typeof FlexRender;
 };
-declare function createTable<TFeatures extends TableFeatures, TData extends RowData>(tableOptions: TableOptions<TFeatures, TData>): AlpineTable<TFeatures, TData>;
+/**
+ * Creates an Alpine-reactive table instance.
+ *
+ * Reactivity is bridged through a single version counter that every proxied
+ * table read registers as a dependency, so by default ANY state change
+ * re-evaluates every Alpine binding that touches the table. Pass a `selector`
+ * to gate that: the counter then only bumps when the selected slice of state
+ * changes (shallow compare). Use `() => ({})` to opt out of state-driven
+ * re-evaluation entirely and handle high-frequency state (e.g. column
+ * resizing) with explicit `table.atoms.<slice>.subscribe()` side effects.
+ * Options changes (e.g. new `data`) always re-evaluate.
+ *
+ * @example
+ * ```ts
+ * const table = createTable(options, (state) => ({ sorting: state.sorting }))
+ * ```
+ */
+declare function createTable<TFeatures extends TableFeatures, TData extends RowData>(tableOptions: TableOptions<TFeatures, TData>, selector?: (state: TableState<TFeatures>) => unknown): AlpineTable<TFeatures, TData>;
 //#endregion
 export { AlpineTable, createTable };
 //# sourceMappingURL=createTable.d.cts.map

package/dist/createTable.d.ts

@@ -1,5 +1,5 @@
 import { FlexRender, flexRender } from "./flexRender.js";
-import { RowData, Table, TableFeatures, TableOptions } from "@tanstack/table-core";
+import { RowData, Table, TableFeatures, TableOptions, TableState } from "@tanstack/table-core";
 
 //#region src/createTable.d.ts
 type AlpineTable<TFeatures extends TableFeatures, TData extends RowData> = Table<TFeatures, TData> & {
@@ -12,7 +12,24 @@ type AlpineTable<TFeatures extends TableFeatures, TData extends RowData> = Table
    */
   FlexRender: typeof FlexRender;
 };
-declare function createTable<TFeatures extends TableFeatures, TData extends RowData>(tableOptions: TableOptions<TFeatures, TData>): AlpineTable<TFeatures, TData>;
+/**
+ * Creates an Alpine-reactive table instance.
+ *
+ * Reactivity is bridged through a single version counter that every proxied
+ * table read registers as a dependency, so by default ANY state change
+ * re-evaluates every Alpine binding that touches the table. Pass a `selector`
+ * to gate that: the counter then only bumps when the selected slice of state
+ * changes (shallow compare). Use `() => ({})` to opt out of state-driven
+ * re-evaluation entirely and handle high-frequency state (e.g. column
+ * resizing) with explicit `table.atoms.<slice>.subscribe()` side effects.
+ * Options changes (e.g. new `data`) always re-evaluate.
+ *
+ * @example
+ * ```ts
+ * const table = createTable(options, (state) => ({ sorting: state.sorting }))
+ * ```
+ */
+declare function createTable<TFeatures extends TableFeatures, TData extends RowData>(tableOptions: TableOptions<TFeatures, TData>, selector?: (state: TableState<TFeatures>) => unknown): AlpineTable<TFeatures, TData>;
 //#endregion
 export { AlpineTable, createTable };
 //# sourceMappingURL=createTable.d.ts.map

package/dist/createTable.js

@@ -2,9 +2,27 @@ import { FlexRender, flexRender } from "./flexRender.js";
 import { alpineReactivity } from "./reactivity.js";
 import { constructTable } from "@tanstack/table-core";
 import Alpine from "alpinejs";
+import { shallow } from "@tanstack/store";
 
 //#region src/createTable.ts
-function createTable(tableOptions) {
+/**
+* Creates an Alpine-reactive table instance.
+*
+* Reactivity is bridged through a single version counter that every proxied
+* table read registers as a dependency, so by default ANY state change
+* re-evaluates every Alpine binding that touches the table. Pass a `selector`
+* to gate that: the counter then only bumps when the selected slice of state
+* changes (shallow compare). Use `() => ({})` to opt out of state-driven
+* re-evaluation entirely and handle high-frequency state (e.g. column
+* resizing) with explicit `table.atoms.<slice>.subscribe()` side effects.
+* Options changes (e.g. new `data`) always re-evaluate.
+*
+* @example
+* ```ts
+* const table = createTable(options, (state) => ({ sorting: state.sorting }))
+* ```
+*/
+function createTable(tableOptions, selector) {
 	const table = constructTable({
 		...tableOptions,
 		features: {
@@ -21,7 +39,13 @@ function createTable(tableOptions) {
 	table.flexRender = flexRender;
 	table.FlexRender = FlexRender;
 	const reactivity = Alpine.reactive({ _ver: 0 });
+	let lastSelected = selector ? selector(table.store.state) : void 0;
 	table.store.subscribe(() => {
+		if (selector) {
+			const nextSelected = selector(table.store.state);
+			if (shallow(lastSelected, nextSelected)) return;
+			lastSelected = nextSelected;
+		}
 		reactivity._ver++;
 	});
 	let initialized = false;
@@ -37,6 +61,7 @@ function createTable(tableOptions) {
 		initialized = true;
 	});
 	const proxyCache = /* @__PURE__ */ new WeakMap();
+	const wrapperCache = /* @__PURE__ */ new WeakMap();
 	const toReactiveProxy = (value) => {
 		if (typeof value !== "object" || value === null) return value;
 		if (value instanceof Map || value instanceof Set || value instanceof WeakMap || value instanceof WeakSet || value instanceof Date || value instanceof RegExp || value instanceof Promise) return value;
@@ -45,10 +70,24 @@ function createTable(tableOptions) {
 		const proxy = new Proxy(value, { get(target, prop, receiver) {
 			if (prop === "__v_skip") return true;
 			const resolvedValue = Reflect.get(target, prop, receiver);
-			if (typeof resolvedValue === "function") return (...args) => {
-				reactivity._ver;
-				return toReactiveProxy(resolvedValue.apply(target, args));
-			};
+			if (typeof resolvedValue === "function") {
+				let targetWrappers = wrapperCache.get(target);
+				if (!targetWrappers) {
+					targetWrappers = /* @__PURE__ */ new Map();
+					wrapperCache.set(target, targetWrappers);
+				}
+				const cached = targetWrappers.get(prop);
+				if (cached && cached.original === resolvedValue) return cached.wrapper;
+				const wrapper = (...args) => {
+					reactivity._ver;
+					return toReactiveProxy(resolvedValue.apply(target, args));
+				};
+				targetWrappers.set(prop, {
+					original: resolvedValue,
+					wrapper
+				});
+				return wrapper;
+			}
 			reactivity._ver;
 			return toReactiveProxy(resolvedValue);
 		} });

package/dist/createTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"createTable.js","names":[],"sources":["../src/createTable.ts"],"sourcesContent":["import Alpine from 'alpinejs'\nimport { constructTable } from '@tanstack/table-core'\nimport { FlexRender, flexRender } from './flexRender'\nimport { alpineReactivity } from './reactivity'\nimport type {\n  RowData,\n  Table,\n  TableFeatures,\n  TableOptions,\n} from '@tanstack/table-core'\n\nexport type AlpineTable<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n> = Table<TFeatures, TData> & {\n  /**\n   * A lower-level helper to render the content of a cell, header, or footer from a render function and its context.\n   */\n  flexRender: typeof flexRender\n\n  /**\n   * A convenience helper to render a cell, header, or footer object. Call from `x-html`, e.g. `FlexRender({ header })`.\n   */\n  FlexRender: typeof FlexRender\n}\n\nexport function createTable<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n>(tableOptions: TableOptions<TFeatures, TData>): AlpineTable<TFeatures, TData> {\n  const mergedOptions: TableOptions<TFeatures, TData> = {\n    ...tableOptions,\n    features: {\n      coreReactivityFeature: alpineReactivity(),\n      ...tableOptions.features,\n    },\n    mergeOptions: (\n      defaultOptions: TableOptions<TFeatures, TData>,\n      newOptions: Partial<TableOptions<TFeatures, TData>>,\n    ) => {\n      return {\n        ...defaultOptions,\n        ...newOptions,\n      }\n    },\n  }\n\n  const table = constructTable(mergedOptions) as unknown as AlpineTable<\n    TFeatures,\n    TData\n  >\n\n  table.flexRender = flexRender\n  table.FlexRender = FlexRender\n\n  const reactivity = Alpine.reactive({ _ver: 0 })\n\n  table.store.subscribe(() => {\n    reactivity._ver++\n  })\n\n  // Reactively sync options when external Alpine-reactive getters change (e.g.\n  // a `get data()` backed by `Alpine.reactive`). Reading the option getters\n  // inside the effect registers the dependencies, so the effect re-runs when\n  // they change and re-applies the live values via `setOptions`.\n  //\n  // `setOptions` writes to the options store, not the state store, so a `data`\n  // (or other option) change does not emit on `table.store` and would not bump\n  // `_ver` on its own. We bump `_ver` here so the template re-pulls derived\n  // APIs like `getRowModel()`, which recompute from the new options. The effect\n  // never reads `_ver`, so writing it does not re-trigger this effect.\n  let initialized = false\n  Alpine.effect(() => {\n    const state = tableOptions.state as Record<string, unknown> | undefined\n    if (state) {\n      for (const key in state) {\n        void state[key]\n      }\n    }\n    void tableOptions.data\n\n    table.setOptions((prev) => ({\n      ...prev,\n      ...tableOptions,\n    }))\n\n    if (initialized) {\n      reactivity._ver++\n    }\n    initialized = true\n  })\n\n  const proxyCache = new WeakMap<object, object>()\n\n  const toReactiveProxy = <TValue>(value: TValue): TValue => {\n    if (typeof value !== 'object' || value === null) {\n      return value\n    }\n\n    // Built-in exotic objects (Map, Set, Date, etc.) rely on internal slots and\n    // throw \"incompatible receiver\" when their getters/methods run with a Proxy\n    // as the receiver (e.g. `getFacetedUniqueValues().size`). Return them as-is;\n    // the read that produced them already tracked `_ver` at the call site.\n    if (\n      value instanceof Map ||\n      value instanceof Set ||\n      value instanceof WeakMap ||\n      value instanceof WeakSet ||\n      value instanceof Date ||\n      value instanceof RegExp ||\n      value instanceof Promise\n    ) {\n      return value\n    }\n\n    const cachedProxy = proxyCache.get(value)\n    if (cachedProxy) {\n      return cachedProxy as TValue\n    }\n\n    const proxy = new Proxy(value, {\n      get(target, prop, receiver) {\n        if (prop === '__v_skip') {\n          return true\n        }\n\n        const resolvedValue = Reflect.get(target, prop, receiver)\n\n        if (typeof resolvedValue === 'function') {\n          return (...args: Array<unknown>) => {\n            void reactivity._ver\n            return toReactiveProxy(\n              (resolvedValue as Function).apply(target, args),\n            )\n          }\n        }\n\n        void reactivity._ver\n        return toReactiveProxy(resolvedValue)\n      },\n    })\n\n    proxyCache.set(value, proxy)\n    return proxy\n  }\n\n  return toReactiveProxy(table)\n}\n"],"mappings":";;;;;;AA0BA,SAAgB,YAGd,cAA6E;CAkB7E,MAAM,QAAQ,eAAe;EAhB3B,GAAG;EACH,UAAU;GACR,uBAAuB,iBAAiB;GACxC,GAAG,aAAa;EAClB;EACA,eACE,gBACA,eACG;GACH,OAAO;IACL,GAAG;IACH,GAAG;GACL;EACF;CAGuC,CAAC;CAK1C,MAAM,aAAa;CACnB,MAAM,aAAa;CAEnB,MAAM,aAAa,OAAO,SAAS,EAAE,MAAM,EAAE,CAAC;CAE9C,MAAM,MAAM,gBAAgB;EAC1B,WAAW;CACb,CAAC;CAYD,IAAI,cAAc;CAClB,OAAO,aAAa;EAClB,MAAM,QAAQ,aAAa;EAC3B,IAAI,OACF,KAAK,MAAM,OAAO,OAChB,AAAK,MAAM;EAGf,AAAK,aAAa;EAElB,MAAM,YAAY,UAAU;GAC1B,GAAG;GACH,GAAG;EACL,EAAE;EAEF,IAAI,aACF,WAAW;EAEb,cAAc;CAChB,CAAC;CAED,MAAM,6BAAa,IAAI,QAAwB;CAE/C,MAAM,mBAA2B,UAA0B;EACzD,IAAI,OAAO,UAAU,YAAY,UAAU,MACzC,OAAO;EAOT,IACE,iBAAiB,OACjB,iBAAiB,OACjB,iBAAiB,WACjB,iBAAiB,WACjB,iBAAiB,QACjB,iBAAiB,UACjB,iBAAiB,SAEjB,OAAO;EAGT,MAAM,cAAc,WAAW,IAAI,KAAK;EACxC,IAAI,aACF,OAAO;EAGT,MAAM,QAAQ,IAAI,MAAM,OAAO,EAC7B,IAAI,QAAQ,MAAM,UAAU;GAC1B,IAAI,SAAS,YACX,OAAO;GAGT,MAAM,gBAAgB,QAAQ,IAAI,QAAQ,MAAM,QAAQ;GAExD,IAAI,OAAO,kBAAkB,YAC3B,QAAQ,GAAG,SAAyB;IAClC,AAAK,WAAW;IAChB,OAAO,gBACJ,cAA2B,MAAM,QAAQ,IAAI,CAChD;GACF;GAGF,AAAK,WAAW;GAChB,OAAO,gBAAgB,aAAa;EACtC,EACF,CAAC;EAED,WAAW,IAAI,OAAO,KAAK;EAC3B,OAAO;CACT;CAEA,OAAO,gBAAgB,KAAK;AAC9B"}
+{"version":3,"file":"createTable.js","names":[],"sources":["../src/createTable.ts"],"sourcesContent":["import Alpine from 'alpinejs'\nimport { shallow } from '@tanstack/store'\nimport { constructTable } from '@tanstack/table-core'\nimport { FlexRender, flexRender } from './flexRender'\nimport { alpineReactivity } from './reactivity'\nimport type {\n  RowData,\n  Table,\n  TableFeatures,\n  TableOptions,\n  TableState,\n} from '@tanstack/table-core'\n\nexport type AlpineTable<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n> = Table<TFeatures, TData> & {\n  /**\n   * A lower-level helper to render the content of a cell, header, or footer from a render function and its context.\n   */\n  flexRender: typeof flexRender\n\n  /**\n   * A convenience helper to render a cell, header, or footer object. Call from `x-html`, e.g. `FlexRender({ header })`.\n   */\n  FlexRender: typeof FlexRender\n}\n\n/**\n * Creates an Alpine-reactive table instance.\n *\n * Reactivity is bridged through a single version counter that every proxied\n * table read registers as a dependency, so by default ANY state change\n * re-evaluates every Alpine binding that touches the table. Pass a `selector`\n * to gate that: the counter then only bumps when the selected slice of state\n * changes (shallow compare). Use `() => ({})` to opt out of state-driven\n * re-evaluation entirely and handle high-frequency state (e.g. column\n * resizing) with explicit `table.atoms.<slice>.subscribe()` side effects.\n * Options changes (e.g. new `data`) always re-evaluate.\n *\n * @example\n * ```ts\n * const table = createTable(options, (state) => ({ sorting: state.sorting }))\n * ```\n */\nexport function createTable<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n>(\n  tableOptions: TableOptions<TFeatures, TData>,\n  selector?: (state: TableState<TFeatures>) => unknown,\n): AlpineTable<TFeatures, TData> {\n  const mergedOptions: TableOptions<TFeatures, TData> = {\n    ...tableOptions,\n    features: {\n      coreReactivityFeature: alpineReactivity(),\n      ...tableOptions.features,\n    },\n    mergeOptions: (\n      defaultOptions: TableOptions<TFeatures, TData>,\n      newOptions: Partial<TableOptions<TFeatures, TData>>,\n    ) => {\n      return {\n        ...defaultOptions,\n        ...newOptions,\n      }\n    },\n  }\n\n  const table = constructTable(mergedOptions) as unknown as AlpineTable<\n    TFeatures,\n    TData\n  >\n\n  table.flexRender = flexRender\n  table.FlexRender = FlexRender\n\n  const reactivity = Alpine.reactive({ _ver: 0 })\n\n  // With a selector, only bump the version counter (and thereby re-evaluate\n  // table-reading Alpine bindings) when the selected state actually changes.\n  // No selector keeps the previous behavior of re-evaluating on every state\n  // change.\n  let lastSelected = selector ? selector(table.store.state) : undefined\n\n  table.store.subscribe(() => {\n    if (selector) {\n      const nextSelected = selector(table.store.state)\n      if (shallow(lastSelected as any, nextSelected as any)) {\n        return\n      }\n      lastSelected = nextSelected\n    }\n    reactivity._ver++\n  })\n\n  // Reactively sync options when external Alpine-reactive getters change (e.g.\n  // a `get data()` backed by `Alpine.reactive`). Reading the option getters\n  // inside the effect registers the dependencies, so the effect re-runs when\n  // they change and re-applies the live values via `setOptions`.\n  //\n  // `setOptions` writes to the options store, not the state store, so a `data`\n  // (or other option) change does not emit on `table.store` and would not bump\n  // `_ver` on its own. We bump `_ver` here so the template re-pulls derived\n  // APIs like `getRowModel()`, which recompute from the new options. The effect\n  // never reads `_ver`, so writing it does not re-trigger this effect.\n  let initialized = false\n  Alpine.effect(() => {\n    const state = tableOptions.state as Record<string, unknown> | undefined\n    if (state) {\n      for (const key in state) {\n        void state[key]\n      }\n    }\n    void tableOptions.data\n\n    table.setOptions((prev) => ({\n      ...prev,\n      ...tableOptions,\n    }))\n\n    if (initialized) {\n      reactivity._ver++\n    }\n    initialized = true\n  })\n\n  const proxyCache = new WeakMap<object, object>()\n\n  // Cache method wrappers per (target, prop) so repeated reads of the same\n  // function property (e.g. `cell.renderValue` across thousands of cells)\n  // reuse one closure instead of allocating a new one per access.\n  const wrapperCache = new WeakMap<\n    object,\n    Map<PropertyKey, { original: Function; wrapper: Function }>\n  >()\n\n  const toReactiveProxy = <TValue>(value: TValue): TValue => {\n    if (typeof value !== 'object' || value === null) {\n      return value\n    }\n\n    // Built-in exotic objects (Map, Set, Date, etc.) rely on internal slots and\n    // throw \"incompatible receiver\" when their getters/methods run with a Proxy\n    // as the receiver (e.g. `getFacetedUniqueValues().size`). Return them as-is;\n    // the read that produced them already tracked `_ver` at the call site.\n    if (\n      value instanceof Map ||\n      value instanceof Set ||\n      value instanceof WeakMap ||\n      value instanceof WeakSet ||\n      value instanceof Date ||\n      value instanceof RegExp ||\n      value instanceof Promise\n    ) {\n      return value\n    }\n\n    const cachedProxy = proxyCache.get(value)\n    if (cachedProxy) {\n      return cachedProxy as TValue\n    }\n\n    const proxy = new Proxy(value, {\n      get(target, prop, receiver) {\n        if (prop === '__v_skip') {\n          return true\n        }\n\n        const resolvedValue = Reflect.get(target, prop, receiver)\n\n        if (typeof resolvedValue === 'function') {\n          let targetWrappers = wrapperCache.get(target)\n          if (!targetWrappers) {\n            targetWrappers = new Map()\n            wrapperCache.set(target, targetWrappers)\n          }\n          const cached = targetWrappers.get(prop)\n          if (cached && cached.original === resolvedValue) {\n            return cached.wrapper\n          }\n          const wrapper = (...args: Array<unknown>) => {\n            void reactivity._ver\n            return toReactiveProxy(\n              (resolvedValue as Function).apply(target, args),\n            )\n          }\n          targetWrappers.set(prop, { original: resolvedValue, wrapper })\n          return wrapper\n        }\n\n        void reactivity._ver\n        return toReactiveProxy(resolvedValue)\n      },\n    })\n\n    proxyCache.set(value, proxy)\n    return proxy\n  }\n\n  return toReactiveProxy(table)\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AA6CA,SAAgB,YAId,cACA,UAC+B;CAkB/B,MAAM,QAAQ,eAAe;EAhB3B,GAAG;EACH,UAAU;GACR,uBAAuB,iBAAiB;GACxC,GAAG,aAAa;EAClB;EACA,eACE,gBACA,eACG;GACH,OAAO;IACL,GAAG;IACH,GAAG;GACL;EACF;CAGuC,CAAC;CAK1C,MAAM,aAAa;CACnB,MAAM,aAAa;CAEnB,MAAM,aAAa,OAAO,SAAS,EAAE,MAAM,EAAE,CAAC;CAM9C,IAAI,eAAe,WAAW,SAAS,MAAM,MAAM,KAAK,IAAI;CAE5D,MAAM,MAAM,gBAAgB;EAC1B,IAAI,UAAU;GACZ,MAAM,eAAe,SAAS,MAAM,MAAM,KAAK;GAC/C,IAAI,QAAQ,cAAqB,YAAmB,GAClD;GAEF,eAAe;EACjB;EACA,WAAW;CACb,CAAC;CAYD,IAAI,cAAc;CAClB,OAAO,aAAa;EAClB,MAAM,QAAQ,aAAa;EAC3B,IAAI,OACF,KAAK,MAAM,OAAO,OAChB,AAAK,MAAM;EAGf,AAAK,aAAa;EAElB,MAAM,YAAY,UAAU;GAC1B,GAAG;GACH,GAAG;EACL,EAAE;EAEF,IAAI,aACF,WAAW;EAEb,cAAc;CAChB,CAAC;CAED,MAAM,6BAAa,IAAI,QAAwB;CAK/C,MAAM,+BAAe,IAAI,QAGvB;CAEF,MAAM,mBAA2B,UAA0B;EACzD,IAAI,OAAO,UAAU,YAAY,UAAU,MACzC,OAAO;EAOT,IACE,iBAAiB,OACjB,iBAAiB,OACjB,iBAAiB,WACjB,iBAAiB,WACjB,iBAAiB,QACjB,iBAAiB,UACjB,iBAAiB,SAEjB,OAAO;EAGT,MAAM,cAAc,WAAW,IAAI,KAAK;EACxC,IAAI,aACF,OAAO;EAGT,MAAM,QAAQ,IAAI,MAAM,OAAO,EAC7B,IAAI,QAAQ,MAAM,UAAU;GAC1B,IAAI,SAAS,YACX,OAAO;GAGT,MAAM,gBAAgB,QAAQ,IAAI,QAAQ,MAAM,QAAQ;GAExD,IAAI,OAAO,kBAAkB,YAAY;IACvC,IAAI,iBAAiB,aAAa,IAAI,MAAM;IAC5C,IAAI,CAAC,gBAAgB;KACnB,iCAAiB,IAAI,IAAI;KACzB,aAAa,IAAI,QAAQ,cAAc;IACzC;IACA,MAAM,SAAS,eAAe,IAAI,IAAI;IACtC,IAAI,UAAU,OAAO,aAAa,eAChC,OAAO,OAAO;IAEhB,MAAM,WAAW,GAAG,SAAyB;KAC3C,AAAK,WAAW;KAChB,OAAO,gBACJ,cAA2B,MAAM,QAAQ,IAAI,CAChD;IACF;IACA,eAAe,IAAI,MAAM;KAAE,UAAU;KAAe;IAAQ,CAAC;IAC7D,OAAO;GACT;GAEA,AAAK,WAAW;GAChB,OAAO,gBAAgB,aAAa;EACtC,EACF,CAAC;EAED,WAAW,IAAI,OAAO,KAAK;EAC3B,OAAO;CACT;CAEA,OAAO,gBAAgB,KAAK;AAC9B"}

package/dist/createTableHook.cjs

@@ -6,11 +6,11 @@ function createTableHook({ ...defaultTableOptions }) {
 	function createAppColumnHelper() {
 		return (0, _tanstack_table_core.createColumnHelper)();
 	}
-	function createAppTable(tableOptions) {
+	function createAppTable(tableOptions, selector) {
 		return require_createTable.createTable({
 			...defaultTableOptions,
 			...tableOptions
-		});
+		}, selector);
 	}
 	return {
 		appFeatures: defaultTableOptions.features,

package/dist/createTableHook.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"createTableHook.cjs","names":["createTable"],"sources":["../src/createTableHook.ts"],"sourcesContent":["import { createColumnHelper as coreCreateColumnHelper } from '@tanstack/table-core'\nimport { createTable } from './createTable'\nimport type { AlpineTable } from './createTable'\nimport type { RowData, TableFeatures, TableOptions } from '@tanstack/table-core'\n\nexport type CreateTableHookOptions<TFeatures extends TableFeatures> = Omit<\n  TableOptions<TFeatures, any>,\n  'columns' | 'data' | 'state'\n>\n\nexport type AppAlpineTable<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n> = AlpineTable<TFeatures, TData>\n\nexport type AppColumnHelper<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n> = ReturnType<typeof coreCreateColumnHelper<TFeatures, TData>>\n\nexport function createTableHook<TFeatures extends TableFeatures>({\n  ...defaultTableOptions\n}: CreateTableHookOptions<TFeatures>) {\n  function createAppColumnHelper<TData extends RowData>(): AppColumnHelper<\n    TFeatures,\n    TData\n  > {\n    return coreCreateColumnHelper<TFeatures, TData>()\n  }\n\n  function createAppTable<TData extends RowData>(\n    tableOptions: Omit<TableOptions<TFeatures, TData>, 'features'>,\n  ): AppAlpineTable<TFeatures, TData> {\n    // Merge default options with provided options (provided takes precedence)\n    const mergedOptions = {\n      ...defaultTableOptions,\n      ...tableOptions,\n    } as TableOptions<TFeatures, TData>\n\n    return createTable<TFeatures, TData>(mergedOptions)\n  }\n\n  return {\n    appFeatures: defaultTableOptions.features as TFeatures,\n    createAppColumnHelper,\n    createAppTable,\n  }\n}\n"],"mappings":";;;;AAoBA,SAAgB,gBAAiD,EAC/D,GAAG,uBACiC;CACpC,SAAS,wBAGP;EACA,oDAAgD;CAClD;CAEA,SAAS,eACP,cACkC;EAOlC,OAAOA,gCAA8B;GAJnC,GAAG;GACH,GAAG;EAG4C,CAAC;CACpD;CAEA,OAAO;EACL,aAAa,oBAAoB;EACjC;EACA;CACF;AACF"}
+{"version":3,"file":"createTableHook.cjs","names":["createTable"],"sources":["../src/createTableHook.ts"],"sourcesContent":["import { createColumnHelper as coreCreateColumnHelper } from '@tanstack/table-core'\nimport { createTable } from './createTable'\nimport type { AlpineTable } from './createTable'\nimport type {\n  RowData,\n  TableFeatures,\n  TableOptions,\n  TableState,\n} from '@tanstack/table-core'\n\nexport type CreateTableHookOptions<TFeatures extends TableFeatures> = Omit<\n  TableOptions<TFeatures, any>,\n  'columns' | 'data' | 'state'\n>\n\nexport type AppAlpineTable<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n> = AlpineTable<TFeatures, TData>\n\nexport type AppColumnHelper<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n> = ReturnType<typeof coreCreateColumnHelper<TFeatures, TData>>\n\nexport function createTableHook<TFeatures extends TableFeatures>({\n  ...defaultTableOptions\n}: CreateTableHookOptions<TFeatures>) {\n  function createAppColumnHelper<TData extends RowData>(): AppColumnHelper<\n    TFeatures,\n    TData\n  > {\n    return coreCreateColumnHelper<TFeatures, TData>()\n  }\n\n  function createAppTable<TData extends RowData>(\n    tableOptions: Omit<TableOptions<TFeatures, TData>, 'features'>,\n    selector?: (state: TableState<TFeatures>) => unknown,\n  ): AppAlpineTable<TFeatures, TData> {\n    // Merge default options with provided options (provided takes precedence)\n    const mergedOptions = {\n      ...defaultTableOptions,\n      ...tableOptions,\n    } as TableOptions<TFeatures, TData>\n\n    return createTable<TFeatures, TData>(mergedOptions, selector)\n  }\n\n  return {\n    appFeatures: defaultTableOptions.features as TFeatures,\n    createAppColumnHelper,\n    createAppTable,\n  }\n}\n"],"mappings":";;;;AAyBA,SAAgB,gBAAiD,EAC/D,GAAG,uBACiC;CACpC,SAAS,wBAGP;EACA,oDAAgD;CAClD;CAEA,SAAS,eACP,cACA,UACkC;EAOlC,OAAOA,gCAA8B;GAJnC,GAAG;GACH,GAAG;EAG4C,GAAG,QAAQ;CAC9D;CAEA,OAAO;EACL,aAAa,oBAAoB;EACjC;EACA;CACF;AACF"}

package/dist/createTableHook.d.cts

@@ -1,5 +1,5 @@
 import { AlpineTable } from "./createTable.cjs";
-import { RowData, TableFeatures, TableOptions, createColumnHelper } from "@tanstack/table-core";
+import { RowData, TableFeatures, TableOptions, TableState, createColumnHelper } from "@tanstack/table-core";
 
 //#region src/createTableHook.d.ts
 type CreateTableHookOptions<TFeatures extends TableFeatures> = Omit<TableOptions<TFeatures, any>, 'columns' | 'data' | 'state'>;
@@ -10,7 +10,7 @@ declare function createTableHook<TFeatures extends TableFeatures>({
 }: CreateTableHookOptions<TFeatures>): {
   appFeatures: TFeatures;
   createAppColumnHelper: <TData extends RowData>() => AppColumnHelper<TFeatures, TData>;
-  createAppTable: <TData extends RowData>(tableOptions: Omit<TableOptions<TFeatures, TData>, "features">) => AppAlpineTable<TFeatures, TData>;
+  createAppTable: <TData extends RowData>(tableOptions: Omit<TableOptions<TFeatures, TData>, "features">, selector?: (state: TableState<TFeatures>) => unknown) => AppAlpineTable<TFeatures, TData>;
 };
 //#endregion
 export { AppAlpineTable, AppColumnHelper, CreateTableHookOptions, createTableHook };

package/dist/createTableHook.d.ts

@@ -1,5 +1,5 @@
 import { AlpineTable } from "./createTable.js";
-import { RowData, TableFeatures, TableOptions, createColumnHelper } from "@tanstack/table-core";
+import { RowData, TableFeatures, TableOptions, TableState, createColumnHelper } from "@tanstack/table-core";
 
 //#region src/createTableHook.d.ts
 type CreateTableHookOptions<TFeatures extends TableFeatures> = Omit<TableOptions<TFeatures, any>, 'columns' | 'data' | 'state'>;
@@ -10,7 +10,7 @@ declare function createTableHook<TFeatures extends TableFeatures>({
 }: CreateTableHookOptions<TFeatures>): {
   appFeatures: TFeatures;
   createAppColumnHelper: <TData extends RowData>() => AppColumnHelper<TFeatures, TData>;
-  createAppTable: <TData extends RowData>(tableOptions: Omit<TableOptions<TFeatures, TData>, "features">) => AppAlpineTable<TFeatures, TData>;
+  createAppTable: <TData extends RowData>(tableOptions: Omit<TableOptions<TFeatures, TData>, "features">, selector?: (state: TableState<TFeatures>) => unknown) => AppAlpineTable<TFeatures, TData>;
 };
 //#endregion
 export { AppAlpineTable, AppColumnHelper, CreateTableHookOptions, createTableHook };

package/dist/createTableHook.js

@@ -6,11 +6,11 @@ function createTableHook({ ...defaultTableOptions }) {
 	function createAppColumnHelper() {
 		return createColumnHelper();
 	}
-	function createAppTable(tableOptions) {
+	function createAppTable(tableOptions, selector) {
 		return createTable({
 			...defaultTableOptions,
 			...tableOptions
-		});
+		}, selector);
 	}
 	return {
 		appFeatures: defaultTableOptions.features,

package/dist/createTableHook.js.map

@@ -1 +1 @@
-{"version":3,"file":"createTableHook.js","names":["coreCreateColumnHelper"],"sources":["../src/createTableHook.ts"],"sourcesContent":["import { createColumnHelper as coreCreateColumnHelper } from '@tanstack/table-core'\nimport { createTable } from './createTable'\nimport type { AlpineTable } from './createTable'\nimport type { RowData, TableFeatures, TableOptions } from '@tanstack/table-core'\n\nexport type CreateTableHookOptions<TFeatures extends TableFeatures> = Omit<\n  TableOptions<TFeatures, any>,\n  'columns' | 'data' | 'state'\n>\n\nexport type AppAlpineTable<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n> = AlpineTable<TFeatures, TData>\n\nexport type AppColumnHelper<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n> = ReturnType<typeof coreCreateColumnHelper<TFeatures, TData>>\n\nexport function createTableHook<TFeatures extends TableFeatures>({\n  ...defaultTableOptions\n}: CreateTableHookOptions<TFeatures>) {\n  function createAppColumnHelper<TData extends RowData>(): AppColumnHelper<\n    TFeatures,\n    TData\n  > {\n    return coreCreateColumnHelper<TFeatures, TData>()\n  }\n\n  function createAppTable<TData extends RowData>(\n    tableOptions: Omit<TableOptions<TFeatures, TData>, 'features'>,\n  ): AppAlpineTable<TFeatures, TData> {\n    // Merge default options with provided options (provided takes precedence)\n    const mergedOptions = {\n      ...defaultTableOptions,\n      ...tableOptions,\n    } as TableOptions<TFeatures, TData>\n\n    return createTable<TFeatures, TData>(mergedOptions)\n  }\n\n  return {\n    appFeatures: defaultTableOptions.features as TFeatures,\n    createAppColumnHelper,\n    createAppTable,\n  }\n}\n"],"mappings":";;;;AAoBA,SAAgB,gBAAiD,EAC/D,GAAG,uBACiC;CACpC,SAAS,wBAGP;EACA,OAAOA,mBAAyC;CAClD;CAEA,SAAS,eACP,cACkC;EAOlC,OAAO,YAA8B;GAJnC,GAAG;GACH,GAAG;EAG4C,CAAC;CACpD;CAEA,OAAO;EACL,aAAa,oBAAoB;EACjC;EACA;CACF;AACF"}
+{"version":3,"file":"createTableHook.js","names":["coreCreateColumnHelper"],"sources":["../src/createTableHook.ts"],"sourcesContent":["import { createColumnHelper as coreCreateColumnHelper } from '@tanstack/table-core'\nimport { createTable } from './createTable'\nimport type { AlpineTable } from './createTable'\nimport type {\n  RowData,\n  TableFeatures,\n  TableOptions,\n  TableState,\n} from '@tanstack/table-core'\n\nexport type CreateTableHookOptions<TFeatures extends TableFeatures> = Omit<\n  TableOptions<TFeatures, any>,\n  'columns' | 'data' | 'state'\n>\n\nexport type AppAlpineTable<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n> = AlpineTable<TFeatures, TData>\n\nexport type AppColumnHelper<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n> = ReturnType<typeof coreCreateColumnHelper<TFeatures, TData>>\n\nexport function createTableHook<TFeatures extends TableFeatures>({\n  ...defaultTableOptions\n}: CreateTableHookOptions<TFeatures>) {\n  function createAppColumnHelper<TData extends RowData>(): AppColumnHelper<\n    TFeatures,\n    TData\n  > {\n    return coreCreateColumnHelper<TFeatures, TData>()\n  }\n\n  function createAppTable<TData extends RowData>(\n    tableOptions: Omit<TableOptions<TFeatures, TData>, 'features'>,\n    selector?: (state: TableState<TFeatures>) => unknown,\n  ): AppAlpineTable<TFeatures, TData> {\n    // Merge default options with provided options (provided takes precedence)\n    const mergedOptions = {\n      ...defaultTableOptions,\n      ...tableOptions,\n    } as TableOptions<TFeatures, TData>\n\n    return createTable<TFeatures, TData>(mergedOptions, selector)\n  }\n\n  return {\n    appFeatures: defaultTableOptions.features as TFeatures,\n    createAppColumnHelper,\n    createAppTable,\n  }\n}\n"],"mappings":";;;;AAyBA,SAAgB,gBAAiD,EAC/D,GAAG,uBACiC;CACpC,SAAS,wBAGP;EACA,OAAOA,mBAAyC;CAClD;CAEA,SAAS,eACP,cACA,UACkC;EAOlC,OAAO,YAA8B;GAJnC,GAAG;GACH,GAAG;EAG4C,GAAG,QAAQ;CAC9D;CAEA,OAAO;EACL,aAAa,oBAAoB;EACjC;EACA;CACF;AACF"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/alpine-table",
-  "version": "9.0.0-beta.25",
+  "version": "9.0.0-beta.27",
   "description": "Headless UI for building powerful tables & datagrids for Alpine.",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -49,7 +49,7 @@
   ],
   "dependencies": {
     "@tanstack/store": "^0.11.0",
-    "@tanstack/table-core": "9.0.0-beta.23"
+    "@tanstack/table-core": "9.0.0-beta.27"
   },
   "devDependencies": {
     "@types/alpinejs": "^3.13.11",

package/src/createTable.ts

@@ -1,4 +1,5 @@
 import Alpine from 'alpinejs'
+import { shallow } from '@tanstack/store'
 import { constructTable } from '@tanstack/table-core'
 import { FlexRender, flexRender } from './flexRender'
 import { alpineReactivity } from './reactivity'
@@ -7,6 +8,7 @@ import type {
   Table,
   TableFeatures,
   TableOptions,
+  TableState,
 } from '@tanstack/table-core'
 
 export type AlpineTable<
@@ -24,10 +26,30 @@ export type AlpineTable<
   FlexRender: typeof FlexRender
 }
 
+/**
+ * Creates an Alpine-reactive table instance.
+ *
+ * Reactivity is bridged through a single version counter that every proxied
+ * table read registers as a dependency, so by default ANY state change
+ * re-evaluates every Alpine binding that touches the table. Pass a `selector`
+ * to gate that: the counter then only bumps when the selected slice of state
+ * changes (shallow compare). Use `() => ({})` to opt out of state-driven
+ * re-evaluation entirely and handle high-frequency state (e.g. column
+ * resizing) with explicit `table.atoms.<slice>.subscribe()` side effects.
+ * Options changes (e.g. new `data`) always re-evaluate.
+ *
+ * @example
+ * ```ts
+ * const table = createTable(options, (state) => ({ sorting: state.sorting }))
+ * ```
+ */
 export function createTable<
   TFeatures extends TableFeatures,
   TData extends RowData,
->(tableOptions: TableOptions<TFeatures, TData>): AlpineTable<TFeatures, TData> {
+>(
+  tableOptions: TableOptions<TFeatures, TData>,
+  selector?: (state: TableState<TFeatures>) => unknown,
+): AlpineTable<TFeatures, TData> {
   const mergedOptions: TableOptions<TFeatures, TData> = {
     ...tableOptions,
     features: {
@@ -55,7 +77,20 @@ export function createTable<
 
   const reactivity = Alpine.reactive({ _ver: 0 })
 
+  // With a selector, only bump the version counter (and thereby re-evaluate
+  // table-reading Alpine bindings) when the selected state actually changes.
+  // No selector keeps the previous behavior of re-evaluating on every state
+  // change.
+  let lastSelected = selector ? selector(table.store.state) : undefined
+
   table.store.subscribe(() => {
+    if (selector) {
+      const nextSelected = selector(table.store.state)
+      if (shallow(lastSelected as any, nextSelected as any)) {
+        return
+      }
+      lastSelected = nextSelected
+    }
     reactivity._ver++
   })
 
@@ -92,6 +127,14 @@ export function createTable<
 
   const proxyCache = new WeakMap<object, object>()
 
+  // Cache method wrappers per (target, prop) so repeated reads of the same
+  // function property (e.g. `cell.renderValue` across thousands of cells)
+  // reuse one closure instead of allocating a new one per access.
+  const wrapperCache = new WeakMap<
+    object,
+    Map<PropertyKey, { original: Function; wrapper: Function }>
+  >()
+
   const toReactiveProxy = <TValue>(value: TValue): TValue => {
     if (typeof value !== 'object' || value === null) {
       return value
@@ -127,12 +170,23 @@ export function createTable<
         const resolvedValue = Reflect.get(target, prop, receiver)
 
         if (typeof resolvedValue === 'function') {
-          return (...args: Array<unknown>) => {
+          let targetWrappers = wrapperCache.get(target)
+          if (!targetWrappers) {
+            targetWrappers = new Map()
+            wrapperCache.set(target, targetWrappers)
+          }
+          const cached = targetWrappers.get(prop)
+          if (cached && cached.original === resolvedValue) {
+            return cached.wrapper
+          }
+          const wrapper = (...args: Array<unknown>) => {
             void reactivity._ver
             return toReactiveProxy(
               (resolvedValue as Function).apply(target, args),
             )
           }
+          targetWrappers.set(prop, { original: resolvedValue, wrapper })
+          return wrapper
         }
 
         void reactivity._ver

package/src/createTableHook.ts

@@ -1,7 +1,12 @@
 import { createColumnHelper as coreCreateColumnHelper } from '@tanstack/table-core'
 import { createTable } from './createTable'
 import type { AlpineTable } from './createTable'
-import type { RowData, TableFeatures, TableOptions } from '@tanstack/table-core'
+import type {
+  RowData,
+  TableFeatures,
+  TableOptions,
+  TableState,
+} from '@tanstack/table-core'
 
 export type CreateTableHookOptions<TFeatures extends TableFeatures> = Omit<
   TableOptions<TFeatures, any>,
@@ -30,6 +35,7 @@ export function createTableHook<TFeatures extends TableFeatures>({
 
   function createAppTable<TData extends RowData>(
     tableOptions: Omit<TableOptions<TFeatures, TData>, 'features'>,
+    selector?: (state: TableState<TFeatures>) => unknown,
   ): AppAlpineTable<TFeatures, TData> {
     // Merge default options with provided options (provided takes precedence)
     const mergedOptions = {
@@ -37,7 +43,7 @@ export function createTableHook<TFeatures extends TableFeatures>({
       ...tableOptions,
     } as TableOptions<TFeatures, TData>
 
-    return createTable<TFeatures, TData>(mergedOptions)
+    return createTable<TFeatures, TData>(mergedOptions, selector)
   }
 
   return {