@tanstack/vue-table 9.0.0-beta.2 → 9.0.0-beta.21
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.
- package/dist/FlexRender.cjs.map +1 -1
- package/dist/FlexRender.d.cts +30 -12
- package/dist/FlexRender.d.ts +30 -12
- package/dist/FlexRender.js.map +1 -1
- package/dist/createTableHook.cjs +23 -64
- package/dist/createTableHook.cjs.map +1 -1
- package/dist/createTableHook.d.cts +16 -20
- package/dist/createTableHook.d.ts +16 -20
- package/dist/createTableHook.js +23 -64
- package/dist/createTableHook.js.map +1 -1
- package/dist/flex-render.d.cts +2 -2
- package/dist/flex-render.d.ts +2 -2
- package/dist/index.d.cts +3 -3
- package/dist/index.d.ts +3 -3
- package/dist/reactivity.cjs +10 -19
- package/dist/reactivity.cjs.map +1 -1
- package/dist/reactivity.js +10 -19
- package/dist/reactivity.js.map +1 -1
- package/dist/useTable.cjs +12 -20
- package/dist/useTable.cjs.map +1 -1
- package/dist/useTable.d.cts +14 -48
- package/dist/useTable.d.ts +14 -48
- package/dist/useTable.js +13 -21
- package/dist/useTable.js.map +1 -1
- package/package.json +4 -4
- package/skills/vue/client-to-server/SKILL.md +21 -26
- package/skills/vue/compose-with-tanstack-form/SKILL.md +4 -4
- package/skills/vue/compose-with-tanstack-pacer/SKILL.md +6 -3
- package/skills/vue/compose-with-tanstack-query/SKILL.md +18 -20
- package/skills/vue/compose-with-tanstack-store/SKILL.md +7 -6
- package/skills/vue/compose-with-tanstack-virtual/SKILL.md +8 -4
- package/skills/vue/getting-started/SKILL.md +55 -49
- package/skills/vue/migrate-v8-to-v9/SKILL.md +50 -32
- package/skills/vue/production-readiness/SKILL.md +28 -21
- package/skills/vue/table-state/SKILL.md +22 -26
- package/src/FlexRender.ts +28 -13
- package/src/createTableHook.ts +18 -82
- package/src/reactivity.ts +17 -43
- package/src/useTable.ts +25 -96
package/dist/FlexRender.cjs.map
CHANGED
|
@@ -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'\
|
|
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"}
|
package/dist/FlexRender.d.cts
CHANGED
|
@@ -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?:
|
|
28
|
-
header?:
|
|
29
|
-
footer?:
|
|
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?:
|
|
34
|
-
header?:
|
|
35
|
-
footer?:
|
|
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:
|
|
40
|
-
header:
|
|
41
|
-
footer:
|
|
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
|
package/dist/FlexRender.d.ts
CHANGED
|
@@ -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?:
|
|
28
|
-
header?:
|
|
29
|
-
footer?:
|
|
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?:
|
|
34
|
-
header?:
|
|
35
|
-
footer?:
|
|
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:
|
|
40
|
-
header:
|
|
41
|
-
footer:
|
|
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
|
package/dist/FlexRender.js.map
CHANGED
|
@@ -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'\
|
|
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"}
|
package/dist/createTableHook.cjs
CHANGED
|
@@ -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
|
|
105
|
-
const table = require_useTable.useTable(require_merge_proxy.mergeProxy(defaultTableOptions, tableOptions)
|
|
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
|
-
|
|
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$
|
|
117
|
-
|
|
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
|
-
|
|
129
|
-
|
|
130
|
-
|
|
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$
|
|
147
|
-
return (_slots$
|
|
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
|
-
|
|
158
|
-
|
|
159
|
-
|
|
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$
|
|
176
|
-
return (_slots$
|
|
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
|
-
|
|
187
|
-
|
|
188
|
-
|
|
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$
|
|
205
|
-
return (_slots$
|
|
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 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>) {\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'\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":";;;;;;;AAoOA,MAAa,yCAAgC;CAC3C,MAAM;CACN,OAAO;EACL,MAAM;GACJ,MAAM;GACN,SAAS;EACX;EACA,QAAQ;GACN,MAAM;GACN,SAAS;EACX;EACA,QAAQ;GACN,MAAM;GACN,SAAS;EACX;CACF;CACA,MAAM,OAAO;EACX,aAAa;GACX,IAAI,MAAM,MACR,kBAASA,+BAAY;IACnB,QAAQ,MAAM,KAAK,OAAO,UAAU;IACpC,OAAO,MAAM,KAAK,WAAW;GAC/B,CAAC;GAGH,IAAI,MAAM,QACR,kBAASA,+BAAY;IACnB,QAAQ,MAAM,OAAO,OAAO,UAAU;IACtC,OAAO,MAAM,OAAO,WAAW;GACjC,CAAC;GAGH,IAAI,MAAM,QACR,kBAASA,+BAAY;IACnB,QAAQ,MAAM,OAAO,OAAO,UAAU;IACtC,OAAO,MAAM,OAAO,WAAW;GACjC,CAAC;GAGH,OAAO;EACT;CACF;AACF,CAAC;;;;;;;;;;;;;;;;;;AAmBD,SAAgB,gBAKd,EACA,iBACA,gBACA,kBACA,GAAG,uBAMF;CACD,MAAM,eAAe,OAAO,cAAc;CAG1C,MAAM,cAAc,OAAO,aAAa;CAGxC,MAAM,gBAAgB,OAAO,eAAe;CAI5C,SAAS,wBAKP;EACA,oDAAgD;CAMlD;CAEA,SAAS,kBAGP;EACA,MAAM,wBAAe,YAAY;EAEjC,IAAI,CAAC,OACH,MAAM,IAAI,MACR,iJAEF;EAGF,OAAO;CACT;CAEA,SAAS,iBAIP;EACA,MAAM,uBAAc,WAAW;EAE/B,IAAI,CAAC,MACH,MAAM,IAAI,MACR,4JAEF;EAGF,OAAO;CACT;CAEA,SAAS,mBAIP;EACA,MAAM,yBAAgB,aAAa;EAEnC,IAAI,CAAC,QACH,MAAM,IAAI,MACR,iFACF;EAGF,OAAO;CACT;CAEA,MAAM,0CAAiC;EACrC,MAAM;EACN,QAAQ;GACN,MAAM,OAAO,eAAe;GAC5B,wBAAe,eAAe,EAAE,KAAK,CAAC;EACxC;CACF,CAAC;CAED,MAAM,4CAAmC;EACvC,MAAM;EACN,QAAQ;GACN,MAAM,SAAS,iBAAiB;GAChC,wBAAe,eAAe,EAAE,OAAO,CAAC;EAC1C;CACF,CAAC;CAED,MAAM,4CAAmC;EACvC,MAAM;EACN,QAAQ;GACN,MAAM,SAAS,iBAAiB;GAChC,wBAAe,eAAe,EAAE,QAAQ,OAAO,CAAC;EAClD;CACF,CAAC;CAED,SAAS,YACP,cAWA;EAMA,MAAM,QAAQC,0BALQC,+BACpB,qBACA,YAGmD,CAAC;EAEtD,MAAM,oCAA2B;GAC/B,MAAM;GACN,MAAM,GAAG,EAAE,SAAS;IAClB,iBAAQ,cAAc,KAAK;IAC3B,aAAa;;KACX,yBAAO,MAAM,mFAAU;IACzB;GACF;EACF,CAAC;EAED,MAAM,mCAA0B;GAC9B,MAAM;GACN,OAAO,EACL,MAAM;IACJ,MAAM;IACN,UAAU;GACZ,EACF;GACA,MAAM,OAAO,EAAE,SAAS;IACtB,MAAM,OAAO,MAAM;IAEnB,iBAAQ,aAAa,IAAI;IAEzB,MAAM,eAAe,OAAO,OAAO,MAAM;KACvC,YAAY;KACZ,GAAI,kBAAkB,CAAC;IACzB,CAAC;IAGD,aAAa;;KACX,0BAAO,MAAM,uFAAU,EAAE,MAAM,aAAa,CAAC;IAC/C;GACF;EACF,CAAC;EAED,MAAM,qCAA4B;GAChC,MAAM;GACN,OAAO,EACL,QAAQ;IACN,MAAM;IACN,UAAU;GACZ,EACF;GACA,MAAM,OAAO,EAAE,SAAS;IACtB,MAAM,SAAS,MAAM;IAErB,iBAAQ,eAAe,MAAM;IAE7B,MAAM,iBAAiB,OAAO,OAAO,QAAQ;KAC3C,YAAY;KACZ,GAAI,oBAAoB,CAAC;IAC3B,CAAC;IAGD,aAAa;;KACX,0BAAO,MAAM,uFAAU,EAAE,QAAQ,eAAe,CAAC;IACnD;GACF;EACF,CAAC;EAED,MAAM,qCAA4B;GAChC,MAAM;GACN,OAAO,EACL,QAAQ;IACN,MAAM;IACN,UAAU;GACZ,EACF;GACA,MAAM,OAAO,EAAE,SAAS;IACtB,MAAM,SAAS,MAAM;IAErB,iBAAQ,eAAe,MAAM;IAE7B,MAAM,iBAAiB,OAAO,OAAO,QAAQ;KAC3C,YAAY;KACZ,GAAI,oBAAoB,CAAC;IAC3B,CAAC;IAGD,aAAa;;KACX,0BAAO,MAAM,uFAAU,EAAE,QAAQ,eAAe,CAAC;IACnD;GACF;EACF,CAAC;EAED,OAAO,OAAO,OAAO,OAAO;GAC1B;GACA;GACA;GACA;GACA,YAAY;GACZ,GAAI,mBAAmB,CAAC;EAC1B,CAAC;CAQH;CAEA,OAAO;EACL,aAAa,oBAAoB;EACjC;EACA;EACA;EACA;EACA;CACF;AACF"}
|
|
@@ -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,19 +52,15 @@ type CreateTableHookOptions<TFeatures extends TableFeatures, TTableComponents ex
|
|
|
51
52
|
cellComponents?: TCellComponents;
|
|
52
53
|
headerComponents?: THeaderComponents;
|
|
53
54
|
};
|
|
54
|
-
interface AppTableProps
|
|
55
|
-
|
|
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
|
|
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
|
|
66
|
-
AppTable: Component<AppTableProps
|
|
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>>;
|
|
@@ -71,36 +68,36 @@ type AppVueTable<TFeatures extends TableFeatures, TData extends RowData, TSelect
|
|
|
71
68
|
};
|
|
72
69
|
declare const AppFlexRender: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
|
73
70
|
cell: {
|
|
74
|
-
type: PropType<
|
|
71
|
+
type: PropType<FlexRenderCell>;
|
|
75
72
|
default: undefined;
|
|
76
73
|
};
|
|
77
74
|
header: {
|
|
78
|
-
type: PropType<
|
|
75
|
+
type: PropType<FlexRenderHeader>;
|
|
79
76
|
default: undefined;
|
|
80
77
|
};
|
|
81
78
|
footer: {
|
|
82
|
-
type: PropType<
|
|
79
|
+
type: PropType<FlexRenderHeader>;
|
|
83
80
|
default: undefined;
|
|
84
81
|
};
|
|
85
82
|
}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
|
86
83
|
[key: string]: any;
|
|
87
84
|
}> | null, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
|
88
85
|
cell: {
|
|
89
|
-
type: PropType<
|
|
86
|
+
type: PropType<FlexRenderCell>;
|
|
90
87
|
default: undefined;
|
|
91
88
|
};
|
|
92
89
|
header: {
|
|
93
|
-
type: PropType<
|
|
90
|
+
type: PropType<FlexRenderHeader>;
|
|
94
91
|
default: undefined;
|
|
95
92
|
};
|
|
96
93
|
footer: {
|
|
97
|
-
type: PropType<
|
|
94
|
+
type: PropType<FlexRenderHeader>;
|
|
98
95
|
default: undefined;
|
|
99
96
|
};
|
|
100
97
|
}>> & Readonly<{}>, {
|
|
101
|
-
cell:
|
|
102
|
-
header:
|
|
103
|
-
footer:
|
|
98
|
+
cell: FlexRenderCell;
|
|
99
|
+
header: FlexRenderHeader;
|
|
100
|
+
footer: FlexRenderHeader;
|
|
104
101
|
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
105
102
|
/**
|
|
106
103
|
* Creates app-scoped Vue table helpers with features, row models, and
|
|
@@ -113,7 +110,6 @@ declare const AppFlexRender: import("vue").DefineComponent<import("vue").Extract
|
|
|
113
110
|
* ```ts
|
|
114
111
|
* const { useAppTable, createAppColumnHelper } = createTableHook({
|
|
115
112
|
* features,
|
|
116
|
-
* rowModels: {},
|
|
117
113
|
* tableComponents: {},
|
|
118
114
|
* cellComponents: {},
|
|
119
115
|
* headerComponents: {},
|
|
@@ -128,7 +124,7 @@ declare function createTableHook<TFeatures extends TableFeatures, const TTableCo
|
|
|
128
124
|
}: CreateTableHookOptions<TFeatures, TTableComponents, TCellComponents, THeaderComponents>): {
|
|
129
125
|
appFeatures: TFeatures;
|
|
130
126
|
createAppColumnHelper: <TData extends RowData>() => AppColumnHelper<TFeatures, TData, TCellComponents, THeaderComponents>;
|
|
131
|
-
useAppTable: <TData extends RowData
|
|
127
|
+
useAppTable: <TData extends RowData>(tableOptions: Omit<TableOptionsWithReactiveData<TFeatures, TData>, "features">) => AppVueTable<TFeatures, TData, TableState<TFeatures>, TTableComponents, TCellComponents, THeaderComponents>;
|
|
132
128
|
useTableContext: <TData extends RowData = RowData>() => VueTable<TFeatures, TData>;
|
|
133
129
|
useCellContext: <TValue extends CellData = unknown>() => Cell<TFeatures, any, TValue>;
|
|
134
130
|
useHeaderContext: <TValue extends CellData = unknown>() => Header<TFeatures, any, TValue>;
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { FlexRenderCell, FlexRenderHeader } from "./FlexRender.js";
|
|
1
2
|
import { TableOptionsWithReactiveData, VueTable } from "./useTable.js";
|
|
2
3
|
import { Component, PropType } from "vue";
|
|
3
4
|
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";
|
|
@@ -51,19 +52,15 @@ type CreateTableHookOptions<TFeatures extends TableFeatures, TTableComponents ex
|
|
|
51
52
|
cellComponents?: TCellComponents;
|
|
52
53
|
headerComponents?: THeaderComponents;
|
|
53
54
|
};
|
|
54
|
-
interface AppTableProps
|
|
55
|
-
|
|
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
|
|
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
|
|
66
|
-
AppTable: Component<AppTableProps
|
|
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>>;
|
|
@@ -71,36 +68,36 @@ type AppVueTable<TFeatures extends TableFeatures, TData extends RowData, TSelect
|
|
|
71
68
|
};
|
|
72
69
|
declare const AppFlexRender: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
|
73
70
|
cell: {
|
|
74
|
-
type: PropType<
|
|
71
|
+
type: PropType<FlexRenderCell>;
|
|
75
72
|
default: undefined;
|
|
76
73
|
};
|
|
77
74
|
header: {
|
|
78
|
-
type: PropType<
|
|
75
|
+
type: PropType<FlexRenderHeader>;
|
|
79
76
|
default: undefined;
|
|
80
77
|
};
|
|
81
78
|
footer: {
|
|
82
|
-
type: PropType<
|
|
79
|
+
type: PropType<FlexRenderHeader>;
|
|
83
80
|
default: undefined;
|
|
84
81
|
};
|
|
85
82
|
}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
|
86
83
|
[key: string]: any;
|
|
87
84
|
}> | null, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
|
88
85
|
cell: {
|
|
89
|
-
type: PropType<
|
|
86
|
+
type: PropType<FlexRenderCell>;
|
|
90
87
|
default: undefined;
|
|
91
88
|
};
|
|
92
89
|
header: {
|
|
93
|
-
type: PropType<
|
|
90
|
+
type: PropType<FlexRenderHeader>;
|
|
94
91
|
default: undefined;
|
|
95
92
|
};
|
|
96
93
|
footer: {
|
|
97
|
-
type: PropType<
|
|
94
|
+
type: PropType<FlexRenderHeader>;
|
|
98
95
|
default: undefined;
|
|
99
96
|
};
|
|
100
97
|
}>> & Readonly<{}>, {
|
|
101
|
-
cell:
|
|
102
|
-
header:
|
|
103
|
-
footer:
|
|
98
|
+
cell: FlexRenderCell;
|
|
99
|
+
header: FlexRenderHeader;
|
|
100
|
+
footer: FlexRenderHeader;
|
|
104
101
|
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
105
102
|
/**
|
|
106
103
|
* Creates app-scoped Vue table helpers with features, row models, and
|
|
@@ -113,7 +110,6 @@ declare const AppFlexRender: import("vue").DefineComponent<import("vue").Extract
|
|
|
113
110
|
* ```ts
|
|
114
111
|
* const { useAppTable, createAppColumnHelper } = createTableHook({
|
|
115
112
|
* features,
|
|
116
|
-
* rowModels: {},
|
|
117
113
|
* tableComponents: {},
|
|
118
114
|
* cellComponents: {},
|
|
119
115
|
* headerComponents: {},
|
|
@@ -128,7 +124,7 @@ declare function createTableHook<TFeatures extends TableFeatures, const TTableCo
|
|
|
128
124
|
}: CreateTableHookOptions<TFeatures, TTableComponents, TCellComponents, THeaderComponents>): {
|
|
129
125
|
appFeatures: TFeatures;
|
|
130
126
|
createAppColumnHelper: <TData extends RowData>() => AppColumnHelper<TFeatures, TData, TCellComponents, THeaderComponents>;
|
|
131
|
-
useAppTable: <TData extends RowData
|
|
127
|
+
useAppTable: <TData extends RowData>(tableOptions: Omit<TableOptionsWithReactiveData<TFeatures, TData>, "features">) => AppVueTable<TFeatures, TData, TableState<TFeatures>, TTableComponents, TCellComponents, THeaderComponents>;
|
|
132
128
|
useTableContext: <TData extends RowData = RowData>() => VueTable<TFeatures, TData>;
|
|
133
129
|
useCellContext: <TValue extends CellData = unknown>() => Cell<TFeatures, any, TValue>;
|
|
134
130
|
useHeaderContext: <TValue extends CellData = unknown>() => Header<TFeatures, any, TValue>;
|