@tanstack/vue-table 9.0.0-beta.3 → 9.0.0-beta.30

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (40) hide show
  1. package/README.md +1 -0
  2. package/dist/FlexRender.cjs.map +1 -1
  3. package/dist/FlexRender.d.cts +30 -12
  4. package/dist/FlexRender.d.ts +30 -12
  5. package/dist/FlexRender.js.map +1 -1
  6. package/dist/createTableHook.cjs +23 -64
  7. package/dist/createTableHook.cjs.map +1 -1
  8. package/dist/createTableHook.d.cts +52 -28
  9. package/dist/createTableHook.d.ts +52 -28
  10. package/dist/createTableHook.js +23 -64
  11. package/dist/createTableHook.js.map +1 -1
  12. package/dist/flex-render.d.cts +2 -2
  13. package/dist/flex-render.d.ts +2 -2
  14. package/dist/index.d.cts +4 -4
  15. package/dist/index.d.ts +4 -4
  16. package/dist/reactivity.cjs +10 -19
  17. package/dist/reactivity.cjs.map +1 -1
  18. package/dist/reactivity.js +10 -19
  19. package/dist/reactivity.js.map +1 -1
  20. package/dist/useTable.cjs +12 -20
  21. package/dist/useTable.cjs.map +1 -1
  22. package/dist/useTable.d.cts +11 -51
  23. package/dist/useTable.d.ts +11 -51
  24. package/dist/useTable.js +13 -21
  25. package/dist/useTable.js.map +1 -1
  26. package/package.json +4 -4
  27. package/skills/vue/client-to-server/SKILL.md +21 -26
  28. package/skills/vue/compose-with-tanstack-form/SKILL.md +4 -4
  29. package/skills/vue/compose-with-tanstack-pacer/SKILL.md +6 -3
  30. package/skills/vue/compose-with-tanstack-query/SKILL.md +18 -20
  31. package/skills/vue/compose-with-tanstack-store/SKILL.md +7 -6
  32. package/skills/vue/compose-with-tanstack-virtual/SKILL.md +8 -4
  33. package/skills/vue/getting-started/SKILL.md +55 -49
  34. package/skills/vue/migrate-v8-to-v9/SKILL.md +50 -32
  35. package/skills/vue/production-readiness/SKILL.md +28 -21
  36. package/skills/vue/table-state/SKILL.md +22 -26
  37. package/src/FlexRender.ts +28 -13
  38. package/src/createTableHook.ts +126 -90
  39. package/src/reactivity.ts +17 -43
  40. package/src/useTable.ts +23 -101
package/README.md CHANGED
@@ -39,6 +39,7 @@
39
39
  > - [Solid Table](https://tanstack.com/table/alpha/docs/framework/solid/solid-table)
40
40
  > - [Svelte Table](https://tanstack.com/table/alpha/docs/framework/svelte/svelte-table)
41
41
  > - [Vue Table](https://tanstack.com/table/alpha/docs/framework/vue/vue-table)
42
+ > - [Alpine Table](https://tanstack.com/table/alpha/docs/framework/alpine/alpine-table)
42
43
 
43
44
  A headless table library for building powerful datagrids with full control over markup, styles, and behavior.
44
45
 
@@ -1 +1 @@
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;CACvD,IAAI,OAAO,WAAW,YAAY;EAChC,MAAM,WAAW,OAAO,KAAK;EAE7B,qBAAY,QAAQ,GAClB,OAAO;EAGT,IAAI,OAAO,aAAa,cAAc,OAAO,aAAa,UACxD,kBAAS,UAAU,KAAK;EAG1B,OAAO;CACT;CAEA,IAAI,OAAO,WAAW,UACpB,kBAAS,QAAQ,KAAK;CAGxB,OAAO;AACT;;;;;;;;;;;;;;;;AAiBA,MAAa,sCAA6B;CACxC,OAAO;EACL,QAAQ;GACN,MAAM;IAAC;IAAU;IAAQ;GAAM;GAC/B,SAAS;EACX;EACA,OAAO;GACL,MAAM;GACN,SAAS;EACX;EACA,MAAM;GACJ,MAAM;GACN,SAAS;EACX;EACA,QAAQ;GACN,MAAM;GACN,SAAS;EACX;EACA,QAAQ;GACN,MAAM;GACN,SAAS;EACX;CACF;CACA,QAAQ,UAMF;EACJ,aAAa;GAEX,IAAI,MAAM,MAAM;;IACd,MAAM,OAAO,MAAM;IACnB,MAAM,MAAM,KAAK,OAAO;IAUxB,6BAAI,KAAK,wGAAkB,GACzB,OAAO,WAAW,IAAI,kBAAkB,IAAI,MAAM,KAAK,WAAW,CAAC;IAErE,6BAAI,KAAK,yGAAmB,GAC1B,OAAO;IAET,OAAO,WAAW,IAAI,MAAM,KAAK,WAAW,CAAC;GAC/C;GAEA,IAAI,MAAM,QACR,OAAO,WACL,MAAM,OAAO,OAAO,UAAU,QAC9B,MAAM,OAAO,WAAW,CAC1B;GAGF,IAAI,MAAM,QACR,OAAO,WACL,MAAM,OAAO,OAAO,UAAU,QAC9B,MAAM,OAAO,WAAW,CAC1B;GAIF,OAAO,WAAW,MAAM,QAAQ,MAAM,KAAK;EAC7C;CACF;AACF,CAAC"}
1
+ {"version":3,"file":"FlexRender.cjs","names":[],"sources":["../src/FlexRender.ts"],"sourcesContent":["import { defineComponent, h, isVNode } from 'vue'\nimport type { PropType } from 'vue'\n\nexport interface FlexRenderCell {\n column: {\n columnDef: {\n aggregatedCell?: any\n cell?: any\n }\n }\n getContext: () => any\n getIsAggregated?: () => boolean\n getIsPlaceholder?: () => boolean\n}\n\nexport interface FlexRenderHeader {\n column: {\n columnDef: {\n footer?: any\n header?: any\n }\n }\n getContext: () => any\n}\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<FlexRenderCell>,\n default: undefined,\n },\n header: {\n type: Object as PropType<FlexRenderHeader>,\n default: undefined,\n },\n footer: {\n type: Object as PropType<FlexRenderHeader>,\n default: undefined,\n },\n },\n setup: (props: {\n render?: any\n props?: any\n cell?: FlexRenderCell\n header?: FlexRenderHeader\n footer?: FlexRenderHeader\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":";;;;;;;AA6BA,SAAgB,WAAW,QAAa,OAAiB;CACvD,IAAI,OAAO,WAAW,YAAY;EAChC,MAAM,WAAW,OAAO,KAAK;EAE7B,qBAAY,QAAQ,GAClB,OAAO;EAGT,IAAI,OAAO,aAAa,cAAc,OAAO,aAAa,UACxD,kBAAS,UAAU,KAAK;EAG1B,OAAO;CACT;CAEA,IAAI,OAAO,WAAW,UACpB,kBAAS,QAAQ,KAAK;CAGxB,OAAO;AACT;;;;;;;;;;;;;;;;AAiBA,MAAa,sCAA6B;CACxC,OAAO;EACL,QAAQ;GACN,MAAM;IAAC;IAAU;IAAQ;GAAM;GAC/B,SAAS;EACX;EACA,OAAO;GACL,MAAM;GACN,SAAS;EACX;EACA,MAAM;GACJ,MAAM;GACN,SAAS;EACX;EACA,QAAQ;GACN,MAAM;GACN,SAAS;EACX;EACA,QAAQ;GACN,MAAM;GACN,SAAS;EACX;CACF;CACA,QAAQ,UAMF;EACJ,aAAa;GAEX,IAAI,MAAM,MAAM;;IACd,MAAM,OAAO,MAAM;IACnB,MAAM,MAAM,KAAK,OAAO;IAUxB,6BAAI,KAAK,wGAAkB,GACzB,OAAO,WAAW,IAAI,kBAAkB,IAAI,MAAM,KAAK,WAAW,CAAC;IAErE,6BAAI,KAAK,yGAAmB,GAC1B,OAAO;IAET,OAAO,WAAW,IAAI,MAAM,KAAK,WAAW,CAAC;GAC/C;GAEA,IAAI,MAAM,QACR,OAAO,WACL,MAAM,OAAO,OAAO,UAAU,QAC9B,MAAM,OAAO,WAAW,CAC1B;GAGF,IAAI,MAAM,QACR,OAAO,WACL,MAAM,OAAO,OAAO,UAAU,QAC9B,MAAM,OAAO,WAAW,CAC1B;GAIF,OAAO,WAAW,MAAM,QAAQ,MAAM,KAAK;EAC7C;CACF;AACF,CAAC"}
@@ -1,6 +1,24 @@
1
- import { Cell, Header } from "@tanstack/table-core";
2
-
3
1
  //#region src/FlexRender.d.ts
2
+ interface FlexRenderCell {
3
+ column: {
4
+ columnDef: {
5
+ aggregatedCell?: any;
6
+ cell?: any;
7
+ };
8
+ };
9
+ getContext: () => any;
10
+ getIsAggregated?: () => boolean;
11
+ getIsPlaceholder?: () => boolean;
12
+ }
13
+ interface FlexRenderHeader {
14
+ column: {
15
+ columnDef: {
16
+ footer?: any;
17
+ header?: any;
18
+ };
19
+ };
20
+ getContext: () => any;
21
+ }
4
22
  /**
5
23
  * If rendering headers, cells, or footers with custom markup, use flexRender instead of `cell.getValue()` or `cell.renderValue()`.
6
24
  * @example flexRender(cell.column.columnDef.cell, cell.getContext())
@@ -24,22 +42,22 @@ declare function flexRender(render: any, props: any): any;
24
42
  declare const FlexRender: import("vue").DefineComponent<{
25
43
  render?: any;
26
44
  props?: any;
27
- cell?: Cell<any, any, any>;
28
- header?: Header<any, any, any>;
29
- footer?: Header<any, any, any>;
45
+ cell?: FlexRenderCell | undefined;
46
+ header?: FlexRenderHeader | undefined;
47
+ footer?: FlexRenderHeader | undefined;
30
48
  }, () => any, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
31
49
  render?: any;
32
50
  props?: any;
33
- cell?: Cell<any, any, any>;
34
- header?: Header<any, any, any>;
35
- footer?: Header<any, any, any>;
51
+ cell?: FlexRenderCell | undefined;
52
+ header?: FlexRenderHeader | undefined;
53
+ footer?: FlexRenderHeader | undefined;
36
54
  }> & Readonly<{}>, {
37
55
  props: any;
38
56
  render: any;
39
- cell: any;
40
- header: any;
41
- footer: any;
57
+ cell: FlexRenderCell;
58
+ header: FlexRenderHeader;
59
+ footer: FlexRenderHeader;
42
60
  }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
43
61
  //#endregion
44
- export { FlexRender, flexRender };
62
+ export { FlexRender, FlexRenderCell, FlexRenderHeader, flexRender };
45
63
  //# sourceMappingURL=FlexRender.d.cts.map
@@ -1,6 +1,24 @@
1
- import { Cell, Header } from "@tanstack/table-core";
2
-
3
1
  //#region src/FlexRender.d.ts
2
+ interface FlexRenderCell {
3
+ column: {
4
+ columnDef: {
5
+ aggregatedCell?: any;
6
+ cell?: any;
7
+ };
8
+ };
9
+ getContext: () => any;
10
+ getIsAggregated?: () => boolean;
11
+ getIsPlaceholder?: () => boolean;
12
+ }
13
+ interface FlexRenderHeader {
14
+ column: {
15
+ columnDef: {
16
+ footer?: any;
17
+ header?: any;
18
+ };
19
+ };
20
+ getContext: () => any;
21
+ }
4
22
  /**
5
23
  * If rendering headers, cells, or footers with custom markup, use flexRender instead of `cell.getValue()` or `cell.renderValue()`.
6
24
  * @example flexRender(cell.column.columnDef.cell, cell.getContext())
@@ -24,22 +42,22 @@ declare function flexRender(render: any, props: any): any;
24
42
  declare const FlexRender: import("vue").DefineComponent<{
25
43
  render?: any;
26
44
  props?: any;
27
- cell?: Cell<any, any, any>;
28
- header?: Header<any, any, any>;
29
- footer?: Header<any, any, any>;
45
+ cell?: FlexRenderCell | undefined;
46
+ header?: FlexRenderHeader | undefined;
47
+ footer?: FlexRenderHeader | undefined;
30
48
  }, () => any, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
31
49
  render?: any;
32
50
  props?: any;
33
- cell?: Cell<any, any, any>;
34
- header?: Header<any, any, any>;
35
- footer?: Header<any, any, any>;
51
+ cell?: FlexRenderCell | undefined;
52
+ header?: FlexRenderHeader | undefined;
53
+ footer?: FlexRenderHeader | undefined;
36
54
  }> & Readonly<{}>, {
37
55
  props: any;
38
56
  render: any;
39
- cell: any;
40
- header: any;
41
- footer: any;
57
+ cell: FlexRenderCell;
58
+ header: FlexRenderHeader;
59
+ footer: FlexRenderHeader;
42
60
  }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
43
61
  //#endregion
44
- export { FlexRender, flexRender };
62
+ export { FlexRender, FlexRenderCell, FlexRenderHeader, flexRender };
45
63
  //# sourceMappingURL=FlexRender.d.ts.map
@@ -1 +1 @@
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;CACvD,IAAI,OAAO,WAAW,YAAY;EAChC,MAAM,WAAW,OAAO,KAAK;EAE7B,IAAI,QAAQ,QAAQ,GAClB,OAAO;EAGT,IAAI,OAAO,aAAa,cAAc,OAAO,aAAa,UACxD,OAAO,EAAE,UAAU,KAAK;EAG1B,OAAO;CACT;CAEA,IAAI,OAAO,WAAW,UACpB,OAAO,EAAE,QAAQ,KAAK;CAGxB,OAAO;AACT;;;;;;;;;;;;;;;;AAiBA,MAAa,aAAa,gBAAgB;CACxC,OAAO;EACL,QAAQ;GACN,MAAM;IAAC;IAAU;IAAQ;GAAM;GAC/B,SAAS;EACX;EACA,OAAO;GACL,MAAM;GACN,SAAS;EACX;EACA,MAAM;GACJ,MAAM;GACN,SAAS;EACX;EACA,QAAQ;GACN,MAAM;GACN,SAAS;EACX;EACA,QAAQ;GACN,MAAM;GACN,SAAS;EACX;CACF;CACA,QAAQ,UAMF;EACJ,aAAa;GAEX,IAAI,MAAM,MAAM;;IACd,MAAM,OAAO,MAAM;IACnB,MAAM,MAAM,KAAK,OAAO;IAUxB,6BAAI,KAAK,wGAAkB,GACzB,OAAO,WAAW,IAAI,kBAAkB,IAAI,MAAM,KAAK,WAAW,CAAC;IAErE,6BAAI,KAAK,yGAAmB,GAC1B,OAAO;IAET,OAAO,WAAW,IAAI,MAAM,KAAK,WAAW,CAAC;GAC/C;GAEA,IAAI,MAAM,QACR,OAAO,WACL,MAAM,OAAO,OAAO,UAAU,QAC9B,MAAM,OAAO,WAAW,CAC1B;GAGF,IAAI,MAAM,QACR,OAAO,WACL,MAAM,OAAO,OAAO,UAAU,QAC9B,MAAM,OAAO,WAAW,CAC1B;GAIF,OAAO,WAAW,MAAM,QAAQ,MAAM,KAAK;EAC7C;CACF;AACF,CAAC"}
1
+ {"version":3,"file":"FlexRender.js","names":[],"sources":["../src/FlexRender.ts"],"sourcesContent":["import { defineComponent, h, isVNode } from 'vue'\nimport type { PropType } from 'vue'\n\nexport interface FlexRenderCell {\n column: {\n columnDef: {\n aggregatedCell?: any\n cell?: any\n }\n }\n getContext: () => any\n getIsAggregated?: () => boolean\n getIsPlaceholder?: () => boolean\n}\n\nexport interface FlexRenderHeader {\n column: {\n columnDef: {\n footer?: any\n header?: any\n }\n }\n getContext: () => any\n}\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<FlexRenderCell>,\n default: undefined,\n },\n header: {\n type: Object as PropType<FlexRenderHeader>,\n default: undefined,\n },\n footer: {\n type: Object as PropType<FlexRenderHeader>,\n default: undefined,\n },\n },\n setup: (props: {\n render?: any\n props?: any\n cell?: FlexRenderCell\n header?: FlexRenderHeader\n footer?: FlexRenderHeader\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":";;;;;;;AA6BA,SAAgB,WAAW,QAAa,OAAiB;CACvD,IAAI,OAAO,WAAW,YAAY;EAChC,MAAM,WAAW,OAAO,KAAK;EAE7B,IAAI,QAAQ,QAAQ,GAClB,OAAO;EAGT,IAAI,OAAO,aAAa,cAAc,OAAO,aAAa,UACxD,OAAO,EAAE,UAAU,KAAK;EAG1B,OAAO;CACT;CAEA,IAAI,OAAO,WAAW,UACpB,OAAO,EAAE,QAAQ,KAAK;CAGxB,OAAO;AACT;;;;;;;;;;;;;;;;AAiBA,MAAa,aAAa,gBAAgB;CACxC,OAAO;EACL,QAAQ;GACN,MAAM;IAAC;IAAU;IAAQ;GAAM;GAC/B,SAAS;EACX;EACA,OAAO;GACL,MAAM;GACN,SAAS;EACX;EACA,MAAM;GACJ,MAAM;GACN,SAAS;EACX;EACA,QAAQ;GACN,MAAM;GACN,SAAS;EACX;EACA,QAAQ;GACN,MAAM;GACN,SAAS;EACX;CACF;CACA,QAAQ,UAMF;EACJ,aAAa;GAEX,IAAI,MAAM,MAAM;;IACd,MAAM,OAAO,MAAM;IACnB,MAAM,MAAM,KAAK,OAAO;IAUxB,6BAAI,KAAK,wGAAkB,GACzB,OAAO,WAAW,IAAI,kBAAkB,IAAI,MAAM,KAAK,WAAW,CAAC;IAErE,6BAAI,KAAK,yGAAmB,GAC1B,OAAO;IAET,OAAO,WAAW,IAAI,MAAM,KAAK,WAAW,CAAC;GAC/C;GAEA,IAAI,MAAM,QACR,OAAO,WACL,MAAM,OAAO,OAAO,UAAU,QAC9B,MAAM,OAAO,WAAW,CAC1B;GAGF,IAAI,MAAM,QACR,OAAO,WACL,MAAM,OAAO,OAAO,UAAU,QAC9B,MAAM,OAAO,WAAW,CAC1B;GAIF,OAAO,WAAW,MAAM,QAAQ,MAAM,KAAK;EAC7C;CACF;AACF,CAAC"}
@@ -3,7 +3,6 @@ const require_merge_proxy = require('./merge-proxy.cjs');
3
3
  const require_useTable = require('./useTable.cjs');
4
4
  let vue = require("vue");
5
5
  let _tanstack_table_core = require("@tanstack/table-core");
6
- let _tanstack_vue_store = require("@tanstack/vue-store");
7
6
 
8
7
  //#region src/createTableHook.ts
9
8
  const AppFlexRender = (0, vue.defineComponent)({
@@ -51,7 +50,6 @@ const AppFlexRender = (0, vue.defineComponent)({
51
50
  * ```ts
52
51
  * const { useAppTable, createAppColumnHelper } = createTableHook({
53
52
  * features,
54
- * rowModels: {},
55
53
  * tableComponents: {},
56
54
  * cellComponents: {},
57
55
  * headerComponents: {},
@@ -101,111 +99,72 @@ function createTableHook({ tableComponents, cellComponents, headerComponents, ..
101
99
  return () => (0, vue.h)(AppFlexRender, { footer: header });
102
100
  }
103
101
  });
104
- function useAppTable(tableOptions, selector) {
105
- const table = require_useTable.useTable(require_merge_proxy.mergeProxy(defaultTableOptions, tableOptions), selector);
102
+ function useAppTable(tableOptions) {
103
+ const table = require_useTable.useTable(require_merge_proxy.mergeProxy(defaultTableOptions, tableOptions));
106
104
  const AppTable = (0, vue.defineComponent)({
107
105
  name: "AppTable",
108
- props: { selector: {
109
- type: Function,
110
- default: void 0
111
- } },
112
- setup(props, { slots }) {
106
+ setup(_, { slots }) {
113
107
  (0, vue.provide)(TableContext, table);
114
- const selected = props.selector ? (0, _tanstack_vue_store.useSelector)(table.store, props.selector) : void 0;
115
108
  return () => {
116
- var _slots$default2;
117
- if (!props.selector) {
118
- var _slots$default;
119
- return (_slots$default = slots.default) === null || _slots$default === void 0 ? void 0 : _slots$default.call(slots);
120
- }
121
- 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 });
109
+ var _slots$default;
110
+ return (_slots$default = slots.default) === null || _slots$default === void 0 ? void 0 : _slots$default.call(slots);
122
111
  };
123
112
  }
124
113
  });
125
114
  const AppCell = (0, vue.defineComponent)({
126
115
  name: "AppCell",
127
- props: {
128
- cell: {
129
- type: Object,
130
- required: true
131
- },
132
- selector: {
133
- type: Function,
134
- default: void 0
135
- }
136
- },
116
+ props: { cell: {
117
+ type: Object,
118
+ required: true
119
+ } },
137
120
  setup(props, { slots }) {
138
121
  const cell = props.cell;
139
122
  (0, vue.provide)(CellContext, cell);
140
- const selected = props.selector ? (0, _tanstack_vue_store.useSelector)(table.store, props.selector) : void 0;
141
123
  const extendedCell = Object.assign(cell, {
142
124
  FlexRender: CellFlexRender,
143
125
  ...cellComponents ?? {}
144
126
  });
145
127
  return () => {
146
- var _slots$default3;
147
- return (_slots$default3 = slots.default) === null || _slots$default3 === void 0 ? void 0 : _slots$default3.call(slots, props.selector ? {
148
- cell: extendedCell,
149
- state: selected === null || selected === void 0 ? void 0 : selected.value
150
- } : { cell: extendedCell });
128
+ var _slots$default2;
129
+ return (_slots$default2 = slots.default) === null || _slots$default2 === void 0 ? void 0 : _slots$default2.call(slots, { cell: extendedCell });
151
130
  };
152
131
  }
153
132
  });
154
133
  const AppHeader = (0, vue.defineComponent)({
155
134
  name: "AppHeader",
156
- props: {
157
- header: {
158
- type: Object,
159
- required: true
160
- },
161
- selector: {
162
- type: Function,
163
- default: void 0
164
- }
165
- },
135
+ props: { header: {
136
+ type: Object,
137
+ required: true
138
+ } },
166
139
  setup(props, { slots }) {
167
140
  const header = props.header;
168
141
  (0, vue.provide)(HeaderContext, header);
169
- const selected = props.selector ? (0, _tanstack_vue_store.useSelector)(table.store, props.selector) : void 0;
170
142
  const extendedHeader = Object.assign(header, {
171
143
  FlexRender: HeaderFlexRender,
172
144
  ...headerComponents ?? {}
173
145
  });
174
146
  return () => {
175
- var _slots$default4;
176
- return (_slots$default4 = slots.default) === null || _slots$default4 === void 0 ? void 0 : _slots$default4.call(slots, props.selector ? {
177
- header: extendedHeader,
178
- state: selected === null || selected === void 0 ? void 0 : selected.value
179
- } : { header: extendedHeader });
147
+ var _slots$default3;
148
+ return (_slots$default3 = slots.default) === null || _slots$default3 === void 0 ? void 0 : _slots$default3.call(slots, { header: extendedHeader });
180
149
  };
181
150
  }
182
151
  });
183
152
  const AppFooter = (0, vue.defineComponent)({
184
153
  name: "AppFooter",
185
- props: {
186
- header: {
187
- type: Object,
188
- required: true
189
- },
190
- selector: {
191
- type: Function,
192
- default: void 0
193
- }
194
- },
154
+ props: { header: {
155
+ type: Object,
156
+ required: true
157
+ } },
195
158
  setup(props, { slots }) {
196
159
  const header = props.header;
197
160
  (0, vue.provide)(HeaderContext, header);
198
- const selected = props.selector ? (0, _tanstack_vue_store.useSelector)(table.store, props.selector) : void 0;
199
161
  const extendedHeader = Object.assign(header, {
200
162
  FlexRender: FooterFlexRender,
201
163
  ...headerComponents ?? {}
202
164
  });
203
165
  return () => {
204
- var _slots$default5;
205
- return (_slots$default5 = slots.default) === null || _slots$default5 === void 0 ? void 0 : _slots$default5.call(slots, props.selector ? {
206
- header: extendedHeader,
207
- state: selected === null || selected === void 0 ? void 0 : selected.value
208
- } : { header: extendedHeader });
166
+ var _slots$default4;
167
+ return (_slots$default4 = slots.default) === null || _slots$default4 === void 0 ? void 0 : _slots$default4.call(slots, { header: extendedHeader });
209
168
  };
210
169
  }
211
170
  });
@@ -1 +1 @@
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\n/**\n * Creates app-scoped Vue table helpers with features, row models, and\n * renderable component maps pre-bound.\n *\n * Use this when an app or design system wants typed `useAppTable`, a pre-bound\n * column helper, and context helpers for table, cell, and header components.\n *\n * @example\n * ```ts\n * const { useAppTable, createAppColumnHelper } = createTableHook({\n * features,\n * rowModels: {},\n * tableComponents: {},\n * cellComponents: {},\n * headerComponents: {},\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<\n TData extends RowData,\n TSelected = TableState<TFeatures>,\n >(\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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"}
1
+ {"version":3,"file":"createTableHook.cjs","names":["FlexRender","useTable","mergeProxy"],"sources":["../src/createTableHook.ts"],"sourcesContent":["import { createColumnHelper as coreCreateColumnHelper } from '@tanstack/table-core'\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 { FlexRenderCell, FlexRenderHeader } from './FlexRender'\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\nexport interface AppCellProps<\n TFeatures extends TableFeatures,\n TData extends RowData,\n TValue extends CellData = CellData,\n> {\n cell: Cell<TFeatures, TData, TValue>\n}\n\nexport interface AppHeaderProps<\n TFeatures extends TableFeatures,\n TData extends RowData,\n TValue extends CellData = CellData,\n> {\n header: Header<TFeatures, TData, TValue>\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> &\n NoInfer<TTableComponents> & {\n AppTable: Component<AppTableProps>\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 interface CreateTableHookResult<\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> {\n /** The features object that was passed to `createTableHook`. */\n appFeatures: TFeatures\n /**\n * A column helper pre-bound to `TFeatures` and the registered components, so\n * the cell/header/footer render props expose the bound components.\n */\n createAppColumnHelper: <TData extends RowData>() => AppColumnHelper<\n TFeatures,\n TData,\n TCellComponents,\n THeaderComponents\n >\n /**\n * Creates a table with the `App*` wrapper components and registered\n * `tableComponents` attached. `TData` is inferred from the `data` option.\n */\n useAppTable: <TData extends RowData>(\n tableOptions: Omit<\n TableOptionsWithReactiveData<TFeatures, TData>,\n 'features'\n >,\n ) => AppVueTable<\n TFeatures,\n TData,\n TableState<TFeatures>,\n TTableComponents,\n TCellComponents,\n THeaderComponents\n >\n /**\n * Reads the table provided by the nearest `<table.AppTable>`. This is the same\n * extended instance `useAppTable` returns, so the `App*` components and your\n * `tableComponents` are available on it.\n */\n useTableContext: <TData extends RowData = RowData>() => AppVueTable<\n TFeatures,\n TData,\n TableState<TFeatures>,\n TTableComponents,\n TCellComponents,\n THeaderComponents\n >\n /**\n * Reads the cell provided by the nearest `<table.AppCell>`, extended with your\n * `cellComponents` and a context-bound `FlexRender`.\n */\n useCellContext: <TValue extends CellData = CellData>() => Cell<\n TFeatures,\n any,\n TValue\n > &\n TCellComponents & { FlexRender: Component }\n /**\n * Reads the header provided by the nearest `<table.AppHeader>` /\n * `<table.AppFooter>`, extended with your `headerComponents` and a\n * context-bound `FlexRender`.\n */\n useHeaderContext: <TValue extends CellData = CellData>() => Header<\n TFeatures,\n any,\n TValue\n > &\n THeaderComponents & { FlexRender: Component }\n}\n\nexport const AppFlexRender = defineComponent({\n name: 'TableFlexRender',\n props: {\n cell: {\n type: Object as PropType<FlexRenderCell>,\n default: undefined,\n },\n header: {\n type: Object as PropType<FlexRenderHeader>,\n default: undefined,\n },\n footer: {\n type: Object as PropType<FlexRenderHeader>,\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\n/**\n * Creates app-scoped Vue table helpers with features, row models, and\n * renderable component maps pre-bound.\n *\n * Use this when an app or design system wants typed `useAppTable`, a pre-bound\n * column helper, and context helpers for table, cell, and header components.\n *\n * @example\n * ```ts\n * const { useAppTable, createAppColumnHelper } = createTableHook({\n * features,\n * tableComponents: {},\n * cellComponents: {},\n * headerComponents: {},\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>): CreateTableHookResult<\n TFeatures,\n TTableComponents,\n TCellComponents,\n THeaderComponents\n> {\n const TableContext = Symbol('TableContext') as InjectionKey<\n VueTable<TFeatures, 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>(): AppVueTable<\n TFeatures,\n TData,\n TableState<TFeatures>,\n TTableComponents,\n TCellComponents,\n THeaderComponents\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 // The value provided by `<table.AppTable>` is the extended table (the App*\n // wrapper components and `tableComponents` are Object.assign-ed onto the same\n // instance `useAppTable` returns), so this asserts the runtime shape.\n return table as unknown as AppVueTable<\n TFeatures,\n TData,\n TableState<TFeatures>,\n TTableComponents,\n TCellComponents,\n THeaderComponents\n >\n }\n\n function useCellContext<TValue extends CellData = CellData>(): Cell<\n TFeatures,\n any,\n TValue\n > &\n TCellComponents & { FlexRender: Component } {\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 // `<table.AppCell>` Object.assign-es `cellComponents` and `FlexRender` onto\n // the same cell instance it provides, so this asserts the runtime shape.\n return cell as unknown as Cell<TFeatures, any, TValue> &\n TCellComponents & { FlexRender: Component }\n }\n\n function useHeaderContext<TValue extends CellData = CellData>(): Header<\n TFeatures,\n any,\n TValue\n > &\n THeaderComponents & { FlexRender: Component } {\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 // `<table.AppHeader>` / `<table.AppFooter>` Object.assign `headerComponents`\n // and `FlexRender` onto the same header instance they provide.\n return header as unknown as Header<TFeatures, any, TValue> &\n THeaderComponents & { FlexRender: Component }\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>(\n tableOptions: Omit<\n TableOptionsWithReactiveData<TFeatures, TData>,\n 'features'\n >,\n ): AppVueTable<\n TFeatures,\n TData,\n TableState<TFeatures>,\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>(mergedOptions)\n\n const AppTable = defineComponent({\n name: 'AppTable',\n setup(_, { slots }) {\n provide(TableContext, table)\n return () => {\n return slots.default?.()\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 },\n setup(props, { slots }) {\n const cell = props.cell as Cell<TFeatures, TData, any>\n\n provide(CellContext, cell)\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?.({ cell: extendedCell })\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 },\n setup(props, { slots }) {\n const header = props.header as Header<TFeatures, TData, any>\n\n provide(HeaderContext, header)\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?.({ header: extendedHeader })\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 },\n setup(props, { slots }) {\n const header = props.header as Header<TFeatures, TData, any>\n\n provide(HeaderContext, header)\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?.({ header: extendedHeader })\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 TableState<TFeatures>,\n TTableComponents,\n TCellComponents,\n THeaderComponents\n >\n }\n\n return {\n // `TableOptionsWithReactiveData` widens `features` to allow a reactive ref,\n // so this narrows it back to the resolved `TFeatures` for `appFeatures`.\n appFeatures: defaultTableOptions.features as TFeatures,\n createAppColumnHelper,\n useAppTable,\n useTableContext,\n useCellContext,\n useHeaderContext,\n }\n}\n"],"mappings":"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"}
@@ -1,3 +1,4 @@
1
+ import { FlexRenderCell, FlexRenderHeader } from "./FlexRender.cjs";
1
2
  import { TableOptionsWithReactiveData, VueTable } from "./useTable.cjs";
2
3
  import { AccessorFn, AccessorFnColumnDef, AccessorKeyColumnDef, Cell, CellContext, CellData, Column, ColumnDef, DeepKeys, DeepValue, DisplayColumnDef, GroupColumnDef, Header, IdentifiedColumnDef, NoInfer, Row, RowData, Table, TableFeatures, TableState } from "@tanstack/table-core";
3
4
  import { Component, PropType } from "vue";
@@ -51,56 +52,87 @@ type CreateTableHookOptions<TFeatures extends TableFeatures, TTableComponents ex
51
52
  cellComponents?: TCellComponents;
52
53
  headerComponents?: THeaderComponents;
53
54
  };
54
- interface AppTableProps<TFeatures extends TableFeatures, TSelected = unknown> {
55
- selector?: (state: TableState<TFeatures>) => TSelected;
56
- }
57
- interface AppCellProps<TFeatures extends TableFeatures, TData extends RowData, TValue extends CellData = CellData, TSelected = unknown> {
55
+ interface AppTableProps {}
56
+ interface AppCellProps<TFeatures extends TableFeatures, TData extends RowData, TValue extends CellData = CellData> {
58
57
  cell: Cell<TFeatures, TData, TValue>;
59
- selector?: (state: TableState<TFeatures>) => TSelected;
60
58
  }
61
- interface AppHeaderProps<TFeatures extends TableFeatures, TData extends RowData, TValue extends CellData = CellData, TSelected = unknown> {
59
+ interface AppHeaderProps<TFeatures extends TableFeatures, TData extends RowData, TValue extends CellData = CellData> {
62
60
  header: Header<TFeatures, TData, TValue>;
63
- selector?: (state: TableState<TFeatures>) => TSelected;
64
61
  }
65
- type AppVueTable<TFeatures extends TableFeatures, TData extends RowData, TSelected, TTableComponents extends Record<string, ComponentType<any>>, TCellComponents extends Record<string, ComponentType<any>>, THeaderComponents extends Record<string, ComponentType<any>>> = VueTable<TFeatures, TData, TSelected> & NoInfer<TTableComponents> & {
66
- AppTable: Component<AppTableProps<TFeatures>>;
62
+ type AppVueTable<TFeatures extends TableFeatures, TData extends RowData, TSelected, TTableComponents extends Record<string, ComponentType<any>>, TCellComponents extends Record<string, ComponentType<any>>, THeaderComponents extends Record<string, ComponentType<any>>> = VueTable<TFeatures, TData> & NoInfer<TTableComponents> & {
63
+ AppTable: Component<AppTableProps>;
67
64
  AppCell: Component<AppCellProps<TFeatures, TData>>;
68
65
  AppHeader: Component<AppHeaderProps<TFeatures, TData>>;
69
66
  AppFooter: Component<AppHeaderProps<TFeatures, TData>>;
70
67
  FlexRender: typeof AppFlexRender;
71
68
  };
69
+ interface CreateTableHookResult<TFeatures extends TableFeatures, TTableComponents extends Record<string, ComponentType<any>>, TCellComponents extends Record<string, ComponentType<any>>, THeaderComponents extends Record<string, ComponentType<any>>> {
70
+ /** The features object that was passed to `createTableHook`. */
71
+ appFeatures: TFeatures;
72
+ /**
73
+ * A column helper pre-bound to `TFeatures` and the registered components, so
74
+ * the cell/header/footer render props expose the bound components.
75
+ */
76
+ createAppColumnHelper: <TData extends RowData>() => AppColumnHelper<TFeatures, TData, TCellComponents, THeaderComponents>;
77
+ /**
78
+ * Creates a table with the `App*` wrapper components and registered
79
+ * `tableComponents` attached. `TData` is inferred from the `data` option.
80
+ */
81
+ useAppTable: <TData extends RowData>(tableOptions: Omit<TableOptionsWithReactiveData<TFeatures, TData>, 'features'>) => AppVueTable<TFeatures, TData, TableState<TFeatures>, TTableComponents, TCellComponents, THeaderComponents>;
82
+ /**
83
+ * Reads the table provided by the nearest `<table.AppTable>`. This is the same
84
+ * extended instance `useAppTable` returns, so the `App*` components and your
85
+ * `tableComponents` are available on it.
86
+ */
87
+ useTableContext: <TData extends RowData = RowData>() => AppVueTable<TFeatures, TData, TableState<TFeatures>, TTableComponents, TCellComponents, THeaderComponents>;
88
+ /**
89
+ * Reads the cell provided by the nearest `<table.AppCell>`, extended with your
90
+ * `cellComponents` and a context-bound `FlexRender`.
91
+ */
92
+ useCellContext: <TValue extends CellData = CellData>() => Cell<TFeatures, any, TValue> & TCellComponents & {
93
+ FlexRender: Component;
94
+ };
95
+ /**
96
+ * Reads the header provided by the nearest `<table.AppHeader>` /
97
+ * `<table.AppFooter>`, extended with your `headerComponents` and a
98
+ * context-bound `FlexRender`.
99
+ */
100
+ useHeaderContext: <TValue extends CellData = CellData>() => Header<TFeatures, any, TValue> & THeaderComponents & {
101
+ FlexRender: Component;
102
+ };
103
+ }
72
104
  declare const AppFlexRender: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
73
105
  cell: {
74
- type: PropType<Cell<any, any, any>>;
106
+ type: PropType<FlexRenderCell>;
75
107
  default: undefined;
76
108
  };
77
109
  header: {
78
- type: PropType<Header<any, any, any>>;
110
+ type: PropType<FlexRenderHeader>;
79
111
  default: undefined;
80
112
  };
81
113
  footer: {
82
- type: PropType<Header<any, any, any>>;
114
+ type: PropType<FlexRenderHeader>;
83
115
  default: undefined;
84
116
  };
85
117
  }>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
86
118
  [key: string]: any;
87
119
  }> | null, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
88
120
  cell: {
89
- type: PropType<Cell<any, any, any>>;
121
+ type: PropType<FlexRenderCell>;
90
122
  default: undefined;
91
123
  };
92
124
  header: {
93
- type: PropType<Header<any, any, any>>;
125
+ type: PropType<FlexRenderHeader>;
94
126
  default: undefined;
95
127
  };
96
128
  footer: {
97
- type: PropType<Header<any, any, any>>;
129
+ type: PropType<FlexRenderHeader>;
98
130
  default: undefined;
99
131
  };
100
132
  }>> & Readonly<{}>, {
101
- cell: any;
102
- header: any;
103
- footer: any;
133
+ cell: FlexRenderCell;
134
+ header: FlexRenderHeader;
135
+ footer: FlexRenderHeader;
104
136
  }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
105
137
  /**
106
138
  * Creates app-scoped Vue table helpers with features, row models, and
@@ -113,7 +145,6 @@ declare const AppFlexRender: import("vue").DefineComponent<import("vue").Extract
113
145
  * ```ts
114
146
  * const { useAppTable, createAppColumnHelper } = createTableHook({
115
147
  * features,
116
- * rowModels: {},
117
148
  * tableComponents: {},
118
149
  * cellComponents: {},
119
150
  * headerComponents: {},
@@ -125,14 +156,7 @@ declare function createTableHook<TFeatures extends TableFeatures, const TTableCo
125
156
  cellComponents,
126
157
  headerComponents,
127
158
  ...defaultTableOptions
128
- }: CreateTableHookOptions<TFeatures, TTableComponents, TCellComponents, THeaderComponents>): {
129
- appFeatures: TFeatures;
130
- createAppColumnHelper: <TData extends RowData>() => AppColumnHelper<TFeatures, TData, TCellComponents, THeaderComponents>;
131
- useAppTable: <TData extends RowData, TSelected = TableState<TFeatures>>(tableOptions: Omit<TableOptionsWithReactiveData<TFeatures, TData>, "features" | "rowModels">, selector?: (state: TableState<TFeatures>) => TSelected) => AppVueTable<TFeatures, TData, TSelected, TTableComponents, TCellComponents, THeaderComponents>;
132
- useTableContext: <TData extends RowData = RowData>() => VueTable<TFeatures, TData>;
133
- useCellContext: <TValue extends CellData = unknown>() => Cell<TFeatures, any, TValue>;
134
- useHeaderContext: <TValue extends CellData = unknown>() => Header<TFeatures, any, TValue>;
135
- };
159
+ }: CreateTableHookOptions<TFeatures, TTableComponents, TCellComponents, THeaderComponents>): CreateTableHookResult<TFeatures, TTableComponents, TCellComponents, THeaderComponents>;
136
160
  //#endregion
137
- export { AppCellContext, AppCellProps, AppColumnDefBase, AppColumnDefTemplate, AppColumnHelper, AppDisplayColumnDef, AppFlexRender, AppGroupColumnDef, AppHeaderContext, AppHeaderProps, AppTableProps, AppVueTable, ComponentType, CreateTableHookOptions, createTableHook };
161
+ export { AppCellContext, AppCellProps, AppColumnDefBase, AppColumnDefTemplate, AppColumnHelper, AppDisplayColumnDef, AppFlexRender, AppGroupColumnDef, AppHeaderContext, AppHeaderProps, AppTableProps, AppVueTable, ComponentType, CreateTableHookOptions, CreateTableHookResult, createTableHook };
138
162
  //# sourceMappingURL=createTableHook.d.cts.map