@tanstack/alpine-table 9.0.0-beta.0

package/dist/flexRender.d.ts

@@ -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.ts.map

package/dist/flexRender.js

@@ -0,0 +1,38 @@
+//#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
+export { FlexRender, flexRender };
+//# sourceMappingURL=flexRender.js.map

package/dist/flexRender.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flexRender.js","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/index.cjs

@@ -0,0 +1,16 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+const require_flexRender = require('./flexRender.cjs');
+const require_createTable = require('./createTable.cjs');
+const require_createTableHook = require('./createTableHook.cjs');
+
+exports.FlexRender = require_flexRender.FlexRender;
+exports.createTable = require_createTable.createTable;
+exports.createTableHook = require_createTableHook.createTableHook;
+exports.flexRender = require_flexRender.flexRender;
+var _tanstack_table_core = require("@tanstack/table-core");
+Object.keys(_tanstack_table_core).forEach(function (k) {
+  if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+    enumerable: true,
+    get: function () { return _tanstack_table_core[k]; }
+  });
+});

package/dist/index.d.cts

@@ -0,0 +1,5 @@
+import { FlexRender, FlexRenderProps, flexRender } from "./flexRender.cjs";
+import { AlpineTable, createTable } from "./createTable.cjs";
+import { AppAlpineTable, AppColumnHelper, CreateTableHookOptions, createTableHook } from "./createTableHook.cjs";
+export * from "@tanstack/table-core";
+export { AlpineTable, AppAlpineTable, AppColumnHelper, CreateTableHookOptions, FlexRender, FlexRenderProps, createTable, createTableHook, flexRender };

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+import { FlexRender, FlexRenderProps, flexRender } from "./flexRender.js";
+import { AlpineTable, createTable } from "./createTable.js";
+import { AppAlpineTable, AppColumnHelper, CreateTableHookOptions, createTableHook } from "./createTableHook.js";
+export * from "@tanstack/table-core";
+export { AlpineTable, AppAlpineTable, AppColumnHelper, CreateTableHookOptions, FlexRender, FlexRenderProps, createTable, createTableHook, flexRender };

package/dist/index.js

@@ -0,0 +1,7 @@
+import { FlexRender, flexRender } from "./flexRender.js";
+import { createTable } from "./createTable.js";
+import { createTableHook } from "./createTableHook.js";
+
+export * from "@tanstack/table-core"
+
+export { FlexRender, createTable, createTableHook, flexRender };

package/dist/reactivity.cjs

@@ -0,0 +1,34 @@
+let _tanstack_store = require("@tanstack/store");
+
+//#region src/reactivity.ts
+/**
+* Creates the table-core reactivity bindings used by the Alpine adapter.
+*
+* Alpine uses TanStack Store atoms directly. Table instance reads
+* are then exposed to Alpine through the proxy wrapper in `createTable`.
+*/
+function alpineReactivity() {
+	return {
+		createOptionsStore: true,
+		wrapExternalAtoms: false,
+		addSubscription: () => {
+			throw new Error("Feature not supported in current reactivity implementation");
+		},
+		unmount: () => {
+			throw new Error("Feature not supported in current reactivity implementation");
+		},
+		schedule: (fn) => queueMicrotask(() => fn()),
+		batch: _tanstack_store.batch,
+		untrack: (fn) => fn(),
+		createReadonlyAtom: (fn, options) => {
+			return (0, _tanstack_store.createAtom)(() => fn(), { compare: options === null || options === void 0 ? void 0 : options.compare });
+		},
+		createWritableAtom: (value, options) => {
+			return (0, _tanstack_store.createAtom)(value, { compare: options === null || options === void 0 ? void 0 : options.compare });
+		}
+	};
+}
+
+//#endregion
+exports.alpineReactivity = alpineReactivity;
+//# sourceMappingURL=reactivity.cjs.map

package/dist/reactivity.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"reactivity.cjs","names":[],"sources":["../src/reactivity.ts"],"sourcesContent":["import { batch, createAtom } from '@tanstack/store'\nimport type {\n  TableAtomOptions,\n  TableReactivityBindings,\n} from '@tanstack/table-core/reactivity'\n\n/**\n * Creates the table-core reactivity bindings used by the Alpine adapter.\n *\n * Alpine uses TanStack Store atoms directly. Table instance reads\n * are then exposed to Alpine through the proxy wrapper in `createTable`.\n */\nexport function alpineReactivity(): TableReactivityBindings {\n  return {\n    createOptionsStore: true,\n    wrapExternalAtoms: false,\n    addSubscription: () => {\n      throw new Error(\n        'Feature not supported in current reactivity implementation',\n      )\n    },\n    unmount: () => {\n      throw new Error(\n        'Feature not supported in current reactivity implementation',\n      )\n    },\n    schedule: (fn) => queueMicrotask(() => fn()),\n    batch,\n    untrack: (fn) => fn(),\n    createReadonlyAtom: <T>(fn: () => T, options?: TableAtomOptions<T>) => {\n      return createAtom(() => fn(), {\n        compare: options?.compare,\n      })\n    },\n    createWritableAtom: <T>(value: T, options?: TableAtomOptions<T>) => {\n      return createAtom(value, {\n        compare: options?.compare,\n      })\n    },\n  }\n}\n"],"mappings":";;;;;;;;;AAYA,SAAgB,mBAA4C;CAC1D,OAAO;EACL,oBAAoB;EACpB,mBAAmB;EACnB,uBAAuB;GACrB,MAAM,IAAI,MACR,4DACF;EACF;EACA,eAAe;GACb,MAAM,IAAI,MACR,4DACF;EACF;EACA,WAAW,OAAO,qBAAqB,GAAG,CAAC;EAC3C;EACA,UAAU,OAAO,GAAG;EACpB,qBAAwB,IAAa,YAAkC;GACrE,6CAAwB,GAAG,GAAG,EAC5B,2DAAS,QAAS,QACpB,CAAC;EACH;EACA,qBAAwB,OAAU,YAAkC;GAClE,uCAAkB,OAAO,EACvB,2DAAS,QAAS,QACpB,CAAC;EACH;CACF;AACF"}

package/dist/reactivity.js

@@ -0,0 +1,34 @@
+import { batch, createAtom } from "@tanstack/store";
+
+//#region src/reactivity.ts
+/**
+* Creates the table-core reactivity bindings used by the Alpine adapter.
+*
+* Alpine uses TanStack Store atoms directly. Table instance reads
+* are then exposed to Alpine through the proxy wrapper in `createTable`.
+*/
+function alpineReactivity() {
+	return {
+		createOptionsStore: true,
+		wrapExternalAtoms: false,
+		addSubscription: () => {
+			throw new Error("Feature not supported in current reactivity implementation");
+		},
+		unmount: () => {
+			throw new Error("Feature not supported in current reactivity implementation");
+		},
+		schedule: (fn) => queueMicrotask(() => fn()),
+		batch,
+		untrack: (fn) => fn(),
+		createReadonlyAtom: (fn, options) => {
+			return createAtom(() => fn(), { compare: options === null || options === void 0 ? void 0 : options.compare });
+		},
+		createWritableAtom: (value, options) => {
+			return createAtom(value, { compare: options === null || options === void 0 ? void 0 : options.compare });
+		}
+	};
+}
+
+//#endregion
+export { alpineReactivity };
+//# sourceMappingURL=reactivity.js.map

package/dist/reactivity.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"reactivity.js","names":[],"sources":["../src/reactivity.ts"],"sourcesContent":["import { batch, createAtom } from '@tanstack/store'\nimport type {\n  TableAtomOptions,\n  TableReactivityBindings,\n} from '@tanstack/table-core/reactivity'\n\n/**\n * Creates the table-core reactivity bindings used by the Alpine adapter.\n *\n * Alpine uses TanStack Store atoms directly. Table instance reads\n * are then exposed to Alpine through the proxy wrapper in `createTable`.\n */\nexport function alpineReactivity(): TableReactivityBindings {\n  return {\n    createOptionsStore: true,\n    wrapExternalAtoms: false,\n    addSubscription: () => {\n      throw new Error(\n        'Feature not supported in current reactivity implementation',\n      )\n    },\n    unmount: () => {\n      throw new Error(\n        'Feature not supported in current reactivity implementation',\n      )\n    },\n    schedule: (fn) => queueMicrotask(() => fn()),\n    batch,\n    untrack: (fn) => fn(),\n    createReadonlyAtom: <T>(fn: () => T, options?: TableAtomOptions<T>) => {\n      return createAtom(() => fn(), {\n        compare: options?.compare,\n      })\n    },\n    createWritableAtom: <T>(value: T, options?: TableAtomOptions<T>) => {\n      return createAtom(value, {\n        compare: options?.compare,\n      })\n    },\n  }\n}\n"],"mappings":";;;;;;;;;AAYA,SAAgB,mBAA4C;CAC1D,OAAO;EACL,oBAAoB;EACpB,mBAAmB;EACnB,uBAAuB;GACrB,MAAM,IAAI,MACR,4DACF;EACF;EACA,eAAe;GACb,MAAM,IAAI,MACR,4DACF;EACF;EACA,WAAW,OAAO,qBAAqB,GAAG,CAAC;EAC3C;EACA,UAAU,OAAO,GAAG;EACpB,qBAAwB,IAAa,YAAkC;GACrE,OAAO,iBAAiB,GAAG,GAAG,EAC5B,2DAAS,QAAS,QACpB,CAAC;EACH;EACA,qBAAwB,OAAU,YAAkC;GAClE,OAAO,WAAW,OAAO,EACvB,2DAAS,QAAS,QACpB,CAAC;EACH;CACF;AACF"}

package/dist/static-functions.cjs

@@ -0,0 +1,9 @@
+
+
+var _tanstack_table_core_static_functions = require("@tanstack/table-core/static-functions");
+Object.keys(_tanstack_table_core_static_functions).forEach(function (k) {
+  if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+    enumerable: true,
+    get: function () { return _tanstack_table_core_static_functions[k]; }
+  });
+});

package/dist/static-functions.d.cts

@@ -0,0 +1 @@
+export * from "@tanstack/table-core/static-functions";

package/dist/static-functions.d.ts

@@ -0,0 +1 @@
+export * from "@tanstack/table-core/static-functions";

package/dist/static-functions.js

@@ -0,0 +1,3 @@
+export * from "@tanstack/table-core/static-functions"
+
+export {  };

package/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "@tanstack/alpine-table",
+  "version": "9.0.0-beta.0",
+  "description": "Headless UI for building powerful tables & datagrids for Alpine.",
+  "author": "Tanner Linsley",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/TanStack/table.git",
+    "directory": "packages/alpine-table"
+  },
+  "homepage": "https://tanstack.com/table",
+  "funding": {
+    "type": "github",
+    "url": "https://github.com/sponsors/tannerlinsley"
+  },
+  "keywords": [
+    "alpine",
+    "table",
+    "alpine-table",
+    "datagrid"
+  ],
+  "type": "module",
+  "types": "./dist/index.d.cts",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./flex-render": {
+      "import": "./dist/flex-render.js",
+      "require": "./dist/flex-render.cjs"
+    },
+    "./static-functions": {
+      "import": "./dist/static-functions.js",
+      "require": "./dist/static-functions.cjs"
+    },
+    "./package.json": "./package.json"
+  },
+  "sideEffects": false,
+  "engines": {
+    "node": ">=16"
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "clean": "rimraf ./build && rimraf ./dist",
+    "test:eslint": "eslint ./src",
+    "test:types": "tsc",
+    "test:build": "publint --strict",
+    "build": "tsdown"
+  },
+  "dependencies": {
+    "@tanstack/store": "^0.11.0",
+    "@tanstack/table-core": "workspace:*"
+  },
+  "devDependencies": {
+    "@types/alpinejs": "^3.13.11",
+    "alpinejs": "^3.15.12"
+  },
+  "peerDependencies": {
+    "alpinejs": "^3.15.12"
+  }
+}

package/src/createTable.ts

@@ -0,0 +1,148 @@
+import Alpine from 'alpinejs'
+import { constructTable } from '@tanstack/table-core'
+import { FlexRender, flexRender } from './flexRender'
+import { alpineReactivity } from './reactivity'
+import type {
+  RowData,
+  Table,
+  TableFeatures,
+  TableOptions,
+} from '@tanstack/table-core'
+
+export 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
+}
+
+export function createTable<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+>(tableOptions: TableOptions<TFeatures, TData>): AlpineTable<TFeatures, TData> {
+  const mergedOptions: TableOptions<TFeatures, TData> = {
+    ...tableOptions,
+    features: {
+      coreReactivityFeature: alpineReactivity(),
+      ...tableOptions.features,
+    },
+    mergeOptions: (
+      defaultOptions: TableOptions<TFeatures, TData>,
+      newOptions: Partial<TableOptions<TFeatures, TData>>,
+    ) => {
+      return {
+        ...defaultOptions,
+        ...newOptions,
+      }
+    },
+  }
+
+  const table = constructTable(mergedOptions) as unknown as AlpineTable<
+    TFeatures,
+    TData
+  >
+
+  table.flexRender = flexRender
+  table.FlexRender = FlexRender
+
+  const reactivity = Alpine.reactive({ _ver: 0 })
+
+  table.store.subscribe(() => {
+    reactivity._ver++
+  })
+
+  // Reactively sync options when external Alpine-reactive getters change (e.g.
+  // a `get data()` backed by `Alpine.reactive`). Reading the option getters
+  // inside the effect registers the dependencies, so the effect re-runs when
+  // they change and re-applies the live values via `setOptions`.
+  //
+  // `setOptions` writes to the options store, not the state store, so a `data`
+  // (or other option) change does not emit on `table.store` and would not bump
+  // `_ver` on its own. We bump `_ver` here so the template re-pulls derived
+  // APIs like `getRowModel()`, which recompute from the new options. The effect
+  // never reads `_ver`, so writing it does not re-trigger this effect.
+  let initialized = false
+  Alpine.effect(() => {
+    const state = tableOptions.state as Record<string, unknown> | undefined
+    if (state) {
+      for (const key in state) {
+        void state[key]
+      }
+    }
+    void tableOptions.data
+
+    table.setOptions((prev) => ({
+      ...prev,
+      ...tableOptions,
+    }))
+
+    if (initialized) {
+      reactivity._ver++
+    }
+    initialized = true
+  })
+
+  const proxyCache = new WeakMap<object, object>()
+
+  const toReactiveProxy = <TValue>(value: TValue): TValue => {
+    if (typeof value !== 'object' || value === null) {
+      return value
+    }
+
+    // Built-in exotic objects (Map, Set, Date, etc.) rely on internal slots and
+    // throw "incompatible receiver" when their getters/methods run with a Proxy
+    // as the receiver (e.g. `getFacetedUniqueValues().size`). Return them as-is;
+    // the read that produced them already tracked `_ver` at the call site.
+    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 as TValue
+    }
+
+    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: Array<unknown>) => {
+            void reactivity._ver
+            return toReactiveProxy(
+              (resolvedValue as Function).apply(target, args),
+            )
+          }
+        }
+
+        void reactivity._ver
+        return toReactiveProxy(resolvedValue)
+      },
+    })
+
+    proxyCache.set(value, proxy)
+    return proxy
+  }
+
+  return toReactiveProxy(table)
+}

package/src/createTableHook.ts

@@ -0,0 +1,48 @@
+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'
+
+export type CreateTableHookOptions<TFeatures extends TableFeatures> = Omit<
+  TableOptions<TFeatures, any>,
+  'columns' | 'data' | 'state'
+>
+
+export type AppAlpineTable<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+> = AlpineTable<TFeatures, TData>
+
+export type AppColumnHelper<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+> = ReturnType<typeof coreCreateColumnHelper<TFeatures, TData>>
+
+export function createTableHook<TFeatures extends TableFeatures>({
+  ...defaultTableOptions
+}: CreateTableHookOptions<TFeatures>) {
+  function createAppColumnHelper<TData extends RowData>(): AppColumnHelper<
+    TFeatures,
+    TData
+  > {
+    return coreCreateColumnHelper<TFeatures, TData>()
+  }
+
+  function createAppTable<TData extends RowData>(
+    tableOptions: Omit<TableOptions<TFeatures, TData>, 'features'>,
+  ): AppAlpineTable<TFeatures, TData> {
+    // Merge default options with provided options (provided takes precedence)
+    const mergedOptions = {
+      ...defaultTableOptions,
+      ...tableOptions,
+    } as TableOptions<TFeatures, TData>
+
+    return createTable<TFeatures, TData>(mergedOptions)
+  }
+
+  return {
+    appFeatures: defaultTableOptions.features as TFeatures,
+    createAppColumnHelper,
+    createAppTable,
+  }
+}

package/src/flex-render.ts

@@ -0,0 +1 @@
+export * from './flexRender'

package/src/flexRender.ts

@@ -0,0 +1,100 @@
+import type {
+  Cell,
+  CellData,
+  Header,
+  RowData,
+  TableFeatures,
+} from '@tanstack/table-core'
+
+/**
+ * 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())
+ * ```
+ */
+export function flexRender<TProps extends object>(
+  render: any,
+  props: TProps,
+): any {
+  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>
+ * ```
+ *
+ * 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())
+ * ```
+ */
+export 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>
+ * ```
+ */
+export function FlexRender<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+  TValue extends CellData = CellData,
+>(props: FlexRenderProps<TFeatures, TData, TValue>): any {
+  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
+}

package/src/index.ts

@@ -0,0 +1,5 @@
+export * from '@tanstack/table-core'
+
+export * from './flexRender'
+export * from './createTable'
+export * from './createTableHook'

package/src/reactivity.ts

@@ -0,0 +1,41 @@
+import { batch, createAtom } from '@tanstack/store'
+import type {
+  TableAtomOptions,
+  TableReactivityBindings,
+} from '@tanstack/table-core/reactivity'
+
+/**
+ * Creates the table-core reactivity bindings used by the Alpine adapter.
+ *
+ * Alpine uses TanStack Store atoms directly. Table instance reads
+ * are then exposed to Alpine through the proxy wrapper in `createTable`.
+ */
+export function alpineReactivity(): TableReactivityBindings {
+  return {
+    createOptionsStore: true,
+    wrapExternalAtoms: false,
+    addSubscription: () => {
+      throw new Error(
+        'Feature not supported in current reactivity implementation',
+      )
+    },
+    unmount: () => {
+      throw new Error(
+        'Feature not supported in current reactivity implementation',
+      )
+    },
+    schedule: (fn) => queueMicrotask(() => fn()),
+    batch,
+    untrack: (fn) => fn(),
+    createReadonlyAtom: <T>(fn: () => T, options?: TableAtomOptions<T>) => {
+      return createAtom(() => fn(), {
+        compare: options?.compare,
+      })
+    },
+    createWritableAtom: <T>(value: T, options?: TableAtomOptions<T>) => {
+      return createAtom(value, {
+        compare: options?.compare,
+      })
+    },
+  }
+}