@tanstack/vue-table 9.0.0-alpha.4 → 9.0.0-alpha.41

package/README.md

@@ -0,0 +1,117 @@
+<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)
+
+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>
+
+## 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/FlexRender.cjs

@@ -0,0 +1,80 @@
+let vue = require("vue");
+
+//#region src/FlexRender.ts
+/**
+* If rendering headers, cells, or footers with custom markup, use flexRender instead of `cell.getValue()` or `cell.renderValue()`.
+* @example flexRender(cell.column.columnDef.cell, cell.getContext())
+*/
+function flexRender(render, props) {
+	if (typeof render === "function") {
+		const rendered = render(props);
+		if ((0, vue.isVNode)(rendered)) return rendered;
+		if (typeof rendered === "function" || typeof rendered === "object") return (0, vue.h)(rendered, props);
+		return rendered;
+	}
+	if (typeof render === "object") return (0, vue.h)(render, props);
+	return render;
+}
+/**
+* Simplified component for rendering headers, cells, or footers.
+*
+* Supports both the new shorthand pattern and the legacy `:render`/`:props` pattern:
+* @example
+* ```vue
+* <!-- New shorthand pattern -->
+* <FlexRender :cell="cell" />
+* <FlexRender :header="header" />
+* <FlexRender :footer="header" />
+*
+* <!-- Legacy pattern (still supported) -->
+* <FlexRender :render="cell.column.columnDef.cell" :props="cell.getContext()" />
+* ```
+*/
+const FlexRender = (0, vue.defineComponent)({
+	props: {
+		render: {
+			type: [
+				Function,
+				Object,
+				String
+			],
+			default: void 0
+		},
+		props: {
+			type: Object,
+			default: void 0
+		},
+		cell: {
+			type: Object,
+			default: void 0
+		},
+		header: {
+			type: Object,
+			default: void 0
+		},
+		footer: {
+			type: Object,
+			default: void 0
+		}
+	},
+	setup: (props) => {
+		return () => {
+			if (props.cell) {
+				var _cell$getIsAggregated, _cell$getIsPlaceholde;
+				const cell = props.cell;
+				const def = cell.column.columnDef;
+				if ((_cell$getIsAggregated = cell.getIsAggregated) === null || _cell$getIsAggregated === void 0 ? void 0 : _cell$getIsAggregated.call(cell)) return flexRender(def.aggregatedCell ?? def.cell, cell.getContext());
+				if ((_cell$getIsPlaceholde = cell.getIsPlaceholder) === null || _cell$getIsPlaceholde === void 0 ? void 0 : _cell$getIsPlaceholde.call(cell)) return null;
+				return flexRender(def.cell, cell.getContext());
+			}
+			if (props.header) return flexRender(props.header.column.columnDef.header, props.header.getContext());
+			if (props.footer) return flexRender(props.footer.column.columnDef.footer, props.footer.getContext());
+			return flexRender(props.render, props.props);
+		};
+	}
+});
+
+//#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 { defineComponent, h, isVNode } from 'vue'\nimport type { PropType } from 'vue'\nimport type {\n  Cell,\n  CellData,\n  Header,\n  RowData,\n  TableFeatures,\n} from '@tanstack/table-core'\n\n/**\n * If rendering headers, cells, or footers with custom markup, use flexRender instead of `cell.getValue()` or `cell.renderValue()`.\n * @example flexRender(cell.column.columnDef.cell, cell.getContext())\n */\nexport function flexRender(render: any, props: any): any {\n  if (typeof render === 'function') {\n    const rendered = render(props)\n\n    if (isVNode(rendered)) {\n      return rendered\n    }\n\n    if (typeof rendered === 'function' || typeof rendered === 'object') {\n      return h(rendered, props)\n    }\n\n    return rendered\n  }\n\n  if (typeof render === 'object') {\n    return h(render, props)\n  }\n\n  return render\n}\n\n/**\n * Simplified component for rendering headers, cells, or footers.\n *\n * Supports both the new shorthand pattern and the legacy `:render`/`:props` pattern:\n * @example\n * ```vue\n * <!-- New shorthand pattern -->\n * <FlexRender :cell=\"cell\" />\n * <FlexRender :header=\"header\" />\n * <FlexRender :footer=\"header\" />\n *\n * <!-- Legacy pattern (still supported) -->\n * <FlexRender :render=\"cell.column.columnDef.cell\" :props=\"cell.getContext()\" />\n * ```\n */\nexport const FlexRender = defineComponent({\n  props: {\n    render: {\n      type: [Function, Object, String] as PropType<any>,\n      default: undefined,\n    },\n    props: {\n      type: Object as PropType<any>,\n      default: undefined,\n    },\n    cell: {\n      type: Object as PropType<Cell<any, any, any>>,\n      default: undefined,\n    },\n    header: {\n      type: Object as PropType<Header<any, any, any>>,\n      default: undefined,\n    },\n    footer: {\n      type: Object as PropType<Header<any, any, any>>,\n      default: undefined,\n    },\n  },\n  setup: (props: {\n    render?: any\n    props?: any\n    cell?: Cell<any, any, any>\n    header?: Header<any, any, any>\n    footer?: Header<any, any, any>\n  }) => {\n    return () => {\n      // New shorthand pattern: extract render and props from cell/header/footer\n      if (props.cell) {\n        const cell = props.cell\n        const def = cell.column.columnDef\n        // When the column-grouping feature is registered, a cell can be in\n        // one of three special modes that should not render `columnDef.cell`\n        // directly:\n        //   - aggregated: render `columnDef.aggregatedCell` (falling back to\n        //     `columnDef.cell` if the column did not define one)\n        //   - placeholder: a duplicate value within a group — render nothing\n        //   - grouped: fall through to `columnDef.cell`; consumers that want\n        //     a custom group header typically branch on `cell.getIsGrouped()`\n        //     themselves first\n        if (cell.getIsAggregated?.()) {\n          return flexRender(def.aggregatedCell ?? def.cell, cell.getContext())\n        }\n        if (cell.getIsPlaceholder?.()) {\n          return null\n        }\n        return flexRender(def.cell, cell.getContext())\n      }\n\n      if (props.header) {\n        return flexRender(\n          props.header.column.columnDef.header,\n          props.header.getContext(),\n        )\n      }\n\n      if (props.footer) {\n        return flexRender(\n          props.footer.column.columnDef.footer,\n          props.footer.getContext(),\n        )\n      }\n\n      // Legacy pattern: use render and props directly\n      return flexRender(props.render, props.props)\n    }\n  },\n})\n"],"mappings":";;;;;;;AAcA,SAAgB,WAAW,QAAa,OAAiB;AACvD,KAAI,OAAO,WAAW,YAAY;EAChC,MAAM,WAAW,OAAO,MAAM;AAE9B,uBAAY,SAAS,CACnB,QAAO;AAGT,MAAI,OAAO,aAAa,cAAc,OAAO,aAAa,SACxD,mBAAS,UAAU,MAAM;AAG3B,SAAO;;AAGT,KAAI,OAAO,WAAW,SACpB,mBAAS,QAAQ,MAAM;AAGzB,QAAO;;;;;;;;;;;;;;;;;AAkBT,MAAa,sCAA6B;CACxC,OAAO;EACL,QAAQ;GACN,MAAM;IAAC;IAAU;IAAQ;IAAO;GAChC,SAAS;GACV;EACD,OAAO;GACL,MAAM;GACN,SAAS;GACV;EACD,MAAM;GACJ,MAAM;GACN,SAAS;GACV;EACD,QAAQ;GACN,MAAM;GACN,SAAS;GACV;EACD,QAAQ;GACN,MAAM;GACN,SAAS;GACV;EACF;CACD,QAAQ,UAMF;AACJ,eAAa;AAEX,OAAI,MAAM,MAAM;;IACd,MAAM,OAAO,MAAM;IACnB,MAAM,MAAM,KAAK,OAAO;AAUxB,iCAAI,KAAK,yGAAmB,CAC1B,QAAO,WAAW,IAAI,kBAAkB,IAAI,MAAM,KAAK,YAAY,CAAC;AAEtE,iCAAI,KAAK,0GAAoB,CAC3B,QAAO;AAET,WAAO,WAAW,IAAI,MAAM,KAAK,YAAY,CAAC;;AAGhD,OAAI,MAAM,OACR,QAAO,WACL,MAAM,OAAO,OAAO,UAAU,QAC9B,MAAM,OAAO,YAAY,CAC1B;AAGH,OAAI,MAAM,OACR,QAAO,WACL,MAAM,OAAO,OAAO,UAAU,QAC9B,MAAM,OAAO,YAAY,CAC1B;AAIH,UAAO,WAAW,MAAM,QAAQ,MAAM,MAAM;;;CAGjD,CAAC"}

package/dist/FlexRender.d.cts

@@ -0,0 +1,46 @@
+import * as _$vue from "vue";
+import { Cell, Header } from "@tanstack/table-core";
+
+//#region src/FlexRender.d.ts
+/**
+ * If rendering headers, cells, or footers with custom markup, use flexRender instead of `cell.getValue()` or `cell.renderValue()`.
+ * @example flexRender(cell.column.columnDef.cell, cell.getContext())
+ */
+declare function flexRender(render: any, props: any): any;
+/**
+ * Simplified component for rendering headers, cells, or footers.
+ *
+ * Supports both the new shorthand pattern and the legacy `:render`/`:props` pattern:
+ * @example
+ * ```vue
+ * <!-- New shorthand pattern -->
+ * <FlexRender :cell="cell" />
+ * <FlexRender :header="header" />
+ * <FlexRender :footer="header" />
+ *
+ * <!-- Legacy pattern (still supported) -->
+ * <FlexRender :render="cell.column.columnDef.cell" :props="cell.getContext()" />
+ * ```
+ */
+declare const FlexRender: _$vue.DefineComponent<{
+  render?: any;
+  props?: any;
+  cell?: Cell<any, any, any>;
+  header?: Header<any, any, any>;
+  footer?: Header<any, any, any>;
+}, () => any, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {}, string, _$vue.PublicProps, Readonly<{
+  render?: any;
+  props?: any;
+  cell?: Cell<any, any, any>;
+  header?: Header<any, any, any>;
+  footer?: Header<any, any, any>;
+}> & Readonly<{}>, {
+  props: any;
+  render: any;
+  cell: any;
+  header: any;
+  footer: any;
+}, {}, {}, {}, string, _$vue.ComponentProvideOptions, true, {}, any>;
+//#endregion
+export { FlexRender, flexRender };
+//# sourceMappingURL=FlexRender.d.cts.map

package/dist/FlexRender.d.ts

@@ -0,0 +1,46 @@
+import * as _$vue from "vue";
+import { Cell, Header } from "@tanstack/table-core";
+
+//#region src/FlexRender.d.ts
+/**
+ * If rendering headers, cells, or footers with custom markup, use flexRender instead of `cell.getValue()` or `cell.renderValue()`.
+ * @example flexRender(cell.column.columnDef.cell, cell.getContext())
+ */
+declare function flexRender(render: any, props: any): any;
+/**
+ * Simplified component for rendering headers, cells, or footers.
+ *
+ * Supports both the new shorthand pattern and the legacy `:render`/`:props` pattern:
+ * @example
+ * ```vue
+ * <!-- New shorthand pattern -->
+ * <FlexRender :cell="cell" />
+ * <FlexRender :header="header" />
+ * <FlexRender :footer="header" />
+ *
+ * <!-- Legacy pattern (still supported) -->
+ * <FlexRender :render="cell.column.columnDef.cell" :props="cell.getContext()" />
+ * ```
+ */
+declare const FlexRender: _$vue.DefineComponent<{
+  render?: any;
+  props?: any;
+  cell?: Cell<any, any, any>;
+  header?: Header<any, any, any>;
+  footer?: Header<any, any, any>;
+}, () => any, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {}, string, _$vue.PublicProps, Readonly<{
+  render?: any;
+  props?: any;
+  cell?: Cell<any, any, any>;
+  header?: Header<any, any, any>;
+  footer?: Header<any, any, any>;
+}> & Readonly<{}>, {
+  props: any;
+  render: any;
+  cell: any;
+  header: any;
+  footer: any;
+}, {}, {}, {}, string, _$vue.ComponentProvideOptions, true, {}, any>;
+//#endregion
+export { FlexRender, flexRender };
+//# sourceMappingURL=FlexRender.d.ts.map

package/dist/FlexRender.js

@@ -0,0 +1,79 @@
+import { defineComponent, h, isVNode } from "vue";
+
+//#region src/FlexRender.ts
+/**
+* If rendering headers, cells, or footers with custom markup, use flexRender instead of `cell.getValue()` or `cell.renderValue()`.
+* @example flexRender(cell.column.columnDef.cell, cell.getContext())
+*/
+function flexRender(render, props) {
+	if (typeof render === "function") {
+		const rendered = render(props);
+		if (isVNode(rendered)) return rendered;
+		if (typeof rendered === "function" || typeof rendered === "object") return h(rendered, props);
+		return rendered;
+	}
+	if (typeof render === "object") return h(render, props);
+	return render;
+}
+/**
+* Simplified component for rendering headers, cells, or footers.
+*
+* Supports both the new shorthand pattern and the legacy `:render`/`:props` pattern:
+* @example
+* ```vue
+* <!-- New shorthand pattern -->
+* <FlexRender :cell="cell" />
+* <FlexRender :header="header" />
+* <FlexRender :footer="header" />
+*
+* <!-- Legacy pattern (still supported) -->
+* <FlexRender :render="cell.column.columnDef.cell" :props="cell.getContext()" />
+* ```
+*/
+const FlexRender = defineComponent({
+	props: {
+		render: {
+			type: [
+				Function,
+				Object,
+				String
+			],
+			default: void 0
+		},
+		props: {
+			type: Object,
+			default: void 0
+		},
+		cell: {
+			type: Object,
+			default: void 0
+		},
+		header: {
+			type: Object,
+			default: void 0
+		},
+		footer: {
+			type: Object,
+			default: void 0
+		}
+	},
+	setup: (props) => {
+		return () => {
+			if (props.cell) {
+				var _cell$getIsAggregated, _cell$getIsPlaceholde;
+				const cell = props.cell;
+				const def = cell.column.columnDef;
+				if ((_cell$getIsAggregated = cell.getIsAggregated) === null || _cell$getIsAggregated === void 0 ? void 0 : _cell$getIsAggregated.call(cell)) return flexRender(def.aggregatedCell ?? def.cell, cell.getContext());
+				if ((_cell$getIsPlaceholde = cell.getIsPlaceholder) === null || _cell$getIsPlaceholde === void 0 ? void 0 : _cell$getIsPlaceholde.call(cell)) return null;
+				return flexRender(def.cell, cell.getContext());
+			}
+			if (props.header) return flexRender(props.header.column.columnDef.header, props.header.getContext());
+			if (props.footer) return flexRender(props.footer.column.columnDef.footer, props.footer.getContext());
+			return flexRender(props.render, props.props);
+		};
+	}
+});
+
+//#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 { defineComponent, h, isVNode } from 'vue'\nimport type { PropType } from 'vue'\nimport type {\n  Cell,\n  CellData,\n  Header,\n  RowData,\n  TableFeatures,\n} from '@tanstack/table-core'\n\n/**\n * If rendering headers, cells, or footers with custom markup, use flexRender instead of `cell.getValue()` or `cell.renderValue()`.\n * @example flexRender(cell.column.columnDef.cell, cell.getContext())\n */\nexport function flexRender(render: any, props: any): any {\n  if (typeof render === 'function') {\n    const rendered = render(props)\n\n    if (isVNode(rendered)) {\n      return rendered\n    }\n\n    if (typeof rendered === 'function' || typeof rendered === 'object') {\n      return h(rendered, props)\n    }\n\n    return rendered\n  }\n\n  if (typeof render === 'object') {\n    return h(render, props)\n  }\n\n  return render\n}\n\n/**\n * Simplified component for rendering headers, cells, or footers.\n *\n * Supports both the new shorthand pattern and the legacy `:render`/`:props` pattern:\n * @example\n * ```vue\n * <!-- New shorthand pattern -->\n * <FlexRender :cell=\"cell\" />\n * <FlexRender :header=\"header\" />\n * <FlexRender :footer=\"header\" />\n *\n * <!-- Legacy pattern (still supported) -->\n * <FlexRender :render=\"cell.column.columnDef.cell\" :props=\"cell.getContext()\" />\n * ```\n */\nexport const FlexRender = defineComponent({\n  props: {\n    render: {\n      type: [Function, Object, String] as PropType<any>,\n      default: undefined,\n    },\n    props: {\n      type: Object as PropType<any>,\n      default: undefined,\n    },\n    cell: {\n      type: Object as PropType<Cell<any, any, any>>,\n      default: undefined,\n    },\n    header: {\n      type: Object as PropType<Header<any, any, any>>,\n      default: undefined,\n    },\n    footer: {\n      type: Object as PropType<Header<any, any, any>>,\n      default: undefined,\n    },\n  },\n  setup: (props: {\n    render?: any\n    props?: any\n    cell?: Cell<any, any, any>\n    header?: Header<any, any, any>\n    footer?: Header<any, any, any>\n  }) => {\n    return () => {\n      // New shorthand pattern: extract render and props from cell/header/footer\n      if (props.cell) {\n        const cell = props.cell\n        const def = cell.column.columnDef\n        // When the column-grouping feature is registered, a cell can be in\n        // one of three special modes that should not render `columnDef.cell`\n        // directly:\n        //   - aggregated: render `columnDef.aggregatedCell` (falling back to\n        //     `columnDef.cell` if the column did not define one)\n        //   - placeholder: a duplicate value within a group — render nothing\n        //   - grouped: fall through to `columnDef.cell`; consumers that want\n        //     a custom group header typically branch on `cell.getIsGrouped()`\n        //     themselves first\n        if (cell.getIsAggregated?.()) {\n          return flexRender(def.aggregatedCell ?? def.cell, cell.getContext())\n        }\n        if (cell.getIsPlaceholder?.()) {\n          return null\n        }\n        return flexRender(def.cell, cell.getContext())\n      }\n\n      if (props.header) {\n        return flexRender(\n          props.header.column.columnDef.header,\n          props.header.getContext(),\n        )\n      }\n\n      if (props.footer) {\n        return flexRender(\n          props.footer.column.columnDef.footer,\n          props.footer.getContext(),\n        )\n      }\n\n      // Legacy pattern: use render and props directly\n      return flexRender(props.render, props.props)\n    }\n  },\n})\n"],"mappings":";;;;;;;AAcA,SAAgB,WAAW,QAAa,OAAiB;AACvD,KAAI,OAAO,WAAW,YAAY;EAChC,MAAM,WAAW,OAAO,MAAM;AAE9B,MAAI,QAAQ,SAAS,CACnB,QAAO;AAGT,MAAI,OAAO,aAAa,cAAc,OAAO,aAAa,SACxD,QAAO,EAAE,UAAU,MAAM;AAG3B,SAAO;;AAGT,KAAI,OAAO,WAAW,SACpB,QAAO,EAAE,QAAQ,MAAM;AAGzB,QAAO;;;;;;;;;;;;;;;;;AAkBT,MAAa,aAAa,gBAAgB;CACxC,OAAO;EACL,QAAQ;GACN,MAAM;IAAC;IAAU;IAAQ;IAAO;GAChC,SAAS;GACV;EACD,OAAO;GACL,MAAM;GACN,SAAS;GACV;EACD,MAAM;GACJ,MAAM;GACN,SAAS;GACV;EACD,QAAQ;GACN,MAAM;GACN,SAAS;GACV;EACD,QAAQ;GACN,MAAM;GACN,SAAS;GACV;EACF;CACD,QAAQ,UAMF;AACJ,eAAa;AAEX,OAAI,MAAM,MAAM;;IACd,MAAM,OAAO,MAAM;IACnB,MAAM,MAAM,KAAK,OAAO;AAUxB,iCAAI,KAAK,yGAAmB,CAC1B,QAAO,WAAW,IAAI,kBAAkB,IAAI,MAAM,KAAK,YAAY,CAAC;AAEtE,iCAAI,KAAK,0GAAoB,CAC3B,QAAO;AAET,WAAO,WAAW,IAAI,MAAM,KAAK,YAAY,CAAC;;AAGhD,OAAI,MAAM,OACR,QAAO,WACL,MAAM,OAAO,OAAO,UAAU,QAC9B,MAAM,OAAO,YAAY,CAC1B;AAGH,OAAI,MAAM,OACR,QAAO,WACL,MAAM,OAAO,OAAO,UAAU,QAC9B,MAAM,OAAO,YAAY,CAC1B;AAIH,UAAO,WAAW,MAAM,QAAQ,MAAM,MAAM;;;CAGjD,CAAC"}

package/dist/createTableHook.cjs

@@ -0,0 +1,216 @@
+const require_FlexRender = require('./FlexRender.cjs');
+const require_merge_proxy = require('./merge-proxy.cjs');
+const require_useTable = require('./useTable.cjs');
+let vue = require("vue");
+let _tanstack_table_core = require("@tanstack/table-core");
+let _tanstack_vue_store = require("@tanstack/vue-store");
+
+//#region src/createTableHook.ts
+const AppFlexRender = (0, vue.defineComponent)({
+	name: "TableFlexRender",
+	props: {
+		cell: {
+			type: Object,
+			default: void 0
+		},
+		header: {
+			type: Object,
+			default: void 0
+		},
+		footer: {
+			type: Object,
+			default: void 0
+		}
+	},
+	setup(props) {
+		return () => {
+			if (props.cell) return (0, vue.h)(require_FlexRender.FlexRender, {
+				render: props.cell.column.columnDef.cell,
+				props: props.cell.getContext()
+			});
+			if (props.header) return (0, vue.h)(require_FlexRender.FlexRender, {
+				render: props.header.column.columnDef.header,
+				props: props.header.getContext()
+			});
+			if (props.footer) return (0, vue.h)(require_FlexRender.FlexRender, {
+				render: props.footer.column.columnDef.footer,
+				props: props.footer.getContext()
+			});
+			return null;
+		};
+	}
+});
+function createTableHook({ tableComponents, cellComponents, headerComponents, ...defaultTableOptions }) {
+	const TableContext = Symbol("TableContext");
+	const CellContext = Symbol("CellContext");
+	const HeaderContext = Symbol("HeaderContext");
+	function createAppColumnHelper() {
+		return (0, _tanstack_table_core.createColumnHelper)();
+	}
+	function useTableContext() {
+		const table = (0, vue.inject)(TableContext);
+		if (!table) throw new Error("`useTableContext` must be used within an `AppTable` component. Make sure your component is wrapped with `<table.AppTable>...</table.AppTable>`.");
+		return table;
+	}
+	function useCellContext() {
+		const cell = (0, vue.inject)(CellContext);
+		if (!cell) throw new Error("`useCellContext` must be used within an `AppCell` component. Make sure your component is wrapped with `<table.AppCell :cell=\"cell\">...</table.AppCell>`.");
+		return cell;
+	}
+	function useHeaderContext() {
+		const header = (0, vue.inject)(HeaderContext);
+		if (!header) throw new Error("`useHeaderContext` must be used within an `AppHeader` or `AppFooter` component.");
+		return header;
+	}
+	const CellFlexRender = (0, vue.defineComponent)({
+		name: "AppCellFlexRender",
+		setup() {
+			const cell = useCellContext();
+			return () => (0, vue.h)(AppFlexRender, { cell });
+		}
+	});
+	const HeaderFlexRender = (0, vue.defineComponent)({
+		name: "AppHeaderFlexRender",
+		setup() {
+			const header = useHeaderContext();
+			return () => (0, vue.h)(AppFlexRender, { header });
+		}
+	});
+	const FooterFlexRender = (0, vue.defineComponent)({
+		name: "AppFooterFlexRender",
+		setup() {
+			const header = useHeaderContext();
+			return () => (0, vue.h)(AppFlexRender, { footer: header });
+		}
+	});
+	function useAppTable(tableOptions, selector) {
+		const table = require_useTable.useTable(require_merge_proxy.mergeProxy(defaultTableOptions, tableOptions), selector);
+		const AppTable = (0, vue.defineComponent)({
+			name: "AppTable",
+			props: { selector: {
+				type: Function,
+				default: void 0
+			} },
+			setup(props, { slots }) {
+				(0, vue.provide)(TableContext, table);
+				const selected = props.selector ? (0, _tanstack_vue_store.useSelector)(table.store, props.selector) : void 0;
+				return () => {
+					var _slots$default2;
+					if (!props.selector) {
+						var _slots$default;
+						return (_slots$default = slots.default) === null || _slots$default === void 0 ? void 0 : _slots$default.call(slots);
+					}
+					return (_slots$default2 = slots.default) === null || _slots$default2 === void 0 ? void 0 : _slots$default2.call(slots, { state: selected === null || selected === void 0 ? void 0 : selected.value });
+				};
+			}
+		});
+		const AppCell = (0, vue.defineComponent)({
+			name: "AppCell",
+			props: {
+				cell: {
+					type: Object,
+					required: true
+				},
+				selector: {
+					type: Function,
+					default: void 0
+				}
+			},
+			setup(props, { slots }) {
+				const cell = props.cell;
+				(0, vue.provide)(CellContext, cell);
+				const selected = props.selector ? (0, _tanstack_vue_store.useSelector)(table.store, props.selector) : void 0;
+				const extendedCell = Object.assign(cell, {
+					FlexRender: CellFlexRender,
+					...cellComponents ?? {}
+				});
+				return () => {
+					var _slots$default3;
+					return (_slots$default3 = slots.default) === null || _slots$default3 === void 0 ? void 0 : _slots$default3.call(slots, props.selector ? {
+						cell: extendedCell,
+						state: selected === null || selected === void 0 ? void 0 : selected.value
+					} : { cell: extendedCell });
+				};
+			}
+		});
+		const AppHeader = (0, vue.defineComponent)({
+			name: "AppHeader",
+			props: {
+				header: {
+					type: Object,
+					required: true
+				},
+				selector: {
+					type: Function,
+					default: void 0
+				}
+			},
+			setup(props, { slots }) {
+				const header = props.header;
+				(0, vue.provide)(HeaderContext, header);
+				const selected = props.selector ? (0, _tanstack_vue_store.useSelector)(table.store, props.selector) : void 0;
+				const extendedHeader = Object.assign(header, {
+					FlexRender: HeaderFlexRender,
+					...headerComponents ?? {}
+				});
+				return () => {
+					var _slots$default4;
+					return (_slots$default4 = slots.default) === null || _slots$default4 === void 0 ? void 0 : _slots$default4.call(slots, props.selector ? {
+						header: extendedHeader,
+						state: selected === null || selected === void 0 ? void 0 : selected.value
+					} : { header: extendedHeader });
+				};
+			}
+		});
+		const AppFooter = (0, vue.defineComponent)({
+			name: "AppFooter",
+			props: {
+				header: {
+					type: Object,
+					required: true
+				},
+				selector: {
+					type: Function,
+					default: void 0
+				}
+			},
+			setup(props, { slots }) {
+				const header = props.header;
+				(0, vue.provide)(HeaderContext, header);
+				const selected = props.selector ? (0, _tanstack_vue_store.useSelector)(table.store, props.selector) : void 0;
+				const extendedHeader = Object.assign(header, {
+					FlexRender: FooterFlexRender,
+					...headerComponents ?? {}
+				});
+				return () => {
+					var _slots$default5;
+					return (_slots$default5 = slots.default) === null || _slots$default5 === void 0 ? void 0 : _slots$default5.call(slots, props.selector ? {
+						header: extendedHeader,
+						state: selected === null || selected === void 0 ? void 0 : selected.value
+					} : { header: extendedHeader });
+				};
+			}
+		});
+		return Object.assign(table, {
+			AppTable,
+			AppCell,
+			AppHeader,
+			AppFooter,
+			FlexRender: AppFlexRender,
+			...tableComponents ?? {}
+		});
+	}
+	return {
+		appFeatures: defaultTableOptions._features,
+		createAppColumnHelper,
+		useAppTable,
+		useTableContext,
+		useCellContext,
+		useHeaderContext
+	};
+}
+
+//#endregion
+exports.AppFlexRender = AppFlexRender;
+exports.createTableHook = createTableHook;
+//# sourceMappingURL=createTableHook.cjs.map

package/dist/createTableHook.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"createTableHook.cjs","names":["FlexRender","useTable","mergeProxy"],"sources":["../src/createTableHook.ts"],"sourcesContent":["import { createColumnHelper as coreCreateColumnHelper } from '@tanstack/table-core'\nimport { useSelector } from '@tanstack/vue-store'\nimport { defineComponent, h, inject, provide } from 'vue'\nimport { FlexRender } from './FlexRender'\nimport { mergeProxy } from './merge-proxy'\nimport { useTable } from './useTable'\nimport type { TableOptionsWithReactiveData, VueTable } from './useTable'\nimport type { Component, InjectionKey, PropType, VNodeChild } from 'vue'\nimport type {\n  AccessorFn,\n  AccessorFnColumnDef,\n  AccessorKeyColumnDef,\n  Cell,\n  CellContext,\n  CellData,\n  Column,\n  ColumnDef,\n  DeepKeys,\n  DeepValue,\n  DisplayColumnDef,\n  GroupColumnDef,\n  Header,\n  IdentifiedColumnDef,\n  NoInfer,\n  Row,\n  RowData,\n  Table,\n  TableFeatures,\n  TableState,\n} from '@tanstack/table-core'\n\nexport type ComponentType<T extends Record<string, any>> = Component<T>\n\nexport type AppCellContext<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TValue extends CellData,\n  TCellComponents extends Record<string, ComponentType<any>>,\n> = {\n  cell: Cell<TFeatures, TData, TValue> &\n    TCellComponents & { FlexRender: Component }\n  column: Column<TFeatures, TData, TValue>\n  getValue: CellContext<TFeatures, TData, TValue>['getValue']\n  renderValue: CellContext<TFeatures, TData, TValue>['renderValue']\n  row: Row<TFeatures, TData>\n  table: Table<TFeatures, TData>\n}\n\nexport type AppHeaderContext<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TValue extends CellData,\n  THeaderComponents extends Record<string, ComponentType<any>>,\n> = {\n  column: Column<TFeatures, TData, TValue>\n  header: Header<TFeatures, TData, TValue> &\n    THeaderComponents & { FlexRender: Component }\n  table: Table<TFeatures, TData>\n}\n\nexport type AppColumnDefTemplate<TProps extends object> =\n  | string\n  | ((props: TProps) => any)\n\nexport type AppColumnDefBase<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TValue extends CellData,\n  TCellComponents extends Record<string, ComponentType<any>>,\n  THeaderComponents extends Record<string, ComponentType<any>>,\n> = Omit<\n  IdentifiedColumnDef<TFeatures, TData, TValue>,\n  'cell' | 'header' | 'footer'\n> & {\n  cell?: AppColumnDefTemplate<\n    AppCellContext<TFeatures, TData, TValue, TCellComponents>\n  >\n  header?: AppColumnDefTemplate<\n    AppHeaderContext<TFeatures, TData, TValue, THeaderComponents>\n  >\n  footer?: AppColumnDefTemplate<\n    AppHeaderContext<TFeatures, TData, TValue, THeaderComponents>\n  >\n}\n\nexport type AppDisplayColumnDef<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TCellComponents extends Record<string, ComponentType<any>>,\n  THeaderComponents extends Record<string, ComponentType<any>>,\n> = Omit<\n  DisplayColumnDef<TFeatures, TData, unknown>,\n  'cell' | 'header' | 'footer'\n> & {\n  cell?: AppColumnDefTemplate<\n    AppCellContext<TFeatures, TData, unknown, TCellComponents>\n  >\n  header?: AppColumnDefTemplate<\n    AppHeaderContext<TFeatures, TData, unknown, THeaderComponents>\n  >\n  footer?: AppColumnDefTemplate<\n    AppHeaderContext<TFeatures, TData, unknown, THeaderComponents>\n  >\n}\n\nexport type AppGroupColumnDef<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TCellComponents extends Record<string, ComponentType<any>>,\n  THeaderComponents extends Record<string, ComponentType<any>>,\n> = Omit<\n  GroupColumnDef<TFeatures, TData, unknown>,\n  'cell' | 'header' | 'footer' | 'columns'\n> & {\n  cell?: AppColumnDefTemplate<\n    AppCellContext<TFeatures, TData, unknown, TCellComponents>\n  >\n  header?: AppColumnDefTemplate<\n    AppHeaderContext<TFeatures, TData, unknown, THeaderComponents>\n  >\n  footer?: AppColumnDefTemplate<\n    AppHeaderContext<TFeatures, TData, unknown, THeaderComponents>\n  >\n  columns?: Array<ColumnDef<TFeatures, TData, unknown>>\n}\n\nexport type AppColumnHelper<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TCellComponents extends Record<string, ComponentType<any>>,\n  THeaderComponents extends Record<string, ComponentType<any>>,\n> = {\n  accessor: <\n    TAccessor extends AccessorFn<TData> | DeepKeys<TData>,\n    TValue extends TAccessor extends AccessorFn<TData, infer TReturn>\n      ? TReturn\n      : TAccessor extends DeepKeys<TData>\n        ? DeepValue<TData, TAccessor>\n        : never,\n  >(\n    accessor: TAccessor,\n    column: TAccessor extends AccessorFn<TData>\n      ? AppColumnDefBase<\n          TFeatures,\n          TData,\n          TValue,\n          TCellComponents,\n          THeaderComponents\n        > & { id: string }\n      : AppColumnDefBase<\n          TFeatures,\n          TData,\n          TValue,\n          TCellComponents,\n          THeaderComponents\n        >,\n  ) => TAccessor extends AccessorFn<TData>\n    ? AccessorFnColumnDef<TFeatures, TData, TValue>\n    : AccessorKeyColumnDef<TFeatures, TData, TValue>\n  columns: <TColumns extends ReadonlyArray<ColumnDef<TFeatures, TData, any>>>(\n    columns: [...TColumns],\n  ) => Array<ColumnDef<TFeatures, TData, any>> & [...TColumns]\n  display: (\n    column: AppDisplayColumnDef<\n      TFeatures,\n      TData,\n      TCellComponents,\n      THeaderComponents\n    >,\n  ) => DisplayColumnDef<TFeatures, TData, unknown>\n  group: (\n    column: AppGroupColumnDef<\n      TFeatures,\n      TData,\n      TCellComponents,\n      THeaderComponents\n    >,\n  ) => GroupColumnDef<TFeatures, TData, unknown>\n}\n\nexport type CreateTableHookOptions<\n  TFeatures extends TableFeatures,\n  TTableComponents extends Record<string, ComponentType<any>>,\n  TCellComponents extends Record<string, ComponentType<any>>,\n  THeaderComponents extends Record<string, ComponentType<any>>,\n> = Omit<\n  TableOptionsWithReactiveData<TFeatures, any>,\n  'columns' | 'data' | 'store' | 'state' | 'initialState'\n> & {\n  tableComponents?: TTableComponents\n  cellComponents?: TCellComponents\n  headerComponents?: THeaderComponents\n}\n\nexport interface AppTableProps<\n  TFeatures extends TableFeatures,\n  TSelected = unknown,\n> {\n  selector?: (state: TableState<TFeatures>) => TSelected\n}\n\nexport interface AppCellProps<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TValue extends CellData = CellData,\n  TSelected = unknown,\n> {\n  cell: Cell<TFeatures, TData, TValue>\n  selector?: (state: TableState<TFeatures>) => TSelected\n}\n\nexport interface AppHeaderProps<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TValue extends CellData = CellData,\n  TSelected = unknown,\n> {\n  header: Header<TFeatures, TData, TValue>\n  selector?: (state: TableState<TFeatures>) => TSelected\n}\n\nexport type AppVueTable<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TSelected,\n  TTableComponents extends Record<string, ComponentType<any>>,\n  TCellComponents extends Record<string, ComponentType<any>>,\n  THeaderComponents extends Record<string, ComponentType<any>>,\n> = VueTable<TFeatures, TData, TSelected> &\n  NoInfer<TTableComponents> & {\n    AppTable: Component<AppTableProps<TFeatures>>\n    AppCell: Component<AppCellProps<TFeatures, TData>>\n    AppHeader: Component<AppHeaderProps<TFeatures, TData>>\n    AppFooter: Component<AppHeaderProps<TFeatures, TData>>\n    FlexRender: typeof AppFlexRender\n  }\n\nexport const AppFlexRender = defineComponent({\n  name: 'TableFlexRender',\n  props: {\n    cell: {\n      type: Object as PropType<Cell<any, any, any>>,\n      default: undefined,\n    },\n    header: {\n      type: Object as PropType<Header<any, any, any>>,\n      default: undefined,\n    },\n    footer: {\n      type: Object as PropType<Header<any, any, any>>,\n      default: undefined,\n    },\n  },\n  setup(props) {\n    return () => {\n      if (props.cell) {\n        return h(FlexRender, {\n          render: props.cell.column.columnDef.cell,\n          props: props.cell.getContext(),\n        })\n      }\n\n      if (props.header) {\n        return h(FlexRender, {\n          render: props.header.column.columnDef.header,\n          props: props.header.getContext(),\n        })\n      }\n\n      if (props.footer) {\n        return h(FlexRender, {\n          render: props.footer.column.columnDef.footer,\n          props: props.footer.getContext(),\n        })\n      }\n\n      return null\n    }\n  },\n})\n\nexport function createTableHook<\n  TFeatures extends TableFeatures,\n  const TTableComponents extends Record<string, ComponentType<any>>,\n  const TCellComponents extends Record<string, ComponentType<any>>,\n  const THeaderComponents extends Record<string, ComponentType<any>>,\n>({\n  tableComponents,\n  cellComponents,\n  headerComponents,\n  ...defaultTableOptions\n}: CreateTableHookOptions<\n  TFeatures,\n  TTableComponents,\n  TCellComponents,\n  THeaderComponents\n>) {\n  const TableContext = Symbol('TableContext') as InjectionKey<\n    VueTable<TFeatures, any, any>\n  >\n  const CellContext = Symbol('CellContext') as InjectionKey<\n    Cell<TFeatures, any, any>\n  >\n  const HeaderContext = Symbol('HeaderContext') as InjectionKey<\n    Header<TFeatures, any, any>\n  >\n\n  function createAppColumnHelper<TData extends RowData>(): AppColumnHelper<\n    TFeatures,\n    TData,\n    TCellComponents,\n    THeaderComponents\n  > {\n    return coreCreateColumnHelper<TFeatures, TData>() as AppColumnHelper<\n      TFeatures,\n      TData,\n      TCellComponents,\n      THeaderComponents\n    >\n  }\n\n  function useTableContext<TData extends RowData = RowData>(): VueTable<\n    TFeatures,\n    TData\n  > {\n    const table = inject(TableContext)\n\n    if (!table) {\n      throw new Error(\n        '`useTableContext` must be used within an `AppTable` component. ' +\n          'Make sure your component is wrapped with `<table.AppTable>...</table.AppTable>`.',\n      )\n    }\n\n    return table as VueTable<TFeatures, TData>\n  }\n\n  function useCellContext<TValue extends CellData = CellData>(): Cell<\n    TFeatures,\n    any,\n    TValue\n  > {\n    const cell = inject(CellContext)\n\n    if (!cell) {\n      throw new Error(\n        '`useCellContext` must be used within an `AppCell` component. ' +\n          'Make sure your component is wrapped with `<table.AppCell :cell=\"cell\">...</table.AppCell>`.',\n      )\n    }\n\n    return cell as Cell<TFeatures, any, TValue>\n  }\n\n  function useHeaderContext<TValue extends CellData = CellData>(): Header<\n    TFeatures,\n    any,\n    TValue\n  > {\n    const header = inject(HeaderContext)\n\n    if (!header) {\n      throw new Error(\n        '`useHeaderContext` must be used within an `AppHeader` or `AppFooter` component.',\n      )\n    }\n\n    return header as Header<TFeatures, any, TValue>\n  }\n\n  const CellFlexRender = defineComponent({\n    name: 'AppCellFlexRender',\n    setup() {\n      const cell = useCellContext()\n      return () => h(AppFlexRender, { cell })\n    },\n  })\n\n  const HeaderFlexRender = defineComponent({\n    name: 'AppHeaderFlexRender',\n    setup() {\n      const header = useHeaderContext()\n      return () => h(AppFlexRender, { header })\n    },\n  })\n\n  const FooterFlexRender = defineComponent({\n    name: 'AppFooterFlexRender',\n    setup() {\n      const header = useHeaderContext()\n      return () => h(AppFlexRender, { footer: header })\n    },\n  })\n\n  function useAppTable<TData extends RowData, TSelected = {}>(\n    tableOptions: Omit<\n      TableOptionsWithReactiveData<TFeatures, TData>,\n      '_features' | '_rowModels'\n    >,\n    selector?: (state: TableState<TFeatures>) => TSelected,\n  ): AppVueTable<\n    TFeatures,\n    TData,\n    TSelected,\n    TTableComponents,\n    TCellComponents,\n    THeaderComponents\n  > {\n    const mergedOptions = mergeProxy(\n      defaultTableOptions,\n      tableOptions,\n    ) as TableOptionsWithReactiveData<TFeatures, TData>\n\n    const table = useTable<TFeatures, TData, TSelected>(mergedOptions, selector)\n\n    const AppTable = defineComponent({\n      name: 'AppTable',\n      props: {\n        selector: {\n          type: Function as PropType<(state: TableState<TFeatures>) => unknown>,\n          default: undefined,\n        },\n      },\n      setup(props, { slots }) {\n        provide(TableContext, table)\n        const selected = props.selector\n          ? useSelector(table.store, props.selector)\n          : undefined\n\n        return () => {\n          if (!props.selector) {\n            return slots.default?.()\n          }\n\n          return slots.default?.({ state: selected?.value })\n        }\n      },\n    })\n\n    const AppCell = defineComponent({\n      name: 'AppCell',\n      props: {\n        cell: {\n          type: Object as PropType<object>,\n          required: true,\n        },\n        selector: {\n          type: Function as PropType<(state: TableState<TFeatures>) => unknown>,\n          default: undefined,\n        },\n      },\n      setup(props, { slots }) {\n        const cell = props.cell as Cell<TFeatures, TData, any>\n\n        provide(CellContext, cell)\n\n        const selected = props.selector\n          ? useSelector(table.store, props.selector)\n          : undefined\n\n        const extendedCell = Object.assign(cell, {\n          FlexRender: CellFlexRender,\n          ...(cellComponents ?? {}),\n        }) as Cell<TFeatures, TData, any> &\n          TCellComponents & { FlexRender: Component }\n\n        return () => {\n          return slots.default?.(\n            props.selector\n              ? { cell: extendedCell, state: selected?.value }\n              : { cell: extendedCell },\n          )\n        }\n      },\n    })\n\n    const AppHeader = defineComponent({\n      name: 'AppHeader',\n      props: {\n        header: {\n          type: Object as PropType<object>,\n          required: true,\n        },\n        selector: {\n          type: Function as PropType<(state: TableState<TFeatures>) => unknown>,\n          default: undefined,\n        },\n      },\n      setup(props, { slots }) {\n        const header = props.header as Header<TFeatures, TData, any>\n\n        provide(HeaderContext, header)\n\n        const selected = props.selector\n          ? useSelector(table.store, props.selector)\n          : undefined\n\n        const extendedHeader = Object.assign(header, {\n          FlexRender: HeaderFlexRender,\n          ...(headerComponents ?? {}),\n        }) as Header<TFeatures, TData, any> &\n          THeaderComponents & { FlexRender: Component }\n\n        return () => {\n          return slots.default?.(\n            props.selector\n              ? { header: extendedHeader, state: selected?.value }\n              : { header: extendedHeader },\n          )\n        }\n      },\n    })\n\n    const AppFooter = defineComponent({\n      name: 'AppFooter',\n      props: {\n        header: {\n          type: Object as PropType<object>,\n          required: true,\n        },\n        selector: {\n          type: Function as PropType<(state: TableState<TFeatures>) => unknown>,\n          default: undefined,\n        },\n      },\n      setup(props, { slots }) {\n        const header = props.header as Header<TFeatures, TData, any>\n\n        provide(HeaderContext, header)\n\n        const selected = props.selector\n          ? useSelector(table.store, props.selector)\n          : undefined\n\n        const extendedHeader = Object.assign(header, {\n          FlexRender: FooterFlexRender,\n          ...(headerComponents ?? {}),\n        }) as Header<TFeatures, TData, any> &\n          THeaderComponents & { FlexRender: Component }\n\n        return () => {\n          return slots.default?.(\n            props.selector\n              ? { header: extendedHeader, state: selected?.value }\n              : { header: extendedHeader },\n          )\n        }\n      },\n    })\n\n    return Object.assign(table, {\n      AppTable,\n      AppCell,\n      AppHeader,\n      AppFooter,\n      FlexRender: AppFlexRender,\n      ...(tableComponents ?? {}),\n    }) as AppVueTable<\n      TFeatures,\n      TData,\n      TSelected,\n      TTableComponents,\n      TCellComponents,\n      THeaderComponents\n    >\n  }\n\n  return {\n    appFeatures: defaultTableOptions._features as TFeatures,\n    createAppColumnHelper,\n    useAppTable,\n    useTableContext,\n    useCellContext,\n    useHeaderContext,\n  }\n}\n"],"mappings":"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"}