@tanstack/alpine-table 9.0.0-beta.0

package/README.md

@@ -0,0 +1,128 @@
+<div align="center">
+  <img src="./media/header_table.png" alt="TanStack Table">
+</div>
+
+<br />
+
+<div align="center">
+<a href="https://npmjs.com/package/@tanstack/react-table" target="\_parent">
+  <img alt="npm downloads" src="https://img.shields.io/npm/dm/@tanstack/react-table.svg" />
+</a>
+<a href="https://github.com/tanstack/table" target="\_parent">
+  <img alt="github stars" src="https://img.shields.io/github/stars/tanstack/react-table.svg?style=social&label=Star" />
+</a>
+<a href="https://bundlephobia.com/result?p=@tanstack/react-table@latest" target="\_parent">
+  <img alt="bundle size" src="https://badgen.net/bundlephobia/minzip/@tanstack/react-table@latest" />
+</a>
+</div>
+
+<div align="center">
+<a href="#badge">
+  <img alt="semantic-release" src="https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg">
+</a>
+<a href="https://bestofjs.org/projects/tanstack-table"><img alt="Best of JS" src="https://img.shields.io/endpoint?url=https://bestofjs-serverless.now.sh/api/project-badge?fullName=TanStack%2Ftable%26since=daily" /></a>
+  <a href="https://twitter.com/tan_stack"><img src="https://img.shields.io/twitter/follow/tan_stack.svg?style=social" alt="Follow @TanStack"/></a>
+</div>
+
+### [Become a Sponsor!](https://github.com/sponsors/tannerlinsley/)
+
+</div>
+
+# TanStack Table
+
+> [!NOTE]
+> You may know TanStack Table by the adapter names:
+>
+> - [Angular Table](https://tanstack.com/table/alpha/docs/framework/angular/angular-table)
+> - [Lit Table](https://tanstack.com/table/alpha/docs/framework/lit/lit-table)
+> - [React Table](https://tanstack.com/table/alpha/docs/framework/react/react-table)
+> - [Solid Table](https://tanstack.com/table/alpha/docs/framework/solid/solid-table)
+> - [Svelte Table](https://tanstack.com/table/alpha/docs/framework/svelte/svelte-table)
+> - [Vue Table](https://tanstack.com/table/alpha/docs/framework/vue/vue-table)
+> - [Alpine Table](https://tanstack.com/table/alpha/docs/framework/alpine/alpine-table)
+
+A headless table library for building powerful datagrids with full control over markup, styles, and behavior.
+
+- Framework‑agnostic core with bindings for React, Vue & Solid
+- 100% customizable — bring your own UI, components, and styles
+- Sorting, filtering, grouping, aggregation & row selection
+- Lightweight, virtualizable & server‑side friendly
+
+### <a href="https://tanstack.com/table">Read the Docs →</a>
+
+## Using an AI Coding Agent?
+
+TanStack Table ships [TanStack Intent](https://github.com/TanStack/intent) skills inside each adapter package. After installing the library, run:
+
+```sh
+npx @tanstack/intent@latest install
+```
+
+to add skill-loading guidance for your agent (Claude Code, Cursor, Copilot, etc.). The same CLI also exposes `intent list` to browse available skills and `intent load <skill>` to print one for inspection. Skills version with the library — your agent gets guidance that matches the version of `@tanstack/<framework>-table` you installed. Only available for v9 and above.
+
+## Get Involved
+
+- We welcome issues and pull requests!
+- Participate in [GitHub discussions](https://github.com/TanStack/table/discussions)
+- Chat with the community on [Discord](https://discord.com/invite/WrRKjPJ)
+- See [CONTRIBUTING.md](./CONTRIBUTING.md) for setup instructions
+
+## Partners
+
+<table align="center">
+  <tr>
+    <td>
+        <a href="https://www.coderabbit.ai/?via=tanstack&dub_id=aCcEEdAOqqutX6OS">
+			<picture>
+			  <source media="(prefers-color-scheme: dark)" srcset="https://tanstack.com/assets/coderabbit-dark-CMcuvjEy.svg" height="40" />
+			  <source media="(prefers-color-scheme: light)" srcset="https://tanstack.com/assets/coderabbit-light-DVMJ2jHi.svg" height="40" />
+			  <img src="https://tanstack.com/assets/coderabbit-light-DVMJ2jHi.svg" height="40" alt="CodeRabbit" />
+			</picture>        
+		</a>
+    </td>
+    <td padding="20">
+      <a href="https://www.cloudflare.com?utm_source=tanstack">
+         <picture>
+		  <source media="(prefers-color-scheme: dark)" srcset="https://tanstack.com/assets/cloudflare-white-DQDB7UaL.svg" height="60" />
+		  <source media="(prefers-color-scheme: light)" srcset="https://tanstack.com/assets/cloudflare-black-CPufaW0B.svg" height="60" />
+		  <img src="https://tanstack.com/assets/cloudflare-black-CPufaW0B.svg" height="60" alt="Cloudflare" />
+		</picture>
+      </a>
+    </td>
+    <td>
+     <a href="https://ag-grid.com/react-data-grid/?utm_source=reacttable&utm_campaign=githubreacttable" style="display: flex; align-items: center; border: none;">
+       <picture>
+        <source media="(prefers-color-scheme: dark)" srcset="./media/ag-grid-dark.svg" height="40" />
+        <source media="(prefers-color-scheme: light)" srcset="./media/ag-grid-light.svg" height="40" />
+        <img src="https://raw.githubusercontent.com/tannerlinsley/files/master/partners/ag-grid.svg" height="60" alt="AG Grid" />
+      </picture>
+      </a>
+    </td>
+  </tr>
+</table>
+
+<div align="center">
+<img src="./media/partner_logo.svg" alt="Table & you?" height="65">
+<p>
+We're looking for TanStack Table Partners to join our mission! Partner with us to push the boundaries of TanStack Table and build amazing things together.
+</p>
+<a href="mailto:partners@tanstack.com?subject=TanStack Table Partnership"><b>LET'S CHAT</b></a>
+</div>
+
+## Explore the TanStack Ecosystem
+
+- <a href="https://github.com/tanstack/config"><b>TanStack Config</b></a> – Tooling for JS/TS packages
+- <a href="https://github.com/tanstack/db"><b>TanStack DB</b></a> – Reactive sync client store
+- <a href="https://github.com/tanstack/devtools"><b>TanStack DevTools</b></a> – Unified devtools panel
+- <a href="https://github.com/tanstack/form"><b>TanStack Form</b></a> – Type‑safe form state
+- <a href="https://github.com/tanstack/pacer"><b>TanStack Pacer</b></a> – Debouncing, throttling, batching <br/>
+- <a href="https://github.com/tanstack/query"><b>TanStack Query</b></a> – Async state & caching
+- <a href="https://github.com/tanstack/ranger"><b>TanStack Ranger</b></a> – Range & slider primitives
+- <a href="https://github.com/tanstack/router"><b>TanStack Router</b></a> – Type‑safe routing, caching & URL state
+- <a href="https://github.com/tanstack/router"><b>TanStack Start</b></a> – Full‑stack SSR & streaming
+- <a href="https://github.com/tanstack/store"><b>TanStack Store</b></a> – Reactive data store
+- <a href="https://github.com/tanstack/virtual"><b>TanStack Virtual</b></a> – Virtualized rendering
+
+… and more at <a href="https://tanstack.com"><b>TanStack.com »</b></a>
+
+<!-- USE THE FORCE LUKE -->

package/dist/_virtual/_rolldown/runtime.cjs

@@ -0,0 +1,29 @@
+//#region \0rolldown/runtime.js
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") {
+		for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
+			key = keys[i];
+			if (!__hasOwnProp.call(to, key) && key !== except) {
+				__defProp(to, key, {
+					get: ((k) => from[k]).bind(null, key),
+					enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+				});
+			}
+		}
+	}
+	return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
+
+//#endregion
+
+exports.__toESM = __toESM;

package/dist/createTable.cjs

@@ -0,0 +1,65 @@
+const require_runtime = require('./_virtual/_rolldown/runtime.cjs');
+const require_flexRender = require('./flexRender.cjs');
+const require_reactivity = require('./reactivity.cjs');
+let _tanstack_table_core = require("@tanstack/table-core");
+let alpinejs = require("alpinejs");
+alpinejs = require_runtime.__toESM(alpinejs, 1);
+
+//#region src/createTable.ts
+function createTable(tableOptions) {
+	const table = (0, _tanstack_table_core.constructTable)({
+		...tableOptions,
+		features: {
+			coreReactivityFeature: require_reactivity.alpineReactivity(),
+			...tableOptions.features
+		},
+		mergeOptions: (defaultOptions, newOptions) => {
+			return {
+				...defaultOptions,
+				...newOptions
+			};
+		}
+	});
+	table.flexRender = require_flexRender.flexRender;
+	table.FlexRender = require_flexRender.FlexRender;
+	const reactivity = alpinejs.default.reactive({ _ver: 0 });
+	table.store.subscribe(() => {
+		reactivity._ver++;
+	});
+	let initialized = false;
+	alpinejs.default.effect(() => {
+		const state = tableOptions.state;
+		if (state) for (const key in state) state[key];
+		tableOptions.data;
+		table.setOptions((prev) => ({
+			...prev,
+			...tableOptions
+		}));
+		if (initialized) reactivity._ver++;
+		initialized = true;
+	});
+	const proxyCache = /* @__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;
+		const cachedProxy = proxyCache.get(value);
+		if (cachedProxy) return cachedProxy;
+		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));
+			};
+			reactivity._ver;
+			return toReactiveProxy(resolvedValue);
+		} });
+		proxyCache.set(value, proxy);
+		return proxy;
+	};
+	return toReactiveProxy(table);
+}
+
+//#endregion
+exports.createTable = createTable;
+//# sourceMappingURL=createTable.cjs.map

package/dist/createTable.cjs.map

@@ -0,0 +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"}

package/dist/createTable.d.cts

@@ -0,0 +1,18 @@
+import { FlexRender, flexRender } from "./flexRender.cjs";
+import { RowData, Table, TableFeatures, TableOptions } from "@tanstack/table-core";
+
+//#region src/createTable.d.ts
+type AlpineTable<TFeatures extends TableFeatures, TData extends RowData> = Table<TFeatures, TData> & {
+  /**
+   * A lower-level helper to render the content of a cell, header, or footer from a render function and its context.
+   */
+  flexRender: typeof flexRender;
+  /**
+   * A convenience helper to render a cell, header, or footer object. Call from `x-html`, e.g. `FlexRender({ header })`.
+   */
+  FlexRender: typeof FlexRender;
+};
+declare function createTable<TFeatures extends TableFeatures, TData extends RowData>(tableOptions: TableOptions<TFeatures, TData>): AlpineTable<TFeatures, TData>;
+//#endregion
+export { AlpineTable, createTable };
+//# sourceMappingURL=createTable.d.cts.map

package/dist/createTable.d.ts

@@ -0,0 +1,18 @@
+import { FlexRender, flexRender } from "./flexRender.js";
+import { RowData, Table, TableFeatures, TableOptions } from "@tanstack/table-core";
+
+//#region src/createTable.d.ts
+type AlpineTable<TFeatures extends TableFeatures, TData extends RowData> = Table<TFeatures, TData> & {
+  /**
+   * A lower-level helper to render the content of a cell, header, or footer from a render function and its context.
+   */
+  flexRender: typeof flexRender;
+  /**
+   * A convenience helper to render a cell, header, or footer object. Call from `x-html`, e.g. `FlexRender({ header })`.
+   */
+  FlexRender: typeof FlexRender;
+};
+declare function createTable<TFeatures extends TableFeatures, TData extends RowData>(tableOptions: TableOptions<TFeatures, TData>): AlpineTable<TFeatures, TData>;
+//#endregion
+export { AlpineTable, createTable };
+//# sourceMappingURL=createTable.d.ts.map

package/dist/createTable.js

@@ -0,0 +1,63 @@
+import { FlexRender, flexRender } from "./flexRender.js";
+import { alpineReactivity } from "./reactivity.js";
+import { constructTable } from "@tanstack/table-core";
+import Alpine from "alpinejs";
+
+//#region src/createTable.ts
+function createTable(tableOptions) {
+	const table = constructTable({
+		...tableOptions,
+		features: {
+			coreReactivityFeature: alpineReactivity(),
+			...tableOptions.features
+		},
+		mergeOptions: (defaultOptions, newOptions) => {
+			return {
+				...defaultOptions,
+				...newOptions
+			};
+		}
+	});
+	table.flexRender = flexRender;
+	table.FlexRender = FlexRender;
+	const reactivity = Alpine.reactive({ _ver: 0 });
+	table.store.subscribe(() => {
+		reactivity._ver++;
+	});
+	let initialized = false;
+	Alpine.effect(() => {
+		const state = tableOptions.state;
+		if (state) for (const key in state) state[key];
+		tableOptions.data;
+		table.setOptions((prev) => ({
+			...prev,
+			...tableOptions
+		}));
+		if (initialized) reactivity._ver++;
+		initialized = true;
+	});
+	const proxyCache = /* @__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;
+		const cachedProxy = proxyCache.get(value);
+		if (cachedProxy) return cachedProxy;
+		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));
+			};
+			reactivity._ver;
+			return toReactiveProxy(resolvedValue);
+		} });
+		proxyCache.set(value, proxy);
+		return proxy;
+	};
+	return toReactiveProxy(table);
+}
+
+//#endregion
+export { createTable };
+//# sourceMappingURL=createTable.js.map

package/dist/createTable.js.map

@@ -0,0 +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"}

package/dist/createTableHook.cjs

@@ -0,0 +1,24 @@
+const require_createTable = require('./createTable.cjs');
+let _tanstack_table_core = require("@tanstack/table-core");
+
+//#region src/createTableHook.ts
+function createTableHook({ ...defaultTableOptions }) {
+	function createAppColumnHelper() {
+		return (0, _tanstack_table_core.createColumnHelper)();
+	}
+	function createAppTable(tableOptions) {
+		return require_createTable.createTable({
+			...defaultTableOptions,
+			...tableOptions
+		});
+	}
+	return {
+		appFeatures: defaultTableOptions.features,
+		createAppColumnHelper,
+		createAppTable
+	};
+}
+
+//#endregion
+exports.createTableHook = createTableHook;
+//# sourceMappingURL=createTableHook.cjs.map

package/dist/createTableHook.cjs.map

@@ -0,0 +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"}

package/dist/createTableHook.d.cts

@@ -0,0 +1,17 @@
+import { AlpineTable } from "./createTable.cjs";
+import { RowData, TableFeatures, TableOptions, createColumnHelper } from "@tanstack/table-core";
+
+//#region src/createTableHook.d.ts
+type CreateTableHookOptions<TFeatures extends TableFeatures> = Omit<TableOptions<TFeatures, any>, 'columns' | 'data' | 'state'>;
+type AppAlpineTable<TFeatures extends TableFeatures, TData extends RowData> = AlpineTable<TFeatures, TData>;
+type AppColumnHelper<TFeatures extends TableFeatures, TData extends RowData> = ReturnType<typeof createColumnHelper<TFeatures, TData>>;
+declare function createTableHook<TFeatures extends TableFeatures>({
+  ...defaultTableOptions
+}: CreateTableHookOptions<TFeatures>): {
+  appFeatures: TFeatures;
+  createAppColumnHelper: <TData extends RowData>() => AppColumnHelper<TFeatures, TData>;
+  createAppTable: <TData extends RowData>(tableOptions: Omit<TableOptions<TFeatures, TData>, "features">) => AppAlpineTable<TFeatures, TData>;
+};
+//#endregion
+export { AppAlpineTable, AppColumnHelper, CreateTableHookOptions, createTableHook };
+//# sourceMappingURL=createTableHook.d.cts.map

package/dist/createTableHook.d.ts

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

package/dist/createTableHook.js

@@ -0,0 +1,24 @@
+import { createTable } from "./createTable.js";
+import { createColumnHelper } from "@tanstack/table-core";
+
+//#region src/createTableHook.ts
+function createTableHook({ ...defaultTableOptions }) {
+	function createAppColumnHelper() {
+		return createColumnHelper();
+	}
+	function createAppTable(tableOptions) {
+		return createTable({
+			...defaultTableOptions,
+			...tableOptions
+		});
+	}
+	return {
+		appFeatures: defaultTableOptions.features,
+		createAppColumnHelper,
+		createAppTable
+	};
+}
+
+//#endregion
+export { createTableHook };
+//# sourceMappingURL=createTableHook.js.map

package/dist/createTableHook.js.map

@@ -0,0 +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"}

package/dist/flex-render.cjs

@@ -0,0 +1,5 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+const require_flexRender = require('./flexRender.cjs');
+
+exports.FlexRender = require_flexRender.FlexRender;
+exports.flexRender = require_flexRender.flexRender;

package/dist/flex-render.d.cts

@@ -0,0 +1,2 @@
+import { FlexRender, FlexRenderProps, flexRender } from "./flexRender.cjs";
+export { FlexRender, FlexRenderProps, flexRender };

package/dist/flex-render.d.ts

@@ -0,0 +1,2 @@
+import { FlexRender, FlexRenderProps, flexRender } from "./flexRender.js";
+export { FlexRender, FlexRenderProps, flexRender };

package/dist/flex-render.js

@@ -0,0 +1,3 @@
+import { FlexRender, flexRender } from "./flexRender.js";
+
+export { FlexRender, flexRender };

package/dist/flexRender.cjs

@@ -0,0 +1,40 @@
+
+//#region src/flexRender.ts
+/**
+* Renders an Alpine table value with the provided context props.
+*
+* Use this lower-level helper for custom header, cell, or footer renderers when
+* you already have the render function and context. `FlexRender` is the
+* convenience wrapper for table cell/header/footer objects. Renderers typically
+* return a string of markup that you render into the DOM with `x-html`.
+*
+* @example
+* ```ts
+* flexRender(cell.column.columnDef.cell, cell.getContext())
+* ```
+*/
+function flexRender(render, props) {
+	if (typeof render === "function") return render(props);
+	return render;
+}
+/**
+* Simplified wrapper of `flexRender`. Use this utility function to render headers, cells, or footers with custom markup.
+* Only one prop (`cell`, `header`, or `footer`) may be passed.
+* @example
+* ```html
+* <th x-html="FlexRender({ header })"></th>
+* <td x-html="FlexRender({ cell })"></td>
+* <th x-html="FlexRender({ footer: header })"></th>
+* ```
+*/
+function FlexRender(props) {
+	if ("cell" in props && props.cell) return flexRender(props.cell.column.columnDef.cell, props.cell.getContext());
+	if ("header" in props && props.header) return flexRender(props.header.column.columnDef.header, props.header.getContext());
+	if ("footer" in props && props.footer) return flexRender(props.footer.column.columnDef.footer, props.footer.getContext());
+	return null;
+}
+
+//#endregion
+exports.FlexRender = FlexRender;
+exports.flexRender = flexRender;
+//# sourceMappingURL=flexRender.cjs.map

package/dist/flexRender.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"flexRender.cjs","names":[],"sources":["../src/flexRender.ts"],"sourcesContent":["import type {\n  Cell,\n  CellData,\n  Header,\n  RowData,\n  TableFeatures,\n} from '@tanstack/table-core'\n\n/**\n * Renders an Alpine table value with the provided context props.\n *\n * Use this lower-level helper for custom header, cell, or footer renderers when\n * you already have the render function and context. `FlexRender` is the\n * convenience wrapper for table cell/header/footer objects. Renderers typically\n * return a string of markup that you render into the DOM with `x-html`.\n *\n * @example\n * ```ts\n * flexRender(cell.column.columnDef.cell, cell.getContext())\n * ```\n */\nexport function flexRender<TProps extends object>(\n  render: any,\n  props: TProps,\n): any {\n  if (typeof render === 'function') {\n    return render(props)\n  }\n  return render\n}\n\n/**\n * Simplified wrapper of `flexRender`. Use this utility function to render headers, cells, or footers with custom markup.\n * Only one prop (`cell`, `header`, or `footer`) may be passed.\n * @example\n * ```html\n * <th x-html=\"FlexRender({ header })\"></th>\n * <td x-html=\"FlexRender({ cell })\"></td>\n * <th x-html=\"FlexRender({ footer: header })\"></th>\n * ```\n *\n * This replaces calling `flexRender` directly like this:\n * ```ts\n * flexRender(cell.column.columnDef.cell, cell.getContext())\n * flexRender(header.column.columnDef.header, header.getContext())\n * flexRender(footer.column.columnDef.footer, footer.getContext())\n * ```\n */\nexport type FlexRenderProps<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TValue extends CellData = CellData,\n> =\n  | { cell: Cell<TFeatures, TData, TValue>; header?: never; footer?: never }\n  | {\n      header: Header<TFeatures, TData, TValue>\n      cell?: never\n      footer?: never\n    }\n  | {\n      footer: Header<TFeatures, TData, TValue>\n      cell?: never\n      header?: never\n    }\n\n/**\n * Simplified wrapper of `flexRender`. Use this utility function to render headers, cells, or footers with custom markup.\n * Only one prop (`cell`, `header`, or `footer`) may be passed.\n * @example\n * ```html\n * <th x-html=\"FlexRender({ header })\"></th>\n * <td x-html=\"FlexRender({ cell })\"></td>\n * <th x-html=\"FlexRender({ footer: header })\"></th>\n * ```\n */\nexport function FlexRender<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TValue extends CellData = CellData,\n>(props: FlexRenderProps<TFeatures, TData, TValue>): any {\n  if ('cell' in props && props.cell) {\n    return flexRender(props.cell.column.columnDef.cell, props.cell.getContext())\n  }\n\n  if ('header' in props && props.header) {\n    return flexRender(\n      props.header.column.columnDef.header,\n      props.header.getContext(),\n    )\n  }\n\n  if ('footer' in props && props.footer) {\n    return flexRender(\n      props.footer.column.columnDef.footer,\n      props.footer.getContext(),\n    )\n  }\n\n  return null\n}\n"],"mappings":";;;;;;;;;;;;;;;AAqBA,SAAgB,WACd,QACA,OACK;CACL,IAAI,OAAO,WAAW,YACpB,OAAO,OAAO,KAAK;CAErB,OAAO;AACT;;;;;;;;;;;AA8CA,SAAgB,WAId,OAAuD;CACvD,IAAI,UAAU,SAAS,MAAM,MAC3B,OAAO,WAAW,MAAM,KAAK,OAAO,UAAU,MAAM,MAAM,KAAK,WAAW,CAAC;CAG7E,IAAI,YAAY,SAAS,MAAM,QAC7B,OAAO,WACL,MAAM,OAAO,OAAO,UAAU,QAC9B,MAAM,OAAO,WAAW,CAC1B;CAGF,IAAI,YAAY,SAAS,MAAM,QAC7B,OAAO,WACL,MAAM,OAAO,OAAO,UAAU,QAC9B,MAAM,OAAO,WAAW,CAC1B;CAGF,OAAO;AACT"}

package/dist/flexRender.d.cts

@@ -0,0 +1,61 @@
+import { Cell, CellData, Header, RowData, TableFeatures } from "@tanstack/table-core";
+
+//#region src/flexRender.d.ts
+/**
+ * Renders an Alpine table value with the provided context props.
+ *
+ * Use this lower-level helper for custom header, cell, or footer renderers when
+ * you already have the render function and context. `FlexRender` is the
+ * convenience wrapper for table cell/header/footer objects. Renderers typically
+ * return a string of markup that you render into the DOM with `x-html`.
+ *
+ * @example
+ * ```ts
+ * flexRender(cell.column.columnDef.cell, cell.getContext())
+ * ```
+ */
+declare function flexRender<TProps extends object>(render: any, props: TProps): any;
+/**
+ * Simplified wrapper of `flexRender`. Use this utility function to render headers, cells, or footers with custom markup.
+ * Only one prop (`cell`, `header`, or `footer`) may be passed.
+ * @example
+ * ```html
+ * <th x-html="FlexRender({ header })"></th>
+ * <td x-html="FlexRender({ cell })"></td>
+ * <th x-html="FlexRender({ footer: header })"></th>
+ * ```
+ *
+ * This replaces calling `flexRender` directly like this:
+ * ```ts
+ * flexRender(cell.column.columnDef.cell, cell.getContext())
+ * flexRender(header.column.columnDef.header, header.getContext())
+ * flexRender(footer.column.columnDef.footer, footer.getContext())
+ * ```
+ */
+type FlexRenderProps<TFeatures extends TableFeatures, TData extends RowData, TValue extends CellData = CellData> = {
+  cell: Cell<TFeatures, TData, TValue>;
+  header?: never;
+  footer?: never;
+} | {
+  header: Header<TFeatures, TData, TValue>;
+  cell?: never;
+  footer?: never;
+} | {
+  footer: Header<TFeatures, TData, TValue>;
+  cell?: never;
+  header?: never;
+};
+/**
+ * Simplified wrapper of `flexRender`. Use this utility function to render headers, cells, or footers with custom markup.
+ * Only one prop (`cell`, `header`, or `footer`) may be passed.
+ * @example
+ * ```html
+ * <th x-html="FlexRender({ header })"></th>
+ * <td x-html="FlexRender({ cell })"></td>
+ * <th x-html="FlexRender({ footer: header })"></th>
+ * ```
+ */
+declare function FlexRender<TFeatures extends TableFeatures, TData extends RowData, TValue extends CellData = CellData>(props: FlexRenderProps<TFeatures, TData, TValue>): any;
+//#endregion
+export { FlexRender, FlexRenderProps, flexRender };
+//# sourceMappingURL=flexRender.d.cts.map