@tanstack/vue-table 9.0.0-beta.5 → 9.0.0-beta.51
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/README.md +2 -0
- package/dist/FlexRender.cjs +2 -3
- package/dist/FlexRender.cjs.map +1 -1
- package/dist/FlexRender.js +2 -3
- package/dist/FlexRender.js.map +1 -1
- package/dist/createTableHook.cjs +4 -9
- package/dist/createTableHook.cjs.map +1 -1
- package/dist/createTableHook.d.cts +39 -12
- package/dist/createTableHook.d.ts +39 -12
- package/dist/createTableHook.js +4 -9
- package/dist/createTableHook.js.map +1 -1
- package/dist/experimental-worker-plugin.cjs +9 -0
- package/dist/experimental-worker-plugin.d.cts +1 -0
- package/dist/experimental-worker-plugin.d.ts +1 -0
- package/dist/experimental-worker-plugin.js +3 -0
- package/dist/index.d.cts +2 -2
- package/dist/index.d.ts +2 -2
- package/dist/reactivity.cjs +2 -6
- package/dist/reactivity.cjs.map +1 -1
- package/dist/reactivity.js +2 -6
- package/dist/reactivity.js.map +1 -1
- package/dist/useTable.cjs +3 -7
- package/dist/useTable.cjs.map +1 -1
- package/dist/useTable.d.cts +1 -8
- package/dist/useTable.d.ts +1 -8
- package/dist/useTable.js +3 -7
- package/dist/useTable.js.map +1 -1
- package/package.json +8 -4
- package/skills/create-table-hook/SKILL.md +146 -0
- package/skills/getting-started/SKILL.md +144 -0
- package/skills/migrate-v8-to-v9/SKILL.md +185 -0
- package/skills/table-state/SKILL.md +191 -0
- package/skills/with-tanstack-query/SKILL.md +127 -0
- package/skills/with-tanstack-virtual/SKILL.md +116 -0
- package/src/createTableHook.ts +108 -17
- package/src/experimental-worker-plugin.ts +1 -0
- package/src/reactivity.ts +1 -2
- package/src/useTable.ts +3 -11
- package/skills/vue/client-to-server/SKILL.md +0 -365
- package/skills/vue/compose-with-tanstack-form/SKILL.md +0 -369
- package/skills/vue/compose-with-tanstack-pacer/SKILL.md +0 -318
- package/skills/vue/compose-with-tanstack-query/SKILL.md +0 -385
- package/skills/vue/compose-with-tanstack-store/SKILL.md +0 -301
- package/skills/vue/compose-with-tanstack-virtual/SKILL.md +0 -340
- package/skills/vue/getting-started/SKILL.md +0 -409
- package/skills/vue/migrate-v8-to-v9/SKILL.md +0 -375
- package/skills/vue/production-readiness/SKILL.md +0 -271
- package/skills/vue/table-state/SKILL.md +0 -403
package/README.md
CHANGED
|
@@ -39,6 +39,8 @@
|
|
|
39
39
|
> - [Solid Table](https://tanstack.com/table/alpha/docs/framework/solid/solid-table)
|
|
40
40
|
> - [Svelte Table](https://tanstack.com/table/alpha/docs/framework/svelte/svelte-table)
|
|
41
41
|
> - [Vue Table](https://tanstack.com/table/alpha/docs/framework/vue/vue-table)
|
|
42
|
+
> - [Alpine Table](https://tanstack.com/table/alpha/docs/framework/alpine/alpine-table)
|
|
43
|
+
> - [Ember Table](https://tanstack.com/table/alpha/docs/framework/ember/ember-table)
|
|
42
44
|
|
|
43
45
|
A headless table library for building powerful datagrids with full control over markup, styles, and behavior.
|
|
44
46
|
|
package/dist/FlexRender.cjs
CHANGED
|
@@ -60,11 +60,10 @@ const FlexRender = (0, vue.defineComponent)({
|
|
|
60
60
|
setup: (props) => {
|
|
61
61
|
return () => {
|
|
62
62
|
if (props.cell) {
|
|
63
|
-
var _cell$getIsAggregated, _cell$getIsPlaceholde;
|
|
64
63
|
const cell = props.cell;
|
|
65
64
|
const def = cell.column.columnDef;
|
|
66
|
-
if (
|
|
67
|
-
if (
|
|
65
|
+
if (cell.getIsAggregated?.()) return flexRender(def.aggregatedCell ?? def.cell, cell.getContext());
|
|
66
|
+
if (cell.getIsPlaceholder?.()) return null;
|
|
68
67
|
return flexRender(def.cell, cell.getContext());
|
|
69
68
|
}
|
|
70
69
|
if (props.header) return flexRender(props.header.column.columnDef.header, props.header.getContext());
|
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'\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
|
|
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,IAAI,KAAK,kBAAkB,GACzB,OAAO,WAAW,IAAI,kBAAkB,IAAI,MAAM,KAAK,WAAW,CAAC;IAErE,IAAI,KAAK,mBAAmB,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.js
CHANGED
|
@@ -60,11 +60,10 @@ const FlexRender = defineComponent({
|
|
|
60
60
|
setup: (props) => {
|
|
61
61
|
return () => {
|
|
62
62
|
if (props.cell) {
|
|
63
|
-
var _cell$getIsAggregated, _cell$getIsPlaceholde;
|
|
64
63
|
const cell = props.cell;
|
|
65
64
|
const def = cell.column.columnDef;
|
|
66
|
-
if (
|
|
67
|
-
if (
|
|
65
|
+
if (cell.getIsAggregated?.()) return flexRender(def.aggregatedCell ?? def.cell, cell.getContext());
|
|
66
|
+
if (cell.getIsPlaceholder?.()) return null;
|
|
68
67
|
return flexRender(def.cell, cell.getContext());
|
|
69
68
|
}
|
|
70
69
|
if (props.header) return flexRender(props.header.column.columnDef.header, props.header.getContext());
|
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'\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
|
|
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,IAAI,KAAK,kBAAkB,GACzB,OAAO,WAAW,IAAI,kBAAkB,IAAI,MAAM,KAAK,WAAW,CAAC;IAErE,IAAI,KAAK,mBAAmB,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
|
@@ -50,7 +50,6 @@ const AppFlexRender = (0, vue.defineComponent)({
|
|
|
50
50
|
* ```ts
|
|
51
51
|
* const { useAppTable, createAppColumnHelper } = createTableHook({
|
|
52
52
|
* features,
|
|
53
|
-
* rowModels: {},
|
|
54
53
|
* tableComponents: {},
|
|
55
54
|
* cellComponents: {},
|
|
56
55
|
* headerComponents: {},
|
|
@@ -107,8 +106,7 @@ function createTableHook({ tableComponents, cellComponents, headerComponents, ..
|
|
|
107
106
|
setup(_, { slots }) {
|
|
108
107
|
(0, vue.provide)(TableContext, table);
|
|
109
108
|
return () => {
|
|
110
|
-
|
|
111
|
-
return (_slots$default = slots.default) === null || _slots$default === void 0 ? void 0 : _slots$default.call(slots);
|
|
109
|
+
return slots.default?.();
|
|
112
110
|
};
|
|
113
111
|
}
|
|
114
112
|
});
|
|
@@ -126,8 +124,7 @@ function createTableHook({ tableComponents, cellComponents, headerComponents, ..
|
|
|
126
124
|
...cellComponents ?? {}
|
|
127
125
|
});
|
|
128
126
|
return () => {
|
|
129
|
-
|
|
130
|
-
return (_slots$default2 = slots.default) === null || _slots$default2 === void 0 ? void 0 : _slots$default2.call(slots, { cell: extendedCell });
|
|
127
|
+
return slots.default?.({ cell: extendedCell });
|
|
131
128
|
};
|
|
132
129
|
}
|
|
133
130
|
});
|
|
@@ -145,8 +142,7 @@ function createTableHook({ tableComponents, cellComponents, headerComponents, ..
|
|
|
145
142
|
...headerComponents ?? {}
|
|
146
143
|
});
|
|
147
144
|
return () => {
|
|
148
|
-
|
|
149
|
-
return (_slots$default3 = slots.default) === null || _slots$default3 === void 0 ? void 0 : _slots$default3.call(slots, { header: extendedHeader });
|
|
145
|
+
return slots.default?.({ header: extendedHeader });
|
|
150
146
|
};
|
|
151
147
|
}
|
|
152
148
|
});
|
|
@@ -164,8 +160,7 @@ function createTableHook({ tableComponents, cellComponents, headerComponents, ..
|
|
|
164
160
|
...headerComponents ?? {}
|
|
165
161
|
});
|
|
166
162
|
return () => {
|
|
167
|
-
|
|
168
|
-
return (_slots$default4 = slots.default) === null || _slots$default4 === void 0 ? void 0 : _slots$default4.call(slots, { header: extendedHeader });
|
|
163
|
+
return slots.default?.({ header: extendedHeader });
|
|
169
164
|
};
|
|
170
165
|
}
|
|
171
166
|
});
|
|
@@ -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 { 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
|
+
{"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 } 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} 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 TTableComponents extends Record<string, ComponentType<any>>,\n _TCellComponents extends Record<string, ComponentType<any>>,\n _THeaderComponents extends Record<string, ComponentType<any>>,\n> = VueTable<TFeatures, TData> &\n NoInfer<TTableComponents> & {\n AppTable: Component<AppTableProps>\n AppCell: Component<AppCellProps<TFeatures, TData>>\n AppHeader: Component<AppHeaderProps<TFeatures, TData>>\n AppFooter: Component<AppHeaderProps<TFeatures, TData>>\n FlexRender: typeof AppFlexRender\n }\n\nexport interface CreateTableHookResult<\n TFeatures extends TableFeatures,\n TTableComponents extends Record<string, ComponentType<any>>,\n TCellComponents extends Record<string, ComponentType<any>>,\n THeaderComponents extends Record<string, ComponentType<any>>,\n> {\n /** The features object that was passed to `createTableHook`. */\n appFeatures: TFeatures\n /**\n * A column helper pre-bound to `TFeatures` and the registered components, so\n * the cell/header/footer render props expose the bound components.\n */\n createAppColumnHelper: <TData extends RowData>() => AppColumnHelper<\n TFeatures,\n TData,\n TCellComponents,\n THeaderComponents\n >\n /**\n * Creates a table with the `App*` wrapper components and registered\n * `tableComponents` attached. `TData` is inferred from the `data` option.\n */\n useAppTable: <TData extends RowData>(\n tableOptions: Omit<\n TableOptionsWithReactiveData<TFeatures, TData>,\n 'features'\n >,\n ) => AppVueTable<\n TFeatures,\n TData,\n TTableComponents,\n TCellComponents,\n THeaderComponents\n >\n /**\n * Reads the table provided by the nearest `<table.AppTable>`. This is the same\n * extended instance `useAppTable` returns, so the `App*` components and your\n * `tableComponents` are available on it.\n */\n useTableContext: <TData extends RowData = RowData>() => AppVueTable<\n TFeatures,\n TData,\n TTableComponents,\n TCellComponents,\n THeaderComponents\n >\n /**\n * Reads the cell provided by the nearest `<table.AppCell>`, extended with your\n * `cellComponents` and a context-bound `FlexRender`.\n */\n useCellContext: <TValue extends CellData = CellData>() => Cell<\n TFeatures,\n any,\n TValue\n > &\n TCellComponents & { FlexRender: Component }\n /**\n * Reads the header provided by the nearest `<table.AppHeader>` /\n * `<table.AppFooter>`, extended with your `headerComponents` and a\n * context-bound `FlexRender`.\n */\n useHeaderContext: <TValue extends CellData = CellData>() => Header<\n TFeatures,\n any,\n TValue\n > &\n THeaderComponents & { FlexRender: Component }\n}\n\nexport const AppFlexRender = defineComponent({\n name: 'TableFlexRender',\n props: {\n cell: {\n type: Object as PropType<FlexRenderCell>,\n default: undefined,\n },\n header: {\n type: Object as PropType<FlexRenderHeader>,\n default: undefined,\n },\n footer: {\n type: Object as PropType<FlexRenderHeader>,\n default: undefined,\n },\n },\n setup(props) {\n return () => {\n if (props.cell) {\n return h(FlexRender, {\n render: props.cell.column.columnDef.cell,\n props: props.cell.getContext(),\n })\n }\n\n if (props.header) {\n return h(FlexRender, {\n render: props.header.column.columnDef.header,\n props: props.header.getContext(),\n })\n }\n\n if (props.footer) {\n return h(FlexRender, {\n render: props.footer.column.columnDef.footer,\n props: props.footer.getContext(),\n })\n }\n\n return null\n }\n },\n})\n\n/**\n * Creates app-scoped Vue table helpers with features, row models, and\n * renderable component maps pre-bound.\n *\n * Use this when an app or design system wants typed `useAppTable`, a pre-bound\n * column helper, and context helpers for table, cell, and header components.\n *\n * @example\n * ```ts\n * const { useAppTable, createAppColumnHelper } = createTableHook({\n * features,\n * tableComponents: {},\n * cellComponents: {},\n * headerComponents: {},\n * })\n * ```\n */\nexport function createTableHook<\n TFeatures extends TableFeatures,\n const TTableComponents extends Record<string, ComponentType<any>>,\n const TCellComponents extends Record<string, ComponentType<any>>,\n const THeaderComponents extends Record<string, ComponentType<any>>,\n>({\n tableComponents,\n cellComponents,\n headerComponents,\n ...defaultTableOptions\n}: CreateTableHookOptions<\n TFeatures,\n TTableComponents,\n TCellComponents,\n THeaderComponents\n>): CreateTableHookResult<\n TFeatures,\n TTableComponents,\n TCellComponents,\n THeaderComponents\n> {\n const TableContext = Symbol('TableContext') as InjectionKey<\n VueTable<TFeatures, any>\n >\n const CellContext = Symbol('CellContext') as InjectionKey<\n Cell<TFeatures, any, any>\n >\n const HeaderContext = Symbol('HeaderContext') as InjectionKey<\n Header<TFeatures, any, any>\n >\n\n function createAppColumnHelper<TData extends RowData>(): AppColumnHelper<\n TFeatures,\n TData,\n TCellComponents,\n THeaderComponents\n > {\n return coreCreateColumnHelper<TFeatures, TData>() as AppColumnHelper<\n TFeatures,\n TData,\n TCellComponents,\n THeaderComponents\n >\n }\n\n function useTableContext<TData extends RowData = RowData>(): AppVueTable<\n TFeatures,\n TData,\n TTableComponents,\n TCellComponents,\n THeaderComponents\n > {\n const table = inject(TableContext)\n\n if (!table) {\n throw new Error(\n '`useTableContext` must be used within an `AppTable` component. ' +\n 'Make sure your component is wrapped with `<table.AppTable>...</table.AppTable>`.',\n )\n }\n\n // The value provided by `<table.AppTable>` is the extended table (the App*\n // wrapper components and `tableComponents` are Object.assign-ed onto the same\n // instance `useAppTable` returns), so this asserts the runtime shape.\n return table as unknown as AppVueTable<\n TFeatures,\n TData,\n TTableComponents,\n TCellComponents,\n THeaderComponents\n >\n }\n\n function useCellContext<TValue extends CellData = CellData>(): Cell<\n TFeatures,\n any,\n TValue\n > &\n TCellComponents & { FlexRender: Component } {\n const cell = inject(CellContext)\n\n if (!cell) {\n throw new Error(\n '`useCellContext` must be used within an `AppCell` component. ' +\n 'Make sure your component is wrapped with `<table.AppCell :cell=\"cell\">...</table.AppCell>`.',\n )\n }\n\n // `<table.AppCell>` Object.assign-es `cellComponents` and `FlexRender` onto\n // the same cell instance it provides, so this asserts the runtime shape.\n return cell as unknown as Cell<TFeatures, any, TValue> &\n TCellComponents & { FlexRender: Component }\n }\n\n function useHeaderContext<TValue extends CellData = CellData>(): Header<\n TFeatures,\n any,\n TValue\n > &\n THeaderComponents & { FlexRender: Component } {\n const header = inject(HeaderContext)\n\n if (!header) {\n throw new Error(\n '`useHeaderContext` must be used within an `AppHeader` or `AppFooter` component.',\n )\n }\n\n // `<table.AppHeader>` / `<table.AppFooter>` Object.assign `headerComponents`\n // and `FlexRender` onto the same header instance they provide.\n return header as unknown as Header<TFeatures, any, TValue> &\n THeaderComponents & { FlexRender: Component }\n }\n\n const CellFlexRender = defineComponent({\n name: 'AppCellFlexRender',\n setup() {\n const cell = useCellContext()\n return () => h(AppFlexRender, { cell })\n },\n })\n\n const HeaderFlexRender = defineComponent({\n name: 'AppHeaderFlexRender',\n setup() {\n const header = useHeaderContext()\n return () => h(AppFlexRender, { header })\n },\n })\n\n const FooterFlexRender = defineComponent({\n name: 'AppFooterFlexRender',\n setup() {\n const header = useHeaderContext()\n return () => h(AppFlexRender, { footer: header })\n },\n })\n\n function useAppTable<TData extends RowData>(\n tableOptions: Omit<\n TableOptionsWithReactiveData<TFeatures, TData>,\n 'features'\n >,\n ): AppVueTable<\n TFeatures,\n TData,\n 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 TTableComponents,\n TCellComponents,\n THeaderComponents\n >\n }\n\n return {\n // `TableOptionsWithReactiveData` widens `features` to allow a reactive ref,\n // so this narrows it back to the resolved `TFeatures` for `appFeatures`.\n appFeatures: defaultTableOptions.features as TFeatures,\n createAppColumnHelper,\n useAppTable,\n useTableContext,\n useCellContext,\n useHeaderContext,\n }\n}\n"],"mappings":"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"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { FlexRenderCell, FlexRenderHeader } from "./FlexRender.cjs";
|
|
2
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
|
|
3
|
+
import { AccessorFn, AccessorFnColumnDef, AccessorKeyColumnDef, Cell, CellContext, CellData, Column, ColumnDef, DeepKeys, DeepValue, DisplayColumnDef, GroupColumnDef, Header, IdentifiedColumnDef, NoInfer, Row, RowData, Table, TableFeatures } from "@tanstack/table-core";
|
|
4
4
|
import { Component, PropType } from "vue";
|
|
5
5
|
|
|
6
6
|
//#region src/createTableHook.d.ts
|
|
@@ -59,13 +59,48 @@ interface AppCellProps<TFeatures extends TableFeatures, TData extends RowData, T
|
|
|
59
59
|
interface AppHeaderProps<TFeatures extends TableFeatures, TData extends RowData, TValue extends CellData = CellData> {
|
|
60
60
|
header: Header<TFeatures, TData, TValue>;
|
|
61
61
|
}
|
|
62
|
-
type AppVueTable<TFeatures extends TableFeatures, TData extends RowData,
|
|
62
|
+
type AppVueTable<TFeatures extends TableFeatures, TData extends RowData, TTableComponents extends Record<string, ComponentType<any>>, _TCellComponents extends Record<string, ComponentType<any>>, _THeaderComponents extends Record<string, ComponentType<any>>> = VueTable<TFeatures, TData> & NoInfer<TTableComponents> & {
|
|
63
63
|
AppTable: Component<AppTableProps>;
|
|
64
64
|
AppCell: Component<AppCellProps<TFeatures, TData>>;
|
|
65
65
|
AppHeader: Component<AppHeaderProps<TFeatures, TData>>;
|
|
66
66
|
AppFooter: Component<AppHeaderProps<TFeatures, TData>>;
|
|
67
67
|
FlexRender: typeof AppFlexRender;
|
|
68
68
|
};
|
|
69
|
+
interface CreateTableHookResult<TFeatures extends TableFeatures, TTableComponents extends Record<string, ComponentType<any>>, TCellComponents extends Record<string, ComponentType<any>>, THeaderComponents extends Record<string, ComponentType<any>>> {
|
|
70
|
+
/** The features object that was passed to `createTableHook`. */
|
|
71
|
+
appFeatures: TFeatures;
|
|
72
|
+
/**
|
|
73
|
+
* A column helper pre-bound to `TFeatures` and the registered components, so
|
|
74
|
+
* the cell/header/footer render props expose the bound components.
|
|
75
|
+
*/
|
|
76
|
+
createAppColumnHelper: <TData extends RowData>() => AppColumnHelper<TFeatures, TData, TCellComponents, THeaderComponents>;
|
|
77
|
+
/**
|
|
78
|
+
* Creates a table with the `App*` wrapper components and registered
|
|
79
|
+
* `tableComponents` attached. `TData` is inferred from the `data` option.
|
|
80
|
+
*/
|
|
81
|
+
useAppTable: <TData extends RowData>(tableOptions: Omit<TableOptionsWithReactiveData<TFeatures, TData>, 'features'>) => AppVueTable<TFeatures, TData, TTableComponents, TCellComponents, THeaderComponents>;
|
|
82
|
+
/**
|
|
83
|
+
* Reads the table provided by the nearest `<table.AppTable>`. This is the same
|
|
84
|
+
* extended instance `useAppTable` returns, so the `App*` components and your
|
|
85
|
+
* `tableComponents` are available on it.
|
|
86
|
+
*/
|
|
87
|
+
useTableContext: <TData extends RowData = RowData>() => AppVueTable<TFeatures, TData, TTableComponents, TCellComponents, THeaderComponents>;
|
|
88
|
+
/**
|
|
89
|
+
* Reads the cell provided by the nearest `<table.AppCell>`, extended with your
|
|
90
|
+
* `cellComponents` and a context-bound `FlexRender`.
|
|
91
|
+
*/
|
|
92
|
+
useCellContext: <TValue extends CellData = CellData>() => Cell<TFeatures, any, TValue> & TCellComponents & {
|
|
93
|
+
FlexRender: Component;
|
|
94
|
+
};
|
|
95
|
+
/**
|
|
96
|
+
* Reads the header provided by the nearest `<table.AppHeader>` /
|
|
97
|
+
* `<table.AppFooter>`, extended with your `headerComponents` and a
|
|
98
|
+
* context-bound `FlexRender`.
|
|
99
|
+
*/
|
|
100
|
+
useHeaderContext: <TValue extends CellData = CellData>() => Header<TFeatures, any, TValue> & THeaderComponents & {
|
|
101
|
+
FlexRender: Component;
|
|
102
|
+
};
|
|
103
|
+
}
|
|
69
104
|
declare const AppFlexRender: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
|
70
105
|
cell: {
|
|
71
106
|
type: PropType<FlexRenderCell>;
|
|
@@ -110,7 +145,6 @@ declare const AppFlexRender: import("vue").DefineComponent<import("vue").Extract
|
|
|
110
145
|
* ```ts
|
|
111
146
|
* const { useAppTable, createAppColumnHelper } = createTableHook({
|
|
112
147
|
* features,
|
|
113
|
-
* rowModels: {},
|
|
114
148
|
* tableComponents: {},
|
|
115
149
|
* cellComponents: {},
|
|
116
150
|
* headerComponents: {},
|
|
@@ -122,14 +156,7 @@ declare function createTableHook<TFeatures extends TableFeatures, const TTableCo
|
|
|
122
156
|
cellComponents,
|
|
123
157
|
headerComponents,
|
|
124
158
|
...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
|
-
};
|
|
159
|
+
}: CreateTableHookOptions<TFeatures, TTableComponents, TCellComponents, THeaderComponents>): CreateTableHookResult<TFeatures, TTableComponents, TCellComponents, THeaderComponents>;
|
|
133
160
|
//#endregion
|
|
134
|
-
export { AppCellContext, AppCellProps, AppColumnDefBase, AppColumnDefTemplate, AppColumnHelper, AppDisplayColumnDef, AppFlexRender, AppGroupColumnDef, AppHeaderContext, AppHeaderProps, AppTableProps, AppVueTable, ComponentType, CreateTableHookOptions, createTableHook };
|
|
161
|
+
export { AppCellContext, AppCellProps, AppColumnDefBase, AppColumnDefTemplate, AppColumnHelper, AppDisplayColumnDef, AppFlexRender, AppGroupColumnDef, AppHeaderContext, AppHeaderProps, AppTableProps, AppVueTable, ComponentType, CreateTableHookOptions, CreateTableHookResult, createTableHook };
|
|
135
162
|
//# sourceMappingURL=createTableHook.d.cts.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { FlexRenderCell, FlexRenderHeader } from "./FlexRender.js";
|
|
2
2
|
import { TableOptionsWithReactiveData, VueTable } from "./useTable.js";
|
|
3
3
|
import { Component, PropType } from "vue";
|
|
4
|
-
import { AccessorFn, AccessorFnColumnDef, AccessorKeyColumnDef, Cell, CellContext, CellData, Column, ColumnDef, DeepKeys, DeepValue, DisplayColumnDef, GroupColumnDef, Header, IdentifiedColumnDef, NoInfer, Row, RowData, Table, TableFeatures
|
|
4
|
+
import { AccessorFn, AccessorFnColumnDef, AccessorKeyColumnDef, Cell, CellContext, CellData, Column, ColumnDef, DeepKeys, DeepValue, DisplayColumnDef, GroupColumnDef, Header, IdentifiedColumnDef, NoInfer, Row, RowData, Table, TableFeatures } from "@tanstack/table-core";
|
|
5
5
|
|
|
6
6
|
//#region src/createTableHook.d.ts
|
|
7
7
|
type ComponentType<T extends Record<string, any>> = Component<T>;
|
|
@@ -59,13 +59,48 @@ interface AppCellProps<TFeatures extends TableFeatures, TData extends RowData, T
|
|
|
59
59
|
interface AppHeaderProps<TFeatures extends TableFeatures, TData extends RowData, TValue extends CellData = CellData> {
|
|
60
60
|
header: Header<TFeatures, TData, TValue>;
|
|
61
61
|
}
|
|
62
|
-
type AppVueTable<TFeatures extends TableFeatures, TData extends RowData,
|
|
62
|
+
type AppVueTable<TFeatures extends TableFeatures, TData extends RowData, TTableComponents extends Record<string, ComponentType<any>>, _TCellComponents extends Record<string, ComponentType<any>>, _THeaderComponents extends Record<string, ComponentType<any>>> = VueTable<TFeatures, TData> & NoInfer<TTableComponents> & {
|
|
63
63
|
AppTable: Component<AppTableProps>;
|
|
64
64
|
AppCell: Component<AppCellProps<TFeatures, TData>>;
|
|
65
65
|
AppHeader: Component<AppHeaderProps<TFeatures, TData>>;
|
|
66
66
|
AppFooter: Component<AppHeaderProps<TFeatures, TData>>;
|
|
67
67
|
FlexRender: typeof AppFlexRender;
|
|
68
68
|
};
|
|
69
|
+
interface CreateTableHookResult<TFeatures extends TableFeatures, TTableComponents extends Record<string, ComponentType<any>>, TCellComponents extends Record<string, ComponentType<any>>, THeaderComponents extends Record<string, ComponentType<any>>> {
|
|
70
|
+
/** The features object that was passed to `createTableHook`. */
|
|
71
|
+
appFeatures: TFeatures;
|
|
72
|
+
/**
|
|
73
|
+
* A column helper pre-bound to `TFeatures` and the registered components, so
|
|
74
|
+
* the cell/header/footer render props expose the bound components.
|
|
75
|
+
*/
|
|
76
|
+
createAppColumnHelper: <TData extends RowData>() => AppColumnHelper<TFeatures, TData, TCellComponents, THeaderComponents>;
|
|
77
|
+
/**
|
|
78
|
+
* Creates a table with the `App*` wrapper components and registered
|
|
79
|
+
* `tableComponents` attached. `TData` is inferred from the `data` option.
|
|
80
|
+
*/
|
|
81
|
+
useAppTable: <TData extends RowData>(tableOptions: Omit<TableOptionsWithReactiveData<TFeatures, TData>, 'features'>) => AppVueTable<TFeatures, TData, TTableComponents, TCellComponents, THeaderComponents>;
|
|
82
|
+
/**
|
|
83
|
+
* Reads the table provided by the nearest `<table.AppTable>`. This is the same
|
|
84
|
+
* extended instance `useAppTable` returns, so the `App*` components and your
|
|
85
|
+
* `tableComponents` are available on it.
|
|
86
|
+
*/
|
|
87
|
+
useTableContext: <TData extends RowData = RowData>() => AppVueTable<TFeatures, TData, TTableComponents, TCellComponents, THeaderComponents>;
|
|
88
|
+
/**
|
|
89
|
+
* Reads the cell provided by the nearest `<table.AppCell>`, extended with your
|
|
90
|
+
* `cellComponents` and a context-bound `FlexRender`.
|
|
91
|
+
*/
|
|
92
|
+
useCellContext: <TValue extends CellData = CellData>() => Cell<TFeatures, any, TValue> & TCellComponents & {
|
|
93
|
+
FlexRender: Component;
|
|
94
|
+
};
|
|
95
|
+
/**
|
|
96
|
+
* Reads the header provided by the nearest `<table.AppHeader>` /
|
|
97
|
+
* `<table.AppFooter>`, extended with your `headerComponents` and a
|
|
98
|
+
* context-bound `FlexRender`.
|
|
99
|
+
*/
|
|
100
|
+
useHeaderContext: <TValue extends CellData = CellData>() => Header<TFeatures, any, TValue> & THeaderComponents & {
|
|
101
|
+
FlexRender: Component;
|
|
102
|
+
};
|
|
103
|
+
}
|
|
69
104
|
declare const AppFlexRender: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
|
70
105
|
cell: {
|
|
71
106
|
type: PropType<FlexRenderCell>;
|
|
@@ -110,7 +145,6 @@ declare const AppFlexRender: import("vue").DefineComponent<import("vue").Extract
|
|
|
110
145
|
* ```ts
|
|
111
146
|
* const { useAppTable, createAppColumnHelper } = createTableHook({
|
|
112
147
|
* features,
|
|
113
|
-
* rowModels: {},
|
|
114
148
|
* tableComponents: {},
|
|
115
149
|
* cellComponents: {},
|
|
116
150
|
* headerComponents: {},
|
|
@@ -122,14 +156,7 @@ declare function createTableHook<TFeatures extends TableFeatures, const TTableCo
|
|
|
122
156
|
cellComponents,
|
|
123
157
|
headerComponents,
|
|
124
158
|
...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
|
-
};
|
|
159
|
+
}: CreateTableHookOptions<TFeatures, TTableComponents, TCellComponents, THeaderComponents>): CreateTableHookResult<TFeatures, TTableComponents, TCellComponents, THeaderComponents>;
|
|
133
160
|
//#endregion
|
|
134
|
-
export { AppCellContext, AppCellProps, AppColumnDefBase, AppColumnDefTemplate, AppColumnHelper, AppDisplayColumnDef, AppFlexRender, AppGroupColumnDef, AppHeaderContext, AppHeaderProps, AppTableProps, AppVueTable, ComponentType, CreateTableHookOptions, createTableHook };
|
|
161
|
+
export { AppCellContext, AppCellProps, AppColumnDefBase, AppColumnDefTemplate, AppColumnHelper, AppDisplayColumnDef, AppFlexRender, AppGroupColumnDef, AppHeaderContext, AppHeaderProps, AppTableProps, AppVueTable, ComponentType, CreateTableHookOptions, CreateTableHookResult, createTableHook };
|
|
135
162
|
//# sourceMappingURL=createTableHook.d.ts.map
|
package/dist/createTableHook.js
CHANGED
|
@@ -50,7 +50,6 @@ const AppFlexRender = defineComponent({
|
|
|
50
50
|
* ```ts
|
|
51
51
|
* const { useAppTable, createAppColumnHelper } = createTableHook({
|
|
52
52
|
* features,
|
|
53
|
-
* rowModels: {},
|
|
54
53
|
* tableComponents: {},
|
|
55
54
|
* cellComponents: {},
|
|
56
55
|
* headerComponents: {},
|
|
@@ -107,8 +106,7 @@ function createTableHook({ tableComponents, cellComponents, headerComponents, ..
|
|
|
107
106
|
setup(_, { slots }) {
|
|
108
107
|
provide(TableContext, table);
|
|
109
108
|
return () => {
|
|
110
|
-
|
|
111
|
-
return (_slots$default = slots.default) === null || _slots$default === void 0 ? void 0 : _slots$default.call(slots);
|
|
109
|
+
return slots.default?.();
|
|
112
110
|
};
|
|
113
111
|
}
|
|
114
112
|
});
|
|
@@ -126,8 +124,7 @@ function createTableHook({ tableComponents, cellComponents, headerComponents, ..
|
|
|
126
124
|
...cellComponents ?? {}
|
|
127
125
|
});
|
|
128
126
|
return () => {
|
|
129
|
-
|
|
130
|
-
return (_slots$default2 = slots.default) === null || _slots$default2 === void 0 ? void 0 : _slots$default2.call(slots, { cell: extendedCell });
|
|
127
|
+
return slots.default?.({ cell: extendedCell });
|
|
131
128
|
};
|
|
132
129
|
}
|
|
133
130
|
});
|
|
@@ -145,8 +142,7 @@ function createTableHook({ tableComponents, cellComponents, headerComponents, ..
|
|
|
145
142
|
...headerComponents ?? {}
|
|
146
143
|
});
|
|
147
144
|
return () => {
|
|
148
|
-
|
|
149
|
-
return (_slots$default3 = slots.default) === null || _slots$default3 === void 0 ? void 0 : _slots$default3.call(slots, { header: extendedHeader });
|
|
145
|
+
return slots.default?.({ header: extendedHeader });
|
|
150
146
|
};
|
|
151
147
|
}
|
|
152
148
|
});
|
|
@@ -164,8 +160,7 @@ function createTableHook({ tableComponents, cellComponents, headerComponents, ..
|
|
|
164
160
|
...headerComponents ?? {}
|
|
165
161
|
});
|
|
166
162
|
return () => {
|
|
167
|
-
|
|
168
|
-
return (_slots$default4 = slots.default) === null || _slots$default4 === void 0 ? void 0 : _slots$default4.call(slots, { header: extendedHeader });
|
|
163
|
+
return slots.default?.({ header: extendedHeader });
|
|
169
164
|
};
|
|
170
165
|
}
|
|
171
166
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"createTableHook.js","names":["coreCreateColumnHelper"],"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
|
+
{"version":3,"file":"createTableHook.js","names":["coreCreateColumnHelper"],"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 } 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} 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 TTableComponents extends Record<string, ComponentType<any>>,\n _TCellComponents extends Record<string, ComponentType<any>>,\n _THeaderComponents extends Record<string, ComponentType<any>>,\n> = VueTable<TFeatures, TData> &\n NoInfer<TTableComponents> & {\n AppTable: Component<AppTableProps>\n AppCell: Component<AppCellProps<TFeatures, TData>>\n AppHeader: Component<AppHeaderProps<TFeatures, TData>>\n AppFooter: Component<AppHeaderProps<TFeatures, TData>>\n FlexRender: typeof AppFlexRender\n }\n\nexport interface CreateTableHookResult<\n TFeatures extends TableFeatures,\n TTableComponents extends Record<string, ComponentType<any>>,\n TCellComponents extends Record<string, ComponentType<any>>,\n THeaderComponents extends Record<string, ComponentType<any>>,\n> {\n /** The features object that was passed to `createTableHook`. */\n appFeatures: TFeatures\n /**\n * A column helper pre-bound to `TFeatures` and the registered components, so\n * the cell/header/footer render props expose the bound components.\n */\n createAppColumnHelper: <TData extends RowData>() => AppColumnHelper<\n TFeatures,\n TData,\n TCellComponents,\n THeaderComponents\n >\n /**\n * Creates a table with the `App*` wrapper components and registered\n * `tableComponents` attached. `TData` is inferred from the `data` option.\n */\n useAppTable: <TData extends RowData>(\n tableOptions: Omit<\n TableOptionsWithReactiveData<TFeatures, TData>,\n 'features'\n >,\n ) => AppVueTable<\n TFeatures,\n TData,\n TTableComponents,\n TCellComponents,\n THeaderComponents\n >\n /**\n * Reads the table provided by the nearest `<table.AppTable>`. This is the same\n * extended instance `useAppTable` returns, so the `App*` components and your\n * `tableComponents` are available on it.\n */\n useTableContext: <TData extends RowData = RowData>() => AppVueTable<\n TFeatures,\n TData,\n TTableComponents,\n TCellComponents,\n THeaderComponents\n >\n /**\n * Reads the cell provided by the nearest `<table.AppCell>`, extended with your\n * `cellComponents` and a context-bound `FlexRender`.\n */\n useCellContext: <TValue extends CellData = CellData>() => Cell<\n TFeatures,\n any,\n TValue\n > &\n TCellComponents & { FlexRender: Component }\n /**\n * Reads the header provided by the nearest `<table.AppHeader>` /\n * `<table.AppFooter>`, extended with your `headerComponents` and a\n * context-bound `FlexRender`.\n */\n useHeaderContext: <TValue extends CellData = CellData>() => Header<\n TFeatures,\n any,\n TValue\n > &\n THeaderComponents & { FlexRender: Component }\n}\n\nexport const AppFlexRender = defineComponent({\n name: 'TableFlexRender',\n props: {\n cell: {\n type: Object as PropType<FlexRenderCell>,\n default: undefined,\n },\n header: {\n type: Object as PropType<FlexRenderHeader>,\n default: undefined,\n },\n footer: {\n type: Object as PropType<FlexRenderHeader>,\n default: undefined,\n },\n },\n setup(props) {\n return () => {\n if (props.cell) {\n return h(FlexRender, {\n render: props.cell.column.columnDef.cell,\n props: props.cell.getContext(),\n })\n }\n\n if (props.header) {\n return h(FlexRender, {\n render: props.header.column.columnDef.header,\n props: props.header.getContext(),\n })\n }\n\n if (props.footer) {\n return h(FlexRender, {\n render: props.footer.column.columnDef.footer,\n props: props.footer.getContext(),\n })\n }\n\n return null\n }\n },\n})\n\n/**\n * Creates app-scoped Vue table helpers with features, row models, and\n * renderable component maps pre-bound.\n *\n * Use this when an app or design system wants typed `useAppTable`, a pre-bound\n * column helper, and context helpers for table, cell, and header components.\n *\n * @example\n * ```ts\n * const { useAppTable, createAppColumnHelper } = createTableHook({\n * features,\n * tableComponents: {},\n * cellComponents: {},\n * headerComponents: {},\n * })\n * ```\n */\nexport function createTableHook<\n TFeatures extends TableFeatures,\n const TTableComponents extends Record<string, ComponentType<any>>,\n const TCellComponents extends Record<string, ComponentType<any>>,\n const THeaderComponents extends Record<string, ComponentType<any>>,\n>({\n tableComponents,\n cellComponents,\n headerComponents,\n ...defaultTableOptions\n}: CreateTableHookOptions<\n TFeatures,\n TTableComponents,\n TCellComponents,\n THeaderComponents\n>): CreateTableHookResult<\n TFeatures,\n TTableComponents,\n TCellComponents,\n THeaderComponents\n> {\n const TableContext = Symbol('TableContext') as InjectionKey<\n VueTable<TFeatures, any>\n >\n const CellContext = Symbol('CellContext') as InjectionKey<\n Cell<TFeatures, any, any>\n >\n const HeaderContext = Symbol('HeaderContext') as InjectionKey<\n Header<TFeatures, any, any>\n >\n\n function createAppColumnHelper<TData extends RowData>(): AppColumnHelper<\n TFeatures,\n TData,\n TCellComponents,\n THeaderComponents\n > {\n return coreCreateColumnHelper<TFeatures, TData>() as AppColumnHelper<\n TFeatures,\n TData,\n TCellComponents,\n THeaderComponents\n >\n }\n\n function useTableContext<TData extends RowData = RowData>(): AppVueTable<\n TFeatures,\n TData,\n TTableComponents,\n TCellComponents,\n THeaderComponents\n > {\n const table = inject(TableContext)\n\n if (!table) {\n throw new Error(\n '`useTableContext` must be used within an `AppTable` component. ' +\n 'Make sure your component is wrapped with `<table.AppTable>...</table.AppTable>`.',\n )\n }\n\n // The value provided by `<table.AppTable>` is the extended table (the App*\n // wrapper components and `tableComponents` are Object.assign-ed onto the same\n // instance `useAppTable` returns), so this asserts the runtime shape.\n return table as unknown as AppVueTable<\n TFeatures,\n TData,\n TTableComponents,\n TCellComponents,\n THeaderComponents\n >\n }\n\n function useCellContext<TValue extends CellData = CellData>(): Cell<\n TFeatures,\n any,\n TValue\n > &\n TCellComponents & { FlexRender: Component } {\n const cell = inject(CellContext)\n\n if (!cell) {\n throw new Error(\n '`useCellContext` must be used within an `AppCell` component. ' +\n 'Make sure your component is wrapped with `<table.AppCell :cell=\"cell\">...</table.AppCell>`.',\n )\n }\n\n // `<table.AppCell>` Object.assign-es `cellComponents` and `FlexRender` onto\n // the same cell instance it provides, so this asserts the runtime shape.\n return cell as unknown as Cell<TFeatures, any, TValue> &\n TCellComponents & { FlexRender: Component }\n }\n\n function useHeaderContext<TValue extends CellData = CellData>(): Header<\n TFeatures,\n any,\n TValue\n > &\n THeaderComponents & { FlexRender: Component } {\n const header = inject(HeaderContext)\n\n if (!header) {\n throw new Error(\n '`useHeaderContext` must be used within an `AppHeader` or `AppFooter` component.',\n )\n }\n\n // `<table.AppHeader>` / `<table.AppFooter>` Object.assign `headerComponents`\n // and `FlexRender` onto the same header instance they provide.\n return header as unknown as Header<TFeatures, any, TValue> &\n THeaderComponents & { FlexRender: Component }\n }\n\n const CellFlexRender = defineComponent({\n name: 'AppCellFlexRender',\n setup() {\n const cell = useCellContext()\n return () => h(AppFlexRender, { cell })\n },\n })\n\n const HeaderFlexRender = defineComponent({\n name: 'AppHeaderFlexRender',\n setup() {\n const header = useHeaderContext()\n return () => h(AppFlexRender, { header })\n },\n })\n\n const FooterFlexRender = defineComponent({\n name: 'AppFooterFlexRender',\n setup() {\n const header = useHeaderContext()\n return () => h(AppFlexRender, { footer: header })\n },\n })\n\n function useAppTable<TData extends RowData>(\n tableOptions: Omit<\n TableOptionsWithReactiveData<TFeatures, TData>,\n 'features'\n >,\n ): AppVueTable<\n TFeatures,\n TData,\n 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 TTableComponents,\n TCellComponents,\n THeaderComponents\n >\n }\n\n return {\n // `TableOptionsWithReactiveData` widens `features` to allow a reactive ref,\n // so this narrows it back to the resolved `TFeatures` for `appFeatures`.\n appFeatures: defaultTableOptions.features as TFeatures,\n createAppColumnHelper,\n useAppTable,\n useTableContext,\n useCellContext,\n useHeaderContext,\n }\n}\n"],"mappings":"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"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
|
|
2
|
+
|
|
3
|
+
var _tanstack_table_core_experimental_worker_plugin = require("@tanstack/table-core/experimental-worker-plugin");
|
|
4
|
+
Object.keys(_tanstack_table_core_experimental_worker_plugin).forEach(function (k) {
|
|
5
|
+
if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
|
|
6
|
+
enumerable: true,
|
|
7
|
+
get: function () { return _tanstack_table_core_experimental_worker_plugin[k]; }
|
|
8
|
+
});
|
|
9
|
+
});
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from "@tanstack/table-core/experimental-worker-plugin";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from "@tanstack/table-core/experimental-worker-plugin";
|
package/dist/index.d.cts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { FlexRender, FlexRenderCell, FlexRenderHeader, flexRender } from "./FlexRender.cjs";
|
|
2
2
|
import { TableOptionsWithReactiveData, VueTable, useTable } from "./useTable.cjs";
|
|
3
|
-
import { AppCellContext, AppCellProps, AppColumnDefBase, AppColumnDefTemplate, AppColumnHelper, AppDisplayColumnDef, AppFlexRender, AppGroupColumnDef, AppHeaderContext, AppHeaderProps, AppTableProps, AppVueTable, ComponentType, CreateTableHookOptions, createTableHook } from "./createTableHook.cjs";
|
|
3
|
+
import { AppCellContext, AppCellProps, AppColumnDefBase, AppColumnDefTemplate, AppColumnHelper, AppDisplayColumnDef, AppFlexRender, AppGroupColumnDef, AppHeaderContext, AppHeaderProps, AppTableProps, AppVueTable, ComponentType, CreateTableHookOptions, CreateTableHookResult, createTableHook } from "./createTableHook.cjs";
|
|
4
4
|
export * from "@tanstack/table-core";
|
|
5
|
-
export { AppCellContext, AppCellProps, AppColumnDefBase, AppColumnDefTemplate, AppColumnHelper, AppDisplayColumnDef, AppFlexRender, AppGroupColumnDef, AppHeaderContext, AppHeaderProps, AppTableProps, AppVueTable, ComponentType, CreateTableHookOptions, FlexRender, FlexRenderCell, FlexRenderHeader, TableOptionsWithReactiveData, VueTable, createTableHook, flexRender, useTable };
|
|
5
|
+
export { AppCellContext, AppCellProps, AppColumnDefBase, AppColumnDefTemplate, AppColumnHelper, AppDisplayColumnDef, AppFlexRender, AppGroupColumnDef, AppHeaderContext, AppHeaderProps, AppTableProps, AppVueTable, ComponentType, CreateTableHookOptions, CreateTableHookResult, FlexRender, FlexRenderCell, FlexRenderHeader, TableOptionsWithReactiveData, VueTable, createTableHook, flexRender, useTable };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { FlexRender, FlexRenderCell, FlexRenderHeader, flexRender } from "./FlexRender.js";
|
|
2
2
|
import { TableOptionsWithReactiveData, VueTable, useTable } from "./useTable.js";
|
|
3
|
-
import { AppCellContext, AppCellProps, AppColumnDefBase, AppColumnDefTemplate, AppColumnHelper, AppDisplayColumnDef, AppFlexRender, AppGroupColumnDef, AppHeaderContext, AppHeaderProps, AppTableProps, AppVueTable, ComponentType, CreateTableHookOptions, createTableHook } from "./createTableHook.js";
|
|
3
|
+
import { AppCellContext, AppCellProps, AppColumnDefBase, AppColumnDefTemplate, AppColumnHelper, AppDisplayColumnDef, AppFlexRender, AppGroupColumnDef, AppHeaderContext, AppHeaderProps, AppTableProps, AppVueTable, ComponentType, CreateTableHookOptions, CreateTableHookResult, createTableHook } from "./createTableHook.js";
|
|
4
4
|
export * from "@tanstack/table-core";
|
|
5
|
-
export { AppCellContext, AppCellProps, AppColumnDefBase, AppColumnDefTemplate, AppColumnHelper, AppDisplayColumnDef, AppFlexRender, AppGroupColumnDef, AppHeaderContext, AppHeaderProps, AppTableProps, AppVueTable, ComponentType, CreateTableHookOptions, FlexRender, FlexRenderCell, FlexRenderHeader, TableOptionsWithReactiveData, VueTable, createTableHook, flexRender, useTable };
|
|
5
|
+
export { AppCellContext, AppCellProps, AppColumnDefBase, AppColumnDefTemplate, AppColumnHelper, AppDisplayColumnDef, AppFlexRender, AppGroupColumnDef, AppHeaderContext, AppHeaderProps, AppTableProps, AppVueTable, ComponentType, CreateTableHookOptions, CreateTableHookResult, FlexRender, FlexRenderCell, FlexRenderHeader, TableOptionsWithReactiveData, VueTable, createTableHook, flexRender, useTable };
|