@tanstack/vue-table 9.0.0-beta.7 → 9.0.0-beta.71

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 (61) hide show
  1. package/README.md +5 -1
  2. package/dist/FlexRender.d.ts +1 -2
  3. package/dist/FlexRender.js +5 -5
  4. package/dist/createTableHook.d.ts +40 -20
  5. package/dist/createTableHook.js +10 -24
  6. package/dist/experimental-worker-plugin.d.ts +1 -0
  7. package/dist/experimental-worker-plugin.js +3 -0
  8. package/dist/index.d.ts +2 -2
  9. package/dist/merge-proxy.js +1 -2
  10. package/dist/reactivity.js +3 -8
  11. package/dist/useTable.d.ts +3 -12
  12. package/dist/useTable.js +7 -11
  13. package/package.json +14 -22
  14. package/skills/create-table-hook/SKILL.md +146 -0
  15. package/skills/getting-started/SKILL.md +144 -0
  16. package/skills/migrate-v8-to-v9/SKILL.md +185 -0
  17. package/skills/table-state/SKILL.md +191 -0
  18. package/skills/with-tanstack-query/SKILL.md +127 -0
  19. package/skills/with-tanstack-virtual/SKILL.md +116 -0
  20. package/dist/FlexRender.cjs +0 -80
  21. package/dist/FlexRender.cjs.map +0 -1
  22. package/dist/FlexRender.d.cts +0 -63
  23. package/dist/FlexRender.js.map +0 -1
  24. package/dist/createTableHook.cjs +0 -194
  25. package/dist/createTableHook.cjs.map +0 -1
  26. package/dist/createTableHook.d.cts +0 -135
  27. package/dist/createTableHook.js.map +0 -1
  28. package/dist/flex-render.cjs +0 -5
  29. package/dist/flex-render.d.cts +0 -2
  30. package/dist/index.cjs +0 -17
  31. package/dist/index.d.cts +0 -5
  32. package/dist/merge-proxy.cjs +0 -77
  33. package/dist/merge-proxy.cjs.map +0 -1
  34. package/dist/merge-proxy.js.map +0 -1
  35. package/dist/reactivity.cjs +0 -64
  36. package/dist/reactivity.cjs.map +0 -1
  37. package/dist/reactivity.js.map +0 -1
  38. package/dist/static-functions.cjs +0 -9
  39. package/dist/static-functions.d.cts +0 -1
  40. package/dist/useTable.cjs +0 -76
  41. package/dist/useTable.cjs.map +0 -1
  42. package/dist/useTable.d.cts +0 -43
  43. package/dist/useTable.js.map +0 -1
  44. package/skills/vue/client-to-server/SKILL.md +0 -365
  45. package/skills/vue/compose-with-tanstack-form/SKILL.md +0 -369
  46. package/skills/vue/compose-with-tanstack-pacer/SKILL.md +0 -318
  47. package/skills/vue/compose-with-tanstack-query/SKILL.md +0 -385
  48. package/skills/vue/compose-with-tanstack-store/SKILL.md +0 -301
  49. package/skills/vue/compose-with-tanstack-virtual/SKILL.md +0 -340
  50. package/skills/vue/getting-started/SKILL.md +0 -409
  51. package/skills/vue/migrate-v8-to-v9/SKILL.md +0 -375
  52. package/skills/vue/production-readiness/SKILL.md +0 -271
  53. package/skills/vue/table-state/SKILL.md +0 -403
  54. package/src/FlexRender.ts +0 -138
  55. package/src/createTableHook.ts +0 -534
  56. package/src/flex-render.ts +0 -1
  57. package/src/index.ts +0 -4
  58. package/src/merge-proxy.ts +0 -132
  59. package/src/reactivity.ts +0 -89
  60. package/src/static-functions.ts +0 -1
  61. package/src/useTable.ts +0 -181
@@ -0,0 +1,116 @@
1
+ ---
2
+ name: with-tanstack-virtual
3
+ description: >
4
+ Virtualize Vue Table final row or column models with reactive counts and scroll targets, stable keys, measurement, spacer geometry, sticky CSS, grid/flex widths, and infinite server data.
5
+ metadata:
6
+ type: composition
7
+ library: '@tanstack/vue-table'
8
+ framework: vue
9
+ library_version: '9.0.0-beta.71'
10
+ requires:
11
+ - '@tanstack/table-core#core'
12
+ - getting-started
13
+ - table-state
14
+ sources:
15
+ - 'TanStack/table:docs/framework/vue/guide/virtualization.md'
16
+ - 'TanStack/table:examples/vue/virtualized-rows'
17
+ - 'TanStack/table:examples/vue/virtualized-columns'
18
+ - 'TanStack/table:examples/vue/virtualized-infinite-scrolling'
19
+ ---
20
+
21
+ This skill builds on `@tanstack/table-core#core`, `getting-started`, and `table-state`. Virtual consumes final Table models; it is not registered in `tableFeatures`.
22
+
23
+ ## Setup
24
+
25
+ ```ts
26
+ import { computed, ref } from 'vue'
27
+ import { useVirtualizer } from '@tanstack/vue-virtual'
28
+
29
+ const scrollElement = ref<HTMLElement | null>(null)
30
+ const rows = computed(() => table.getRowModel().rows)
31
+ const rowVirtualizer = useVirtualizer(
32
+ computed(() => ({
33
+ count: rows.value.length,
34
+ getScrollElement: () => scrollElement.value,
35
+ estimateSize: () => 34,
36
+ getItemKey: (index) => rows.value[index]!.id,
37
+ overscan: 5,
38
+ })),
39
+ )
40
+ const virtualRows = computed(() => rowVirtualizer.value.getVirtualItems())
41
+ const totalSize = computed(() => rowVirtualizer.value.getTotalSize())
42
+ ```
43
+
44
+ ## Core Patterns
45
+
46
+ ### Derive from current visible models
47
+
48
+ Rows come from `table.getRowModel().rows`; columns come from `table.getVisibleLeafColumns()`. Use computed options so counts and scroll targets update.
49
+
50
+ ### Implement the geometry
51
+
52
+ Give the scroll container a bounded height and positioning context, create a spacer using `getTotalSize()`, and translate/measure virtual items. Follow the grid/flex examples for dynamic row heights and sticky headers.
53
+
54
+ ### Coordinate infinite fetching
55
+
56
+ Fetch near the last virtual item only while `totalFetched < serverRowCount` and no request is active. Manual sorting means the server must return the sorted order and a sort change normally resets pages.
57
+
58
+ ## Common Mistakes
59
+
60
+ ### HIGH Passing a plain options snapshot
61
+
62
+ Wrong:
63
+
64
+ ```ts
65
+ useVirtualizer({ count: rows.value.length, getScrollElement })
66
+ ```
67
+
68
+ Correct:
69
+
70
+ ```ts
71
+ useVirtualizer(computed(() => ({ count: rows.value.length, getScrollElement })))
72
+ ```
73
+
74
+ Computed options keep the virtual range synchronized with Vue’s current model.
75
+
76
+ Source: `examples/vue/virtualized-rows/src/App.vue`
77
+
78
+ ### HIGH Virtualizing source arrays
79
+
80
+ Wrong:
81
+
82
+ ```ts
83
+ const rows = computed(() => data.value)
84
+ ```
85
+
86
+ Correct:
87
+
88
+ ```ts
89
+ const rows = computed(() => table.getRowModel().rows)
90
+ ```
91
+
92
+ Source arrays do not represent Table’s current filtering, sorting, expansion, or pagination.
93
+
94
+ Source: `docs/framework/vue/guide/virtualization.md`
95
+
96
+ ### HIGH Assuming Virtual provides CSS
97
+
98
+ Wrong:
99
+
100
+ ```vue
101
+ <div v-for="item in virtualRows" :key="item.key">{{ rows[item.index].id }}</div>
102
+ ```
103
+
104
+ Correct:
105
+
106
+ ```vue
107
+ <div :style="{ height: `${totalSize}px`, position: 'relative' }"><div style="position:absolute"></div></div>
108
+ ```
109
+
110
+ Virtual provides measurements, not spacer layout, transforms, sticky positioning, or Table column widths.
111
+
112
+ Source: `examples/vue/virtualized-columns/src/App.vue`
113
+
114
+ ## API Discovery
115
+
116
+ Inspect installed `@tanstack/vue-table/dist/` and `@tanstack/vue-virtual/dist/`; use the maintained Vue examples for exact row, column, and infinite layout combinations.
@@ -1,80 +0,0 @@
1
- let vue = require("vue");
2
-
3
- //#region src/FlexRender.ts
4
- /**
5
- * If rendering headers, cells, or footers with custom markup, use flexRender instead of `cell.getValue()` or `cell.renderValue()`.
6
- * @example flexRender(cell.column.columnDef.cell, cell.getContext())
7
- */
8
- function flexRender(render, props) {
9
- if (typeof render === "function") {
10
- const rendered = render(props);
11
- if ((0, vue.isVNode)(rendered)) return rendered;
12
- if (typeof rendered === "function" || typeof rendered === "object") return (0, vue.h)(rendered, props);
13
- return rendered;
14
- }
15
- if (typeof render === "object") return (0, vue.h)(render, props);
16
- return render;
17
- }
18
- /**
19
- * Simplified component for rendering headers, cells, or footers.
20
- *
21
- * Supports both the new shorthand pattern and the legacy `:render`/`:props` pattern:
22
- * @example
23
- * ```vue
24
- * <!-- New shorthand pattern -->
25
- * <FlexRender :cell="cell" />
26
- * <FlexRender :header="header" />
27
- * <FlexRender :footer="header" />
28
- *
29
- * <!-- Legacy pattern (still supported) -->
30
- * <FlexRender :render="cell.column.columnDef.cell" :props="cell.getContext()" />
31
- * ```
32
- */
33
- const FlexRender = (0, vue.defineComponent)({
34
- props: {
35
- render: {
36
- type: [
37
- Function,
38
- Object,
39
- String
40
- ],
41
- default: void 0
42
- },
43
- props: {
44
- type: Object,
45
- default: void 0
46
- },
47
- cell: {
48
- type: Object,
49
- default: void 0
50
- },
51
- header: {
52
- type: Object,
53
- default: void 0
54
- },
55
- footer: {
56
- type: Object,
57
- default: void 0
58
- }
59
- },
60
- setup: (props) => {
61
- return () => {
62
- if (props.cell) {
63
- var _cell$getIsAggregated, _cell$getIsPlaceholde;
64
- const cell = props.cell;
65
- const def = cell.column.columnDef;
66
- if ((_cell$getIsAggregated = cell.getIsAggregated) === null || _cell$getIsAggregated === void 0 ? void 0 : _cell$getIsAggregated.call(cell)) return flexRender(def.aggregatedCell ?? def.cell, cell.getContext());
67
- if ((_cell$getIsPlaceholde = cell.getIsPlaceholder) === null || _cell$getIsPlaceholde === void 0 ? void 0 : _cell$getIsPlaceholde.call(cell)) return null;
68
- return flexRender(def.cell, cell.getContext());
69
- }
70
- if (props.header) return flexRender(props.header.column.columnDef.header, props.header.getContext());
71
- if (props.footer) return flexRender(props.footer.column.columnDef.footer, props.footer.getContext());
72
- return flexRender(props.render, props.props);
73
- };
74
- }
75
- });
76
-
77
- //#endregion
78
- exports.FlexRender = FlexRender;
79
- exports.flexRender = flexRender;
80
- //# sourceMappingURL=FlexRender.cjs.map
@@ -1 +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'\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,63 +0,0 @@
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
- }
22
- /**
23
- * If rendering headers, cells, or footers with custom markup, use flexRender instead of `cell.getValue()` or `cell.renderValue()`.
24
- * @example flexRender(cell.column.columnDef.cell, cell.getContext())
25
- */
26
- declare function flexRender(render: any, props: any): any;
27
- /**
28
- * Simplified component for rendering headers, cells, or footers.
29
- *
30
- * Supports both the new shorthand pattern and the legacy `:render`/`:props` pattern:
31
- * @example
32
- * ```vue
33
- * <!-- New shorthand pattern -->
34
- * <FlexRender :cell="cell" />
35
- * <FlexRender :header="header" />
36
- * <FlexRender :footer="header" />
37
- *
38
- * <!-- Legacy pattern (still supported) -->
39
- * <FlexRender :render="cell.column.columnDef.cell" :props="cell.getContext()" />
40
- * ```
41
- */
42
- declare const FlexRender: import("vue").DefineComponent<{
43
- render?: any;
44
- props?: any;
45
- cell?: FlexRenderCell | undefined;
46
- header?: FlexRenderHeader | undefined;
47
- footer?: FlexRenderHeader | undefined;
48
- }, () => any, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
49
- render?: any;
50
- props?: any;
51
- cell?: FlexRenderCell | undefined;
52
- header?: FlexRenderHeader | undefined;
53
- footer?: FlexRenderHeader | undefined;
54
- }> & Readonly<{}>, {
55
- props: any;
56
- render: any;
57
- cell: FlexRenderCell;
58
- header: FlexRenderHeader;
59
- footer: FlexRenderHeader;
60
- }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
61
- //#endregion
62
- export { FlexRender, FlexRenderCell, FlexRenderHeader, flexRender };
63
- //# sourceMappingURL=FlexRender.d.cts.map
@@ -1 +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'\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"}
@@ -1,194 +0,0 @@
1
- const require_FlexRender = require('./FlexRender.cjs');
2
- const require_merge_proxy = require('./merge-proxy.cjs');
3
- const require_useTable = require('./useTable.cjs');
4
- let vue = require("vue");
5
- let _tanstack_table_core = require("@tanstack/table-core");
6
-
7
- //#region src/createTableHook.ts
8
- const AppFlexRender = (0, vue.defineComponent)({
9
- name: "TableFlexRender",
10
- props: {
11
- cell: {
12
- type: Object,
13
- default: void 0
14
- },
15
- header: {
16
- type: Object,
17
- default: void 0
18
- },
19
- footer: {
20
- type: Object,
21
- default: void 0
22
- }
23
- },
24
- setup(props) {
25
- return () => {
26
- if (props.cell) return (0, vue.h)(require_FlexRender.FlexRender, {
27
- render: props.cell.column.columnDef.cell,
28
- props: props.cell.getContext()
29
- });
30
- if (props.header) return (0, vue.h)(require_FlexRender.FlexRender, {
31
- render: props.header.column.columnDef.header,
32
- props: props.header.getContext()
33
- });
34
- if (props.footer) return (0, vue.h)(require_FlexRender.FlexRender, {
35
- render: props.footer.column.columnDef.footer,
36
- props: props.footer.getContext()
37
- });
38
- return null;
39
- };
40
- }
41
- });
42
- /**
43
- * Creates app-scoped Vue table helpers with features, row models, and
44
- * renderable component maps pre-bound.
45
- *
46
- * Use this when an app or design system wants typed `useAppTable`, a pre-bound
47
- * column helper, and context helpers for table, cell, and header components.
48
- *
49
- * @example
50
- * ```ts
51
- * const { useAppTable, createAppColumnHelper } = createTableHook({
52
- * features,
53
- * rowModels: {},
54
- * tableComponents: {},
55
- * cellComponents: {},
56
- * headerComponents: {},
57
- * })
58
- * ```
59
- */
60
- function createTableHook({ tableComponents, cellComponents, headerComponents, ...defaultTableOptions }) {
61
- const TableContext = Symbol("TableContext");
62
- const CellContext = Symbol("CellContext");
63
- const HeaderContext = Symbol("HeaderContext");
64
- function createAppColumnHelper() {
65
- return (0, _tanstack_table_core.createColumnHelper)();
66
- }
67
- function useTableContext() {
68
- const table = (0, vue.inject)(TableContext);
69
- if (!table) throw new Error("`useTableContext` must be used within an `AppTable` component. Make sure your component is wrapped with `<table.AppTable>...</table.AppTable>`.");
70
- return table;
71
- }
72
- function useCellContext() {
73
- const cell = (0, vue.inject)(CellContext);
74
- 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>`.");
75
- return cell;
76
- }
77
- function useHeaderContext() {
78
- const header = (0, vue.inject)(HeaderContext);
79
- if (!header) throw new Error("`useHeaderContext` must be used within an `AppHeader` or `AppFooter` component.");
80
- return header;
81
- }
82
- const CellFlexRender = (0, vue.defineComponent)({
83
- name: "AppCellFlexRender",
84
- setup() {
85
- const cell = useCellContext();
86
- return () => (0, vue.h)(AppFlexRender, { cell });
87
- }
88
- });
89
- const HeaderFlexRender = (0, vue.defineComponent)({
90
- name: "AppHeaderFlexRender",
91
- setup() {
92
- const header = useHeaderContext();
93
- return () => (0, vue.h)(AppFlexRender, { header });
94
- }
95
- });
96
- const FooterFlexRender = (0, vue.defineComponent)({
97
- name: "AppFooterFlexRender",
98
- setup() {
99
- const header = useHeaderContext();
100
- return () => (0, vue.h)(AppFlexRender, { footer: header });
101
- }
102
- });
103
- function useAppTable(tableOptions) {
104
- const table = require_useTable.useTable(require_merge_proxy.mergeProxy(defaultTableOptions, tableOptions));
105
- const AppTable = (0, vue.defineComponent)({
106
- name: "AppTable",
107
- setup(_, { slots }) {
108
- (0, vue.provide)(TableContext, table);
109
- return () => {
110
- var _slots$default;
111
- return (_slots$default = slots.default) === null || _slots$default === void 0 ? void 0 : _slots$default.call(slots);
112
- };
113
- }
114
- });
115
- const AppCell = (0, vue.defineComponent)({
116
- name: "AppCell",
117
- props: { cell: {
118
- type: Object,
119
- required: true
120
- } },
121
- setup(props, { slots }) {
122
- const cell = props.cell;
123
- (0, vue.provide)(CellContext, cell);
124
- const extendedCell = Object.assign(cell, {
125
- FlexRender: CellFlexRender,
126
- ...cellComponents ?? {}
127
- });
128
- return () => {
129
- var _slots$default2;
130
- return (_slots$default2 = slots.default) === null || _slots$default2 === void 0 ? void 0 : _slots$default2.call(slots, { cell: extendedCell });
131
- };
132
- }
133
- });
134
- const AppHeader = (0, vue.defineComponent)({
135
- name: "AppHeader",
136
- props: { header: {
137
- type: Object,
138
- required: true
139
- } },
140
- setup(props, { slots }) {
141
- const header = props.header;
142
- (0, vue.provide)(HeaderContext, header);
143
- const extendedHeader = Object.assign(header, {
144
- FlexRender: HeaderFlexRender,
145
- ...headerComponents ?? {}
146
- });
147
- return () => {
148
- var _slots$default3;
149
- return (_slots$default3 = slots.default) === null || _slots$default3 === void 0 ? void 0 : _slots$default3.call(slots, { header: extendedHeader });
150
- };
151
- }
152
- });
153
- const AppFooter = (0, vue.defineComponent)({
154
- name: "AppFooter",
155
- props: { header: {
156
- type: Object,
157
- required: true
158
- } },
159
- setup(props, { slots }) {
160
- const header = props.header;
161
- (0, vue.provide)(HeaderContext, header);
162
- const extendedHeader = Object.assign(header, {
163
- FlexRender: FooterFlexRender,
164
- ...headerComponents ?? {}
165
- });
166
- return () => {
167
- var _slots$default4;
168
- return (_slots$default4 = slots.default) === null || _slots$default4 === void 0 ? void 0 : _slots$default4.call(slots, { header: extendedHeader });
169
- };
170
- }
171
- });
172
- return Object.assign(table, {
173
- AppTable,
174
- AppCell,
175
- AppHeader,
176
- AppFooter,
177
- FlexRender: AppFlexRender,
178
- ...tableComponents ?? {}
179
- });
180
- }
181
- return {
182
- appFeatures: defaultTableOptions.features,
183
- createAppColumnHelper,
184
- useAppTable,
185
- useTableContext,
186
- useCellContext,
187
- useHeaderContext
188
- };
189
- }
190
-
191
- //#endregion
192
- exports.AppFlexRender = AppFlexRender;
193
- exports.createTableHook = createTableHook;
194
- //# sourceMappingURL=createTableHook.cjs.map
@@ -1 +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 { 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 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 * 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>\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>(\n tableOptions: Omit<\n TableOptionsWithReactiveData<TFeatures, TData>,\n 'features' | 'rowModels'\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 appFeatures: defaultTableOptions.features as TFeatures,\n createAppColumnHelper,\n useAppTable,\n useTableContext,\n useCellContext,\n useHeaderContext,\n }\n}\n"],"mappings":"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"}
@@ -1,135 +0,0 @@
1
- import { FlexRenderCell, FlexRenderHeader } from "./FlexRender.cjs";
2
- import { TableOptionsWithReactiveData, VueTable } from "./useTable.cjs";
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";
4
- import { Component, PropType } from "vue";
5
-
6
- //#region src/createTableHook.d.ts
7
- type ComponentType<T extends Record<string, any>> = Component<T>;
8
- type AppCellContext<TFeatures extends TableFeatures, TData extends RowData, TValue extends CellData, TCellComponents extends Record<string, ComponentType<any>>> = {
9
- cell: Cell<TFeatures, TData, TValue> & TCellComponents & {
10
- FlexRender: Component;
11
- };
12
- column: Column<TFeatures, TData, TValue>;
13
- getValue: CellContext<TFeatures, TData, TValue>['getValue'];
14
- renderValue: CellContext<TFeatures, TData, TValue>['renderValue'];
15
- row: Row<TFeatures, TData>;
16
- table: Table<TFeatures, TData>;
17
- };
18
- type AppHeaderContext<TFeatures extends TableFeatures, TData extends RowData, TValue extends CellData, THeaderComponents extends Record<string, ComponentType<any>>> = {
19
- column: Column<TFeatures, TData, TValue>;
20
- header: Header<TFeatures, TData, TValue> & THeaderComponents & {
21
- FlexRender: Component;
22
- };
23
- table: Table<TFeatures, TData>;
24
- };
25
- type AppColumnDefTemplate<TProps extends object> = string | ((props: TProps) => any);
26
- type AppColumnDefBase<TFeatures extends TableFeatures, TData extends RowData, TValue extends CellData, TCellComponents extends Record<string, ComponentType<any>>, THeaderComponents extends Record<string, ComponentType<any>>> = Omit<IdentifiedColumnDef<TFeatures, TData, TValue>, 'cell' | 'header' | 'footer'> & {
27
- cell?: AppColumnDefTemplate<AppCellContext<TFeatures, TData, TValue, TCellComponents>>;
28
- header?: AppColumnDefTemplate<AppHeaderContext<TFeatures, TData, TValue, THeaderComponents>>;
29
- footer?: AppColumnDefTemplate<AppHeaderContext<TFeatures, TData, TValue, THeaderComponents>>;
30
- };
31
- type AppDisplayColumnDef<TFeatures extends TableFeatures, TData extends RowData, TCellComponents extends Record<string, ComponentType<any>>, THeaderComponents extends Record<string, ComponentType<any>>> = Omit<DisplayColumnDef<TFeatures, TData, unknown>, 'cell' | 'header' | 'footer'> & {
32
- cell?: AppColumnDefTemplate<AppCellContext<TFeatures, TData, unknown, TCellComponents>>;
33
- header?: AppColumnDefTemplate<AppHeaderContext<TFeatures, TData, unknown, THeaderComponents>>;
34
- footer?: AppColumnDefTemplate<AppHeaderContext<TFeatures, TData, unknown, THeaderComponents>>;
35
- };
36
- type AppGroupColumnDef<TFeatures extends TableFeatures, TData extends RowData, TCellComponents extends Record<string, ComponentType<any>>, THeaderComponents extends Record<string, ComponentType<any>>> = Omit<GroupColumnDef<TFeatures, TData, unknown>, 'cell' | 'header' | 'footer' | 'columns'> & {
37
- cell?: AppColumnDefTemplate<AppCellContext<TFeatures, TData, unknown, TCellComponents>>;
38
- header?: AppColumnDefTemplate<AppHeaderContext<TFeatures, TData, unknown, THeaderComponents>>;
39
- footer?: AppColumnDefTemplate<AppHeaderContext<TFeatures, TData, unknown, THeaderComponents>>;
40
- columns?: Array<ColumnDef<TFeatures, TData, unknown>>;
41
- };
42
- type AppColumnHelper<TFeatures extends TableFeatures, TData extends RowData, TCellComponents extends Record<string, ComponentType<any>>, THeaderComponents extends Record<string, ComponentType<any>>> = {
43
- accessor: <TAccessor extends AccessorFn<TData> | DeepKeys<TData>, TValue extends (TAccessor extends AccessorFn<TData, infer TReturn> ? TReturn : TAccessor extends DeepKeys<TData> ? DeepValue<TData, TAccessor> : never)>(accessor: TAccessor, column: TAccessor extends AccessorFn<TData> ? AppColumnDefBase<TFeatures, TData, TValue, TCellComponents, THeaderComponents> & {
44
- id: string;
45
- } : AppColumnDefBase<TFeatures, TData, TValue, TCellComponents, THeaderComponents>) => TAccessor extends AccessorFn<TData> ? AccessorFnColumnDef<TFeatures, TData, TValue> : AccessorKeyColumnDef<TFeatures, TData, TValue>;
46
- columns: <TColumns extends ReadonlyArray<ColumnDef<TFeatures, TData, any>>>(columns: [...TColumns]) => Array<ColumnDef<TFeatures, TData, any>> & [...TColumns];
47
- display: (column: AppDisplayColumnDef<TFeatures, TData, TCellComponents, THeaderComponents>) => DisplayColumnDef<TFeatures, TData, unknown>;
48
- group: (column: AppGroupColumnDef<TFeatures, TData, TCellComponents, THeaderComponents>) => GroupColumnDef<TFeatures, TData, unknown>;
49
- };
50
- type CreateTableHookOptions<TFeatures extends TableFeatures, TTableComponents extends Record<string, ComponentType<any>>, TCellComponents extends Record<string, ComponentType<any>>, THeaderComponents extends Record<string, ComponentType<any>>> = Omit<TableOptionsWithReactiveData<TFeatures, any>, 'columns' | 'data' | 'store' | 'state' | 'initialState'> & {
51
- tableComponents?: TTableComponents;
52
- cellComponents?: TCellComponents;
53
- headerComponents?: THeaderComponents;
54
- };
55
- interface AppTableProps {}
56
- interface AppCellProps<TFeatures extends TableFeatures, TData extends RowData, TValue extends CellData = CellData> {
57
- cell: Cell<TFeatures, TData, TValue>;
58
- }
59
- interface AppHeaderProps<TFeatures extends TableFeatures, TData extends RowData, TValue extends CellData = CellData> {
60
- header: Header<TFeatures, TData, TValue>;
61
- }
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>;
64
- AppCell: Component<AppCellProps<TFeatures, TData>>;
65
- AppHeader: Component<AppHeaderProps<TFeatures, TData>>;
66
- AppFooter: Component<AppHeaderProps<TFeatures, TData>>;
67
- FlexRender: typeof AppFlexRender;
68
- };
69
- declare const AppFlexRender: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
70
- cell: {
71
- type: PropType<FlexRenderCell>;
72
- default: undefined;
73
- };
74
- header: {
75
- type: PropType<FlexRenderHeader>;
76
- default: undefined;
77
- };
78
- footer: {
79
- type: PropType<FlexRenderHeader>;
80
- default: undefined;
81
- };
82
- }>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
83
- [key: string]: any;
84
- }> | null, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
85
- cell: {
86
- type: PropType<FlexRenderCell>;
87
- default: undefined;
88
- };
89
- header: {
90
- type: PropType<FlexRenderHeader>;
91
- default: undefined;
92
- };
93
- footer: {
94
- type: PropType<FlexRenderHeader>;
95
- default: undefined;
96
- };
97
- }>> & Readonly<{}>, {
98
- cell: FlexRenderCell;
99
- header: FlexRenderHeader;
100
- footer: FlexRenderHeader;
101
- }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
102
- /**
103
- * Creates app-scoped Vue table helpers with features, row models, and
104
- * renderable component maps pre-bound.
105
- *
106
- * Use this when an app or design system wants typed `useAppTable`, a pre-bound
107
- * column helper, and context helpers for table, cell, and header components.
108
- *
109
- * @example
110
- * ```ts
111
- * const { useAppTable, createAppColumnHelper } = createTableHook({
112
- * features,
113
- * rowModels: {},
114
- * tableComponents: {},
115
- * cellComponents: {},
116
- * headerComponents: {},
117
- * })
118
- * ```
119
- */
120
- declare function createTableHook<TFeatures extends TableFeatures, const TTableComponents extends Record<string, ComponentType<any>>, const TCellComponents extends Record<string, ComponentType<any>>, const THeaderComponents extends Record<string, ComponentType<any>>>({
121
- tableComponents,
122
- cellComponents,
123
- headerComponents,
124
- ...defaultTableOptions
125
- }: CreateTableHookOptions<TFeatures, TTableComponents, TCellComponents, THeaderComponents>): {
126
- appFeatures: TFeatures;
127
- createAppColumnHelper: <TData extends RowData>() => AppColumnHelper<TFeatures, TData, TCellComponents, THeaderComponents>;
128
- useAppTable: <TData extends RowData>(tableOptions: Omit<TableOptionsWithReactiveData<TFeatures, TData>, "features" | "rowModels">) => AppVueTable<TFeatures, TData, TableState<TFeatures>, TTableComponents, TCellComponents, THeaderComponents>;
129
- useTableContext: <TData extends RowData = RowData>() => VueTable<TFeatures, TData>;
130
- useCellContext: <TValue extends CellData = unknown>() => Cell<TFeatures, any, TValue>;
131
- useHeaderContext: <TValue extends CellData = unknown>() => Header<TFeatures, any, TValue>;
132
- };
133
- //#endregion
134
- export { AppCellContext, AppCellProps, AppColumnDefBase, AppColumnDefTemplate, AppColumnHelper, AppDisplayColumnDef, AppFlexRender, AppGroupColumnDef, AppHeaderContext, AppHeaderProps, AppTableProps, AppVueTable, ComponentType, CreateTableHookOptions, createTableHook };
135
- //# sourceMappingURL=createTableHook.d.cts.map