@tanstack/vue-table 9.0.0-alpha.45 → 9.0.0-alpha.46

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.
@@ -1 +1 @@
1
- {"version":3,"file":"FlexRender.cjs","names":[],"sources":["../src/FlexRender.ts"],"sourcesContent":["import { defineComponent, h, isVNode } from 'vue'\nimport type { PropType } from 'vue'\nimport type {\n Cell,\n CellData,\n Header,\n RowData,\n TableFeatures,\n} from '@tanstack/table-core'\n\n/**\n * If rendering headers, cells, or footers with custom markup, use flexRender instead of `cell.getValue()` or `cell.renderValue()`.\n * @example flexRender(cell.column.columnDef.cell, cell.getContext())\n */\nexport function flexRender(render: any, props: any): any {\n if (typeof render === 'function') {\n const rendered = render(props)\n\n if (isVNode(rendered)) {\n return rendered\n }\n\n if (typeof rendered === 'function' || typeof rendered === 'object') {\n return h(rendered, props)\n }\n\n return rendered\n }\n\n if (typeof render === 'object') {\n return h(render, props)\n }\n\n return render\n}\n\n/**\n * Simplified component for rendering headers, cells, or footers.\n *\n * Supports both the new shorthand pattern and the legacy `:render`/`:props` pattern:\n * @example\n * ```vue\n * <!-- New shorthand pattern -->\n * <FlexRender :cell=\"cell\" />\n * <FlexRender :header=\"header\" />\n * <FlexRender :footer=\"header\" />\n *\n * <!-- Legacy pattern (still supported) -->\n * <FlexRender :render=\"cell.column.columnDef.cell\" :props=\"cell.getContext()\" />\n * ```\n */\nexport const FlexRender = defineComponent({\n props: {\n render: {\n type: [Function, Object, String] as PropType<any>,\n default: undefined,\n },\n props: {\n type: Object as PropType<any>,\n default: undefined,\n },\n cell: {\n type: Object as PropType<Cell<any, any, any>>,\n default: undefined,\n },\n header: {\n type: Object as PropType<Header<any, any, any>>,\n default: undefined,\n },\n footer: {\n type: Object as PropType<Header<any, any, any>>,\n default: undefined,\n },\n },\n setup: (props: {\n render?: any\n props?: any\n cell?: Cell<any, any, any>\n header?: Header<any, any, any>\n footer?: Header<any, any, any>\n }) => {\n return () => {\n // New shorthand pattern: extract render and props from cell/header/footer\n if (props.cell) {\n const cell = props.cell\n const def = cell.column.columnDef\n // When the column-grouping feature is registered, a cell can be in\n // one of three special modes that should not render `columnDef.cell`\n // directly:\n // - aggregated: render `columnDef.aggregatedCell` (falling back to\n // `columnDef.cell` if the column did not define one)\n // - placeholder: a duplicate value within a group — render nothing\n // - grouped: fall through to `columnDef.cell`; consumers that want\n // a custom group header typically branch on `cell.getIsGrouped()`\n // themselves first\n if (cell.getIsAggregated?.()) {\n return flexRender(def.aggregatedCell ?? def.cell, cell.getContext())\n }\n if (cell.getIsPlaceholder?.()) {\n return null\n }\n return flexRender(def.cell, cell.getContext())\n }\n\n if (props.header) {\n return flexRender(\n props.header.column.columnDef.header,\n props.header.getContext(),\n )\n }\n\n if (props.footer) {\n return flexRender(\n props.footer.column.columnDef.footer,\n props.footer.getContext(),\n )\n }\n\n // Legacy pattern: use render and props directly\n return flexRender(props.render, props.props)\n }\n },\n})\n"],"mappings":";;;;;;;AAcA,SAAgB,WAAW,QAAa,OAAiB;AACvD,KAAI,OAAO,WAAW,YAAY;EAChC,MAAM,WAAW,OAAO,MAAM;AAE9B,uBAAY,SAAS,CACnB,QAAO;AAGT,MAAI,OAAO,aAAa,cAAc,OAAO,aAAa,SACxD,mBAAS,UAAU,MAAM;AAG3B,SAAO;;AAGT,KAAI,OAAO,WAAW,SACpB,mBAAS,QAAQ,MAAM;AAGzB,QAAO;;;;;;;;;;;;;;;;;AAkBT,MAAa,sCAA6B;CACxC,OAAO;EACL,QAAQ;GACN,MAAM;IAAC;IAAU;IAAQ;IAAO;GAChC,SAAS;GACV;EACD,OAAO;GACL,MAAM;GACN,SAAS;GACV;EACD,MAAM;GACJ,MAAM;GACN,SAAS;GACV;EACD,QAAQ;GACN,MAAM;GACN,SAAS;GACV;EACD,QAAQ;GACN,MAAM;GACN,SAAS;GACV;EACF;CACD,QAAQ,UAMF;AACJ,eAAa;AAEX,OAAI,MAAM,MAAM;;IACd,MAAM,OAAO,MAAM;IACnB,MAAM,MAAM,KAAK,OAAO;AAUxB,iCAAI,KAAK,yGAAmB,CAC1B,QAAO,WAAW,IAAI,kBAAkB,IAAI,MAAM,KAAK,YAAY,CAAC;AAEtE,iCAAI,KAAK,0GAAoB,CAC3B,QAAO;AAET,WAAO,WAAW,IAAI,MAAM,KAAK,YAAY,CAAC;;AAGhD,OAAI,MAAM,OACR,QAAO,WACL,MAAM,OAAO,OAAO,UAAU,QAC9B,MAAM,OAAO,YAAY,CAC1B;AAGH,OAAI,MAAM,OACR,QAAO,WACL,MAAM,OAAO,OAAO,UAAU,QAC9B,MAAM,OAAO,YAAY,CAC1B;AAIH,UAAO,WAAW,MAAM,QAAQ,MAAM,MAAM;;;CAGjD,CAAC"}
1
+ {"version":3,"file":"FlexRender.cjs","names":[],"sources":["../src/FlexRender.ts"],"sourcesContent":["import { defineComponent, h, isVNode } from 'vue'\nimport type { PropType } from 'vue'\nimport type {\n Cell,\n CellData,\n Header,\n RowData,\n TableFeatures,\n} from '@tanstack/table-core'\n\n/**\n * If rendering headers, cells, or footers with custom markup, use flexRender instead of `cell.getValue()` or `cell.renderValue()`.\n * @example flexRender(cell.column.columnDef.cell, cell.getContext())\n */\nexport function flexRender(render: any, props: any): any {\n if (typeof render === 'function') {\n const rendered = render(props)\n\n if (isVNode(rendered)) {\n return rendered\n }\n\n if (typeof rendered === 'function' || typeof rendered === 'object') {\n return h(rendered, props)\n }\n\n return rendered\n }\n\n if (typeof render === 'object') {\n return h(render, props)\n }\n\n return render\n}\n\n/**\n * Simplified component for rendering headers, cells, or footers.\n *\n * Supports both the new shorthand pattern and the legacy `:render`/`:props` pattern:\n * @example\n * ```vue\n * <!-- New shorthand pattern -->\n * <FlexRender :cell=\"cell\" />\n * <FlexRender :header=\"header\" />\n * <FlexRender :footer=\"header\" />\n *\n * <!-- Legacy pattern (still supported) -->\n * <FlexRender :render=\"cell.column.columnDef.cell\" :props=\"cell.getContext()\" />\n * ```\n */\nexport const FlexRender = defineComponent({\n props: {\n render: {\n type: [Function, Object, String] as PropType<any>,\n default: undefined,\n },\n props: {\n type: Object as PropType<any>,\n default: undefined,\n },\n cell: {\n type: Object as PropType<Cell<any, any, any>>,\n default: undefined,\n },\n header: {\n type: Object as PropType<Header<any, any, any>>,\n default: undefined,\n },\n footer: {\n type: Object as PropType<Header<any, any, any>>,\n default: undefined,\n },\n },\n setup: (props: {\n render?: any\n props?: any\n cell?: Cell<any, any, any>\n header?: Header<any, any, any>\n footer?: Header<any, any, any>\n }) => {\n return () => {\n // New shorthand pattern: extract render and props from cell/header/footer\n if (props.cell) {\n const cell = props.cell\n const def = cell.column.columnDef\n // When the column-grouping feature is registered, a cell can be in\n // one of three special modes that should not render `columnDef.cell`\n // directly:\n // - aggregated: render `columnDef.aggregatedCell` (falling back to\n // `columnDef.cell` if the column did not define one)\n // - placeholder: a duplicate value within a group — render nothing\n // - grouped: fall through to `columnDef.cell`; consumers that want\n // a custom group header typically branch on `cell.getIsGrouped()`\n // themselves first\n if (cell.getIsAggregated?.()) {\n return flexRender(def.aggregatedCell ?? def.cell, cell.getContext())\n }\n if (cell.getIsPlaceholder?.()) {\n return null\n }\n return flexRender(def.cell, cell.getContext())\n }\n\n if (props.header) {\n return flexRender(\n props.header.column.columnDef.header,\n props.header.getContext(),\n )\n }\n\n if (props.footer) {\n return flexRender(\n props.footer.column.columnDef.footer,\n props.footer.getContext(),\n )\n }\n\n // Legacy pattern: use render and props directly\n return flexRender(props.render, props.props)\n }\n },\n})\n"],"mappings":";;;;;;;AAcA,SAAgB,WAAW,QAAa,OAAiB;CACvD,IAAI,OAAO,WAAW,YAAY;EAChC,MAAM,WAAW,OAAO,MAAM;EAE9B,qBAAY,SAAS,EACnB,OAAO;EAGT,IAAI,OAAO,aAAa,cAAc,OAAO,aAAa,UACxD,kBAAS,UAAU,MAAM;EAG3B,OAAO;;CAGT,IAAI,OAAO,WAAW,UACpB,kBAAS,QAAQ,MAAM;CAGzB,OAAO;;;;;;;;;;;;;;;;;AAkBT,MAAa,sCAA6B;CACxC,OAAO;EACL,QAAQ;GACN,MAAM;IAAC;IAAU;IAAQ;IAAO;GAChC,SAAS;GACV;EACD,OAAO;GACL,MAAM;GACN,SAAS;GACV;EACD,MAAM;GACJ,MAAM;GACN,SAAS;GACV;EACD,QAAQ;GACN,MAAM;GACN,SAAS;GACV;EACD,QAAQ;GACN,MAAM;GACN,SAAS;GACV;EACF;CACD,QAAQ,UAMF;EACJ,aAAa;GAEX,IAAI,MAAM,MAAM;;IACd,MAAM,OAAO,MAAM;IACnB,MAAM,MAAM,KAAK,OAAO;IAUxB,6BAAI,KAAK,yGAAmB,EAC1B,OAAO,WAAW,IAAI,kBAAkB,IAAI,MAAM,KAAK,YAAY,CAAC;IAEtE,6BAAI,KAAK,0GAAoB,EAC3B,OAAO;IAET,OAAO,WAAW,IAAI,MAAM,KAAK,YAAY,CAAC;;GAGhD,IAAI,MAAM,QACR,OAAO,WACL,MAAM,OAAO,OAAO,UAAU,QAC9B,MAAM,OAAO,YAAY,CAC1B;GAGH,IAAI,MAAM,QACR,OAAO,WACL,MAAM,OAAO,OAAO,UAAU,QAC9B,MAAM,OAAO,YAAY,CAC1B;GAIH,OAAO,WAAW,MAAM,QAAQ,MAAM,MAAM;;;CAGjD,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"FlexRender.js","names":[],"sources":["../src/FlexRender.ts"],"sourcesContent":["import { defineComponent, h, isVNode } from 'vue'\nimport type { PropType } from 'vue'\nimport type {\n Cell,\n CellData,\n Header,\n RowData,\n TableFeatures,\n} from '@tanstack/table-core'\n\n/**\n * If rendering headers, cells, or footers with custom markup, use flexRender instead of `cell.getValue()` or `cell.renderValue()`.\n * @example flexRender(cell.column.columnDef.cell, cell.getContext())\n */\nexport function flexRender(render: any, props: any): any {\n if (typeof render === 'function') {\n const rendered = render(props)\n\n if (isVNode(rendered)) {\n return rendered\n }\n\n if (typeof rendered === 'function' || typeof rendered === 'object') {\n return h(rendered, props)\n }\n\n return rendered\n }\n\n if (typeof render === 'object') {\n return h(render, props)\n }\n\n return render\n}\n\n/**\n * Simplified component for rendering headers, cells, or footers.\n *\n * Supports both the new shorthand pattern and the legacy `:render`/`:props` pattern:\n * @example\n * ```vue\n * <!-- New shorthand pattern -->\n * <FlexRender :cell=\"cell\" />\n * <FlexRender :header=\"header\" />\n * <FlexRender :footer=\"header\" />\n *\n * <!-- Legacy pattern (still supported) -->\n * <FlexRender :render=\"cell.column.columnDef.cell\" :props=\"cell.getContext()\" />\n * ```\n */\nexport const FlexRender = defineComponent({\n props: {\n render: {\n type: [Function, Object, String] as PropType<any>,\n default: undefined,\n },\n props: {\n type: Object as PropType<any>,\n default: undefined,\n },\n cell: {\n type: Object as PropType<Cell<any, any, any>>,\n default: undefined,\n },\n header: {\n type: Object as PropType<Header<any, any, any>>,\n default: undefined,\n },\n footer: {\n type: Object as PropType<Header<any, any, any>>,\n default: undefined,\n },\n },\n setup: (props: {\n render?: any\n props?: any\n cell?: Cell<any, any, any>\n header?: Header<any, any, any>\n footer?: Header<any, any, any>\n }) => {\n return () => {\n // New shorthand pattern: extract render and props from cell/header/footer\n if (props.cell) {\n const cell = props.cell\n const def = cell.column.columnDef\n // When the column-grouping feature is registered, a cell can be in\n // one of three special modes that should not render `columnDef.cell`\n // directly:\n // - aggregated: render `columnDef.aggregatedCell` (falling back to\n // `columnDef.cell` if the column did not define one)\n // - placeholder: a duplicate value within a group — render nothing\n // - grouped: fall through to `columnDef.cell`; consumers that want\n // a custom group header typically branch on `cell.getIsGrouped()`\n // themselves first\n if (cell.getIsAggregated?.()) {\n return flexRender(def.aggregatedCell ?? def.cell, cell.getContext())\n }\n if (cell.getIsPlaceholder?.()) {\n return null\n }\n return flexRender(def.cell, cell.getContext())\n }\n\n if (props.header) {\n return flexRender(\n props.header.column.columnDef.header,\n props.header.getContext(),\n )\n }\n\n if (props.footer) {\n return flexRender(\n props.footer.column.columnDef.footer,\n props.footer.getContext(),\n )\n }\n\n // Legacy pattern: use render and props directly\n return flexRender(props.render, props.props)\n }\n },\n})\n"],"mappings":";;;;;;;AAcA,SAAgB,WAAW,QAAa,OAAiB;AACvD,KAAI,OAAO,WAAW,YAAY;EAChC,MAAM,WAAW,OAAO,MAAM;AAE9B,MAAI,QAAQ,SAAS,CACnB,QAAO;AAGT,MAAI,OAAO,aAAa,cAAc,OAAO,aAAa,SACxD,QAAO,EAAE,UAAU,MAAM;AAG3B,SAAO;;AAGT,KAAI,OAAO,WAAW,SACpB,QAAO,EAAE,QAAQ,MAAM;AAGzB,QAAO;;;;;;;;;;;;;;;;;AAkBT,MAAa,aAAa,gBAAgB;CACxC,OAAO;EACL,QAAQ;GACN,MAAM;IAAC;IAAU;IAAQ;IAAO;GAChC,SAAS;GACV;EACD,OAAO;GACL,MAAM;GACN,SAAS;GACV;EACD,MAAM;GACJ,MAAM;GACN,SAAS;GACV;EACD,QAAQ;GACN,MAAM;GACN,SAAS;GACV;EACD,QAAQ;GACN,MAAM;GACN,SAAS;GACV;EACF;CACD,QAAQ,UAMF;AACJ,eAAa;AAEX,OAAI,MAAM,MAAM;;IACd,MAAM,OAAO,MAAM;IACnB,MAAM,MAAM,KAAK,OAAO;AAUxB,iCAAI,KAAK,yGAAmB,CAC1B,QAAO,WAAW,IAAI,kBAAkB,IAAI,MAAM,KAAK,YAAY,CAAC;AAEtE,iCAAI,KAAK,0GAAoB,CAC3B,QAAO;AAET,WAAO,WAAW,IAAI,MAAM,KAAK,YAAY,CAAC;;AAGhD,OAAI,MAAM,OACR,QAAO,WACL,MAAM,OAAO,OAAO,UAAU,QAC9B,MAAM,OAAO,YAAY,CAC1B;AAGH,OAAI,MAAM,OACR,QAAO,WACL,MAAM,OAAO,OAAO,UAAU,QAC9B,MAAM,OAAO,YAAY,CAC1B;AAIH,UAAO,WAAW,MAAM,QAAQ,MAAM,MAAM;;;CAGjD,CAAC"}
1
+ {"version":3,"file":"FlexRender.js","names":[],"sources":["../src/FlexRender.ts"],"sourcesContent":["import { defineComponent, h, isVNode } from 'vue'\nimport type { PropType } from 'vue'\nimport type {\n Cell,\n CellData,\n Header,\n RowData,\n TableFeatures,\n} from '@tanstack/table-core'\n\n/**\n * If rendering headers, cells, or footers with custom markup, use flexRender instead of `cell.getValue()` or `cell.renderValue()`.\n * @example flexRender(cell.column.columnDef.cell, cell.getContext())\n */\nexport function flexRender(render: any, props: any): any {\n if (typeof render === 'function') {\n const rendered = render(props)\n\n if (isVNode(rendered)) {\n return rendered\n }\n\n if (typeof rendered === 'function' || typeof rendered === 'object') {\n return h(rendered, props)\n }\n\n return rendered\n }\n\n if (typeof render === 'object') {\n return h(render, props)\n }\n\n return render\n}\n\n/**\n * Simplified component for rendering headers, cells, or footers.\n *\n * Supports both the new shorthand pattern and the legacy `:render`/`:props` pattern:\n * @example\n * ```vue\n * <!-- New shorthand pattern -->\n * <FlexRender :cell=\"cell\" />\n * <FlexRender :header=\"header\" />\n * <FlexRender :footer=\"header\" />\n *\n * <!-- Legacy pattern (still supported) -->\n * <FlexRender :render=\"cell.column.columnDef.cell\" :props=\"cell.getContext()\" />\n * ```\n */\nexport const FlexRender = defineComponent({\n props: {\n render: {\n type: [Function, Object, String] as PropType<any>,\n default: undefined,\n },\n props: {\n type: Object as PropType<any>,\n default: undefined,\n },\n cell: {\n type: Object as PropType<Cell<any, any, any>>,\n default: undefined,\n },\n header: {\n type: Object as PropType<Header<any, any, any>>,\n default: undefined,\n },\n footer: {\n type: Object as PropType<Header<any, any, any>>,\n default: undefined,\n },\n },\n setup: (props: {\n render?: any\n props?: any\n cell?: Cell<any, any, any>\n header?: Header<any, any, any>\n footer?: Header<any, any, any>\n }) => {\n return () => {\n // New shorthand pattern: extract render and props from cell/header/footer\n if (props.cell) {\n const cell = props.cell\n const def = cell.column.columnDef\n // When the column-grouping feature is registered, a cell can be in\n // one of three special modes that should not render `columnDef.cell`\n // directly:\n // - aggregated: render `columnDef.aggregatedCell` (falling back to\n // `columnDef.cell` if the column did not define one)\n // - placeholder: a duplicate value within a group — render nothing\n // - grouped: fall through to `columnDef.cell`; consumers that want\n // a custom group header typically branch on `cell.getIsGrouped()`\n // themselves first\n if (cell.getIsAggregated?.()) {\n return flexRender(def.aggregatedCell ?? def.cell, cell.getContext())\n }\n if (cell.getIsPlaceholder?.()) {\n return null\n }\n return flexRender(def.cell, cell.getContext())\n }\n\n if (props.header) {\n return flexRender(\n props.header.column.columnDef.header,\n props.header.getContext(),\n )\n }\n\n if (props.footer) {\n return flexRender(\n props.footer.column.columnDef.footer,\n props.footer.getContext(),\n )\n }\n\n // Legacy pattern: use render and props directly\n return flexRender(props.render, props.props)\n }\n },\n})\n"],"mappings":";;;;;;;AAcA,SAAgB,WAAW,QAAa,OAAiB;CACvD,IAAI,OAAO,WAAW,YAAY;EAChC,MAAM,WAAW,OAAO,MAAM;EAE9B,IAAI,QAAQ,SAAS,EACnB,OAAO;EAGT,IAAI,OAAO,aAAa,cAAc,OAAO,aAAa,UACxD,OAAO,EAAE,UAAU,MAAM;EAG3B,OAAO;;CAGT,IAAI,OAAO,WAAW,UACpB,OAAO,EAAE,QAAQ,MAAM;CAGzB,OAAO;;;;;;;;;;;;;;;;;AAkBT,MAAa,aAAa,gBAAgB;CACxC,OAAO;EACL,QAAQ;GACN,MAAM;IAAC;IAAU;IAAQ;IAAO;GAChC,SAAS;GACV;EACD,OAAO;GACL,MAAM;GACN,SAAS;GACV;EACD,MAAM;GACJ,MAAM;GACN,SAAS;GACV;EACD,QAAQ;GACN,MAAM;GACN,SAAS;GACV;EACD,QAAQ;GACN,MAAM;GACN,SAAS;GACV;EACF;CACD,QAAQ,UAMF;EACJ,aAAa;GAEX,IAAI,MAAM,MAAM;;IACd,MAAM,OAAO,MAAM;IACnB,MAAM,MAAM,KAAK,OAAO;IAUxB,6BAAI,KAAK,yGAAmB,EAC1B,OAAO,WAAW,IAAI,kBAAkB,IAAI,MAAM,KAAK,YAAY,CAAC;IAEtE,6BAAI,KAAK,0GAAoB,EAC3B,OAAO;IAET,OAAO,WAAW,IAAI,MAAM,KAAK,YAAY,CAAC;;GAGhD,IAAI,MAAM,QACR,OAAO,WACL,MAAM,OAAO,OAAO,UAAU,QAC9B,MAAM,OAAO,YAAY,CAC1B;GAGH,IAAI,MAAM,QACR,OAAO,WACL,MAAM,OAAO,OAAO,UAAU,QAC9B,MAAM,OAAO,YAAY,CAC1B;GAIH,OAAO,WAAW,MAAM,QAAQ,MAAM,MAAM;;;CAGjD,CAAC"}
@@ -40,6 +40,24 @@ const AppFlexRender = (0, vue.defineComponent)({
40
40
  };
41
41
  }
42
42
  });
43
+ /**
44
+ * Creates app-scoped Vue table helpers with features, row models, and
45
+ * renderable component maps pre-bound.
46
+ *
47
+ * Use this when an app or design system wants typed `useAppTable`, a pre-bound
48
+ * column helper, and context helpers for table, cell, and header components.
49
+ *
50
+ * @example
51
+ * ```ts
52
+ * const { useAppTable, createAppColumnHelper } = createTableHook({
53
+ * _features,
54
+ * _rowModels: {},
55
+ * tableComponents: {},
56
+ * cellComponents: {},
57
+ * headerComponents: {},
58
+ * })
59
+ * ```
60
+ */
43
61
  function createTableHook({ tableComponents, cellComponents, headerComponents, ...defaultTableOptions }) {
44
62
  const TableContext = Symbol("TableContext");
45
63
  const CellContext = Symbol("CellContext");
@@ -1 +1 @@
1
- {"version":3,"file":"createTableHook.cjs","names":["FlexRender","useTable","mergeProxy"],"sources":["../src/createTableHook.ts"],"sourcesContent":["import { createColumnHelper as coreCreateColumnHelper } from '@tanstack/table-core'\nimport { useSelector } from '@tanstack/vue-store'\nimport { defineComponent, h, inject, provide } from 'vue'\nimport { FlexRender } from './FlexRender'\nimport { mergeProxy } from './merge-proxy'\nimport { useTable } from './useTable'\nimport type { TableOptionsWithReactiveData, VueTable } from './useTable'\nimport type { Component, InjectionKey, PropType, VNodeChild } from 'vue'\nimport type {\n AccessorFn,\n AccessorFnColumnDef,\n AccessorKeyColumnDef,\n Cell,\n CellContext,\n CellData,\n Column,\n ColumnDef,\n DeepKeys,\n DeepValue,\n DisplayColumnDef,\n GroupColumnDef,\n Header,\n IdentifiedColumnDef,\n NoInfer,\n Row,\n RowData,\n Table,\n TableFeatures,\n TableState,\n} from '@tanstack/table-core'\n\nexport type ComponentType<T extends Record<string, any>> = Component<T>\n\nexport type AppCellContext<\n TFeatures extends TableFeatures,\n TData extends RowData,\n TValue extends CellData,\n TCellComponents extends Record<string, ComponentType<any>>,\n> = {\n cell: Cell<TFeatures, TData, TValue> &\n TCellComponents & { FlexRender: Component }\n column: Column<TFeatures, TData, TValue>\n getValue: CellContext<TFeatures, TData, TValue>['getValue']\n renderValue: CellContext<TFeatures, TData, TValue>['renderValue']\n row: Row<TFeatures, TData>\n table: Table<TFeatures, TData>\n}\n\nexport type AppHeaderContext<\n TFeatures extends TableFeatures,\n TData extends RowData,\n TValue extends CellData,\n THeaderComponents extends Record<string, ComponentType<any>>,\n> = {\n column: Column<TFeatures, TData, TValue>\n header: Header<TFeatures, TData, TValue> &\n THeaderComponents & { FlexRender: Component }\n table: Table<TFeatures, TData>\n}\n\nexport type AppColumnDefTemplate<TProps extends object> =\n | string\n | ((props: TProps) => any)\n\nexport type AppColumnDefBase<\n TFeatures extends TableFeatures,\n TData extends RowData,\n TValue extends CellData,\n TCellComponents extends Record<string, ComponentType<any>>,\n THeaderComponents extends Record<string, ComponentType<any>>,\n> = Omit<\n IdentifiedColumnDef<TFeatures, TData, TValue>,\n 'cell' | 'header' | 'footer'\n> & {\n cell?: AppColumnDefTemplate<\n AppCellContext<TFeatures, TData, TValue, TCellComponents>\n >\n header?: AppColumnDefTemplate<\n AppHeaderContext<TFeatures, TData, TValue, THeaderComponents>\n >\n footer?: AppColumnDefTemplate<\n AppHeaderContext<TFeatures, TData, TValue, THeaderComponents>\n >\n}\n\nexport type AppDisplayColumnDef<\n TFeatures extends TableFeatures,\n TData extends RowData,\n TCellComponents extends Record<string, ComponentType<any>>,\n THeaderComponents extends Record<string, ComponentType<any>>,\n> = Omit<\n DisplayColumnDef<TFeatures, TData, unknown>,\n 'cell' | 'header' | 'footer'\n> & {\n cell?: AppColumnDefTemplate<\n AppCellContext<TFeatures, TData, unknown, TCellComponents>\n >\n header?: AppColumnDefTemplate<\n AppHeaderContext<TFeatures, TData, unknown, THeaderComponents>\n >\n footer?: AppColumnDefTemplate<\n AppHeaderContext<TFeatures, TData, unknown, THeaderComponents>\n >\n}\n\nexport type AppGroupColumnDef<\n TFeatures extends TableFeatures,\n TData extends RowData,\n TCellComponents extends Record<string, ComponentType<any>>,\n THeaderComponents extends Record<string, ComponentType<any>>,\n> = Omit<\n GroupColumnDef<TFeatures, TData, unknown>,\n 'cell' | 'header' | 'footer' | 'columns'\n> & {\n cell?: AppColumnDefTemplate<\n AppCellContext<TFeatures, TData, unknown, TCellComponents>\n >\n header?: AppColumnDefTemplate<\n AppHeaderContext<TFeatures, TData, unknown, THeaderComponents>\n >\n footer?: AppColumnDefTemplate<\n AppHeaderContext<TFeatures, TData, unknown, THeaderComponents>\n >\n columns?: Array<ColumnDef<TFeatures, TData, unknown>>\n}\n\nexport type AppColumnHelper<\n TFeatures extends TableFeatures,\n TData extends RowData,\n TCellComponents extends Record<string, ComponentType<any>>,\n THeaderComponents extends Record<string, ComponentType<any>>,\n> = {\n accessor: <\n TAccessor extends AccessorFn<TData> | DeepKeys<TData>,\n TValue extends TAccessor extends AccessorFn<TData, infer TReturn>\n ? TReturn\n : TAccessor extends DeepKeys<TData>\n ? DeepValue<TData, TAccessor>\n : never,\n >(\n accessor: TAccessor,\n column: TAccessor extends AccessorFn<TData>\n ? AppColumnDefBase<\n TFeatures,\n TData,\n TValue,\n TCellComponents,\n THeaderComponents\n > & { id: string }\n : AppColumnDefBase<\n TFeatures,\n TData,\n TValue,\n TCellComponents,\n THeaderComponents\n >,\n ) => TAccessor extends AccessorFn<TData>\n ? AccessorFnColumnDef<TFeatures, TData, TValue>\n : AccessorKeyColumnDef<TFeatures, TData, TValue>\n columns: <TColumns extends ReadonlyArray<ColumnDef<TFeatures, TData, any>>>(\n columns: [...TColumns],\n ) => Array<ColumnDef<TFeatures, TData, any>> & [...TColumns]\n display: (\n column: AppDisplayColumnDef<\n TFeatures,\n TData,\n TCellComponents,\n THeaderComponents\n >,\n ) => DisplayColumnDef<TFeatures, TData, unknown>\n group: (\n column: AppGroupColumnDef<\n TFeatures,\n TData,\n TCellComponents,\n THeaderComponents\n >,\n ) => GroupColumnDef<TFeatures, TData, unknown>\n}\n\nexport type CreateTableHookOptions<\n TFeatures extends TableFeatures,\n TTableComponents extends Record<string, ComponentType<any>>,\n TCellComponents extends Record<string, ComponentType<any>>,\n THeaderComponents extends Record<string, ComponentType<any>>,\n> = Omit<\n TableOptionsWithReactiveData<TFeatures, any>,\n 'columns' | 'data' | 'store' | 'state' | 'initialState'\n> & {\n tableComponents?: TTableComponents\n cellComponents?: TCellComponents\n headerComponents?: THeaderComponents\n}\n\nexport interface AppTableProps<\n TFeatures extends TableFeatures,\n TSelected = unknown,\n> {\n selector?: (state: TableState<TFeatures>) => TSelected\n}\n\nexport interface AppCellProps<\n TFeatures extends TableFeatures,\n TData extends RowData,\n TValue extends CellData = CellData,\n TSelected = unknown,\n> {\n cell: Cell<TFeatures, TData, TValue>\n selector?: (state: TableState<TFeatures>) => TSelected\n}\n\nexport interface AppHeaderProps<\n TFeatures extends TableFeatures,\n TData extends RowData,\n TValue extends CellData = CellData,\n TSelected = unknown,\n> {\n header: Header<TFeatures, TData, TValue>\n selector?: (state: TableState<TFeatures>) => TSelected\n}\n\nexport type AppVueTable<\n TFeatures extends TableFeatures,\n TData extends RowData,\n TSelected,\n TTableComponents extends Record<string, ComponentType<any>>,\n TCellComponents extends Record<string, ComponentType<any>>,\n THeaderComponents extends Record<string, ComponentType<any>>,\n> = VueTable<TFeatures, TData, TSelected> &\n NoInfer<TTableComponents> & {\n AppTable: Component<AppTableProps<TFeatures>>\n AppCell: Component<AppCellProps<TFeatures, TData>>\n AppHeader: Component<AppHeaderProps<TFeatures, TData>>\n AppFooter: Component<AppHeaderProps<TFeatures, TData>>\n FlexRender: typeof AppFlexRender\n }\n\nexport const AppFlexRender = defineComponent({\n name: 'TableFlexRender',\n props: {\n cell: {\n type: Object as PropType<Cell<any, any, any>>,\n default: undefined,\n },\n header: {\n type: Object as PropType<Header<any, any, any>>,\n default: undefined,\n },\n footer: {\n type: Object as PropType<Header<any, any, any>>,\n default: undefined,\n },\n },\n setup(props) {\n return () => {\n if (props.cell) {\n return h(FlexRender, {\n render: props.cell.column.columnDef.cell,\n props: props.cell.getContext(),\n })\n }\n\n if (props.header) {\n return h(FlexRender, {\n render: props.header.column.columnDef.header,\n props: props.header.getContext(),\n })\n }\n\n if (props.footer) {\n return h(FlexRender, {\n render: props.footer.column.columnDef.footer,\n props: props.footer.getContext(),\n })\n }\n\n return null\n }\n },\n})\n\nexport function createTableHook<\n TFeatures extends TableFeatures,\n const TTableComponents extends Record<string, ComponentType<any>>,\n const TCellComponents extends Record<string, ComponentType<any>>,\n const THeaderComponents extends Record<string, ComponentType<any>>,\n>({\n tableComponents,\n cellComponents,\n headerComponents,\n ...defaultTableOptions\n}: CreateTableHookOptions<\n TFeatures,\n TTableComponents,\n TCellComponents,\n THeaderComponents\n>) {\n const TableContext = Symbol('TableContext') as InjectionKey<\n VueTable<TFeatures, any, any>\n >\n const CellContext = Symbol('CellContext') as InjectionKey<\n Cell<TFeatures, any, any>\n >\n const HeaderContext = Symbol('HeaderContext') as InjectionKey<\n Header<TFeatures, any, any>\n >\n\n function createAppColumnHelper<TData extends RowData>(): AppColumnHelper<\n TFeatures,\n TData,\n TCellComponents,\n THeaderComponents\n > {\n return coreCreateColumnHelper<TFeatures, TData>() as AppColumnHelper<\n TFeatures,\n TData,\n TCellComponents,\n THeaderComponents\n >\n }\n\n function useTableContext<TData extends RowData = RowData>(): VueTable<\n TFeatures,\n TData\n > {\n const table = inject(TableContext)\n\n if (!table) {\n throw new Error(\n '`useTableContext` must be used within an `AppTable` component. ' +\n 'Make sure your component is wrapped with `<table.AppTable>...</table.AppTable>`.',\n )\n }\n\n return table as VueTable<TFeatures, TData>\n }\n\n function useCellContext<TValue extends CellData = CellData>(): Cell<\n TFeatures,\n any,\n TValue\n > {\n const cell = inject(CellContext)\n\n if (!cell) {\n throw new Error(\n '`useCellContext` must be used within an `AppCell` component. ' +\n 'Make sure your component is wrapped with `<table.AppCell :cell=\"cell\">...</table.AppCell>`.',\n )\n }\n\n return cell as Cell<TFeatures, any, TValue>\n }\n\n function useHeaderContext<TValue extends CellData = CellData>(): Header<\n TFeatures,\n any,\n TValue\n > {\n const header = inject(HeaderContext)\n\n if (!header) {\n throw new Error(\n '`useHeaderContext` must be used within an `AppHeader` or `AppFooter` component.',\n )\n }\n\n return header as Header<TFeatures, any, TValue>\n }\n\n const CellFlexRender = defineComponent({\n name: 'AppCellFlexRender',\n setup() {\n const cell = useCellContext()\n return () => h(AppFlexRender, { cell })\n },\n })\n\n const HeaderFlexRender = defineComponent({\n name: 'AppHeaderFlexRender',\n setup() {\n const header = useHeaderContext()\n return () => h(AppFlexRender, { header })\n },\n })\n\n const FooterFlexRender = defineComponent({\n name: 'AppFooterFlexRender',\n setup() {\n const header = useHeaderContext()\n return () => h(AppFlexRender, { footer: header })\n },\n })\n\n function useAppTable<\n TData extends RowData,\n TSelected = TableState<TFeatures>,\n >(\n tableOptions: Omit<\n TableOptionsWithReactiveData<TFeatures, TData>,\n '_features' | '_rowModels'\n >,\n selector?: (state: TableState<TFeatures>) => TSelected,\n ): AppVueTable<\n TFeatures,\n TData,\n TSelected,\n TTableComponents,\n TCellComponents,\n THeaderComponents\n > {\n const mergedOptions = mergeProxy(\n defaultTableOptions,\n tableOptions,\n ) as TableOptionsWithReactiveData<TFeatures, TData>\n\n const table = useTable<TFeatures, TData, TSelected>(mergedOptions, selector)\n\n const AppTable = defineComponent({\n name: 'AppTable',\n props: {\n selector: {\n type: Function as PropType<(state: TableState<TFeatures>) => unknown>,\n default: undefined,\n },\n },\n setup(props, { slots }) {\n provide(TableContext, table)\n const selected = props.selector\n ? useSelector(table.store, props.selector)\n : undefined\n\n return () => {\n if (!props.selector) {\n return slots.default?.()\n }\n\n return slots.default?.({ state: selected?.value })\n }\n },\n })\n\n const AppCell = defineComponent({\n name: 'AppCell',\n props: {\n cell: {\n type: Object as PropType<object>,\n required: true,\n },\n selector: {\n type: Function as PropType<(state: TableState<TFeatures>) => unknown>,\n default: undefined,\n },\n },\n setup(props, { slots }) {\n const cell = props.cell as Cell<TFeatures, TData, any>\n\n provide(CellContext, cell)\n\n const selected = props.selector\n ? useSelector(table.store, props.selector)\n : undefined\n\n const extendedCell = Object.assign(cell, {\n FlexRender: CellFlexRender,\n ...(cellComponents ?? {}),\n }) as Cell<TFeatures, TData, any> &\n TCellComponents & { FlexRender: Component }\n\n return () => {\n return slots.default?.(\n props.selector\n ? { cell: extendedCell, state: selected?.value }\n : { cell: extendedCell },\n )\n }\n },\n })\n\n const AppHeader = defineComponent({\n name: 'AppHeader',\n props: {\n header: {\n type: Object as PropType<object>,\n required: true,\n },\n selector: {\n type: Function as PropType<(state: TableState<TFeatures>) => unknown>,\n default: undefined,\n },\n },\n setup(props, { slots }) {\n const header = props.header as Header<TFeatures, TData, any>\n\n provide(HeaderContext, header)\n\n const selected = props.selector\n ? useSelector(table.store, props.selector)\n : undefined\n\n const extendedHeader = Object.assign(header, {\n FlexRender: HeaderFlexRender,\n ...(headerComponents ?? {}),\n }) as Header<TFeatures, TData, any> &\n THeaderComponents & { FlexRender: Component }\n\n return () => {\n return slots.default?.(\n props.selector\n ? { header: extendedHeader, state: selected?.value }\n : { header: extendedHeader },\n )\n }\n },\n })\n\n const AppFooter = defineComponent({\n name: 'AppFooter',\n props: {\n header: {\n type: Object as PropType<object>,\n required: true,\n },\n selector: {\n type: Function as PropType<(state: TableState<TFeatures>) => unknown>,\n default: undefined,\n },\n },\n setup(props, { slots }) {\n const header = props.header as Header<TFeatures, TData, any>\n\n provide(HeaderContext, header)\n\n const selected = props.selector\n ? useSelector(table.store, props.selector)\n : undefined\n\n const extendedHeader = Object.assign(header, {\n FlexRender: FooterFlexRender,\n ...(headerComponents ?? {}),\n }) as Header<TFeatures, TData, any> &\n THeaderComponents & { FlexRender: Component }\n\n return () => {\n return slots.default?.(\n props.selector\n ? { header: extendedHeader, state: selected?.value }\n : { header: extendedHeader },\n )\n }\n },\n })\n\n return Object.assign(table, {\n AppTable,\n AppCell,\n AppHeader,\n AppFooter,\n FlexRender: AppFlexRender,\n ...(tableComponents ?? {}),\n }) as AppVueTable<\n TFeatures,\n TData,\n TSelected,\n TTableComponents,\n TCellComponents,\n THeaderComponents\n >\n }\n\n return {\n appFeatures: defaultTableOptions._features as TFeatures,\n createAppColumnHelper,\n useAppTable,\n useTableContext,\n useCellContext,\n useHeaderContext,\n }\n}\n"],"mappings":"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"}
1
+ {"version":3,"file":"createTableHook.cjs","names":["FlexRender","useTable","mergeProxy"],"sources":["../src/createTableHook.ts"],"sourcesContent":["import { createColumnHelper as coreCreateColumnHelper } from '@tanstack/table-core'\nimport { useSelector } from '@tanstack/vue-store'\nimport { defineComponent, h, inject, provide } from 'vue'\nimport { FlexRender } from './FlexRender'\nimport { mergeProxy } from './merge-proxy'\nimport { useTable } from './useTable'\nimport type { TableOptionsWithReactiveData, VueTable } from './useTable'\nimport type { Component, InjectionKey, PropType, VNodeChild } from 'vue'\nimport type {\n AccessorFn,\n AccessorFnColumnDef,\n AccessorKeyColumnDef,\n Cell,\n CellContext,\n CellData,\n Column,\n ColumnDef,\n DeepKeys,\n DeepValue,\n DisplayColumnDef,\n GroupColumnDef,\n Header,\n IdentifiedColumnDef,\n NoInfer,\n Row,\n RowData,\n Table,\n TableFeatures,\n TableState,\n} from '@tanstack/table-core'\n\nexport type ComponentType<T extends Record<string, any>> = Component<T>\n\nexport type AppCellContext<\n TFeatures extends TableFeatures,\n TData extends RowData,\n TValue extends CellData,\n TCellComponents extends Record<string, ComponentType<any>>,\n> = {\n cell: Cell<TFeatures, TData, TValue> &\n TCellComponents & { FlexRender: Component }\n column: Column<TFeatures, TData, TValue>\n getValue: CellContext<TFeatures, TData, TValue>['getValue']\n renderValue: CellContext<TFeatures, TData, TValue>['renderValue']\n row: Row<TFeatures, TData>\n table: Table<TFeatures, TData>\n}\n\nexport type AppHeaderContext<\n TFeatures extends TableFeatures,\n TData extends RowData,\n TValue extends CellData,\n THeaderComponents extends Record<string, ComponentType<any>>,\n> = {\n column: Column<TFeatures, TData, TValue>\n header: Header<TFeatures, TData, TValue> &\n THeaderComponents & { FlexRender: Component }\n table: Table<TFeatures, TData>\n}\n\nexport type AppColumnDefTemplate<TProps extends object> =\n | string\n | ((props: TProps) => any)\n\nexport type AppColumnDefBase<\n TFeatures extends TableFeatures,\n TData extends RowData,\n TValue extends CellData,\n TCellComponents extends Record<string, ComponentType<any>>,\n THeaderComponents extends Record<string, ComponentType<any>>,\n> = Omit<\n IdentifiedColumnDef<TFeatures, TData, TValue>,\n 'cell' | 'header' | 'footer'\n> & {\n cell?: AppColumnDefTemplate<\n AppCellContext<TFeatures, TData, TValue, TCellComponents>\n >\n header?: AppColumnDefTemplate<\n AppHeaderContext<TFeatures, TData, TValue, THeaderComponents>\n >\n footer?: AppColumnDefTemplate<\n AppHeaderContext<TFeatures, TData, TValue, THeaderComponents>\n >\n}\n\nexport type AppDisplayColumnDef<\n TFeatures extends TableFeatures,\n TData extends RowData,\n TCellComponents extends Record<string, ComponentType<any>>,\n THeaderComponents extends Record<string, ComponentType<any>>,\n> = Omit<\n DisplayColumnDef<TFeatures, TData, unknown>,\n 'cell' | 'header' | 'footer'\n> & {\n cell?: AppColumnDefTemplate<\n AppCellContext<TFeatures, TData, unknown, TCellComponents>\n >\n header?: AppColumnDefTemplate<\n AppHeaderContext<TFeatures, TData, unknown, THeaderComponents>\n >\n footer?: AppColumnDefTemplate<\n AppHeaderContext<TFeatures, TData, unknown, THeaderComponents>\n >\n}\n\nexport type AppGroupColumnDef<\n TFeatures extends TableFeatures,\n TData extends RowData,\n TCellComponents extends Record<string, ComponentType<any>>,\n THeaderComponents extends Record<string, ComponentType<any>>,\n> = Omit<\n GroupColumnDef<TFeatures, TData, unknown>,\n 'cell' | 'header' | 'footer' | 'columns'\n> & {\n cell?: AppColumnDefTemplate<\n AppCellContext<TFeatures, TData, unknown, TCellComponents>\n >\n header?: AppColumnDefTemplate<\n AppHeaderContext<TFeatures, TData, unknown, THeaderComponents>\n >\n footer?: AppColumnDefTemplate<\n AppHeaderContext<TFeatures, TData, unknown, THeaderComponents>\n >\n columns?: Array<ColumnDef<TFeatures, TData, unknown>>\n}\n\nexport type AppColumnHelper<\n TFeatures extends TableFeatures,\n TData extends RowData,\n TCellComponents extends Record<string, ComponentType<any>>,\n THeaderComponents extends Record<string, ComponentType<any>>,\n> = {\n accessor: <\n TAccessor extends AccessorFn<TData> | DeepKeys<TData>,\n TValue extends TAccessor extends AccessorFn<TData, infer TReturn>\n ? TReturn\n : TAccessor extends DeepKeys<TData>\n ? DeepValue<TData, TAccessor>\n : never,\n >(\n accessor: TAccessor,\n column: TAccessor extends AccessorFn<TData>\n ? AppColumnDefBase<\n TFeatures,\n TData,\n TValue,\n TCellComponents,\n THeaderComponents\n > & { id: string }\n : AppColumnDefBase<\n TFeatures,\n TData,\n TValue,\n TCellComponents,\n THeaderComponents\n >,\n ) => TAccessor extends AccessorFn<TData>\n ? AccessorFnColumnDef<TFeatures, TData, TValue>\n : AccessorKeyColumnDef<TFeatures, TData, TValue>\n columns: <TColumns extends ReadonlyArray<ColumnDef<TFeatures, TData, any>>>(\n columns: [...TColumns],\n ) => Array<ColumnDef<TFeatures, TData, any>> & [...TColumns]\n display: (\n column: AppDisplayColumnDef<\n TFeatures,\n TData,\n TCellComponents,\n THeaderComponents\n >,\n ) => DisplayColumnDef<TFeatures, TData, unknown>\n group: (\n column: AppGroupColumnDef<\n TFeatures,\n TData,\n TCellComponents,\n THeaderComponents\n >,\n ) => GroupColumnDef<TFeatures, TData, unknown>\n}\n\nexport type CreateTableHookOptions<\n TFeatures extends TableFeatures,\n TTableComponents extends Record<string, ComponentType<any>>,\n TCellComponents extends Record<string, ComponentType<any>>,\n THeaderComponents extends Record<string, ComponentType<any>>,\n> = Omit<\n TableOptionsWithReactiveData<TFeatures, any>,\n 'columns' | 'data' | 'store' | 'state' | 'initialState'\n> & {\n tableComponents?: TTableComponents\n cellComponents?: TCellComponents\n headerComponents?: THeaderComponents\n}\n\nexport interface AppTableProps<\n TFeatures extends TableFeatures,\n TSelected = unknown,\n> {\n selector?: (state: TableState<TFeatures>) => TSelected\n}\n\nexport interface AppCellProps<\n TFeatures extends TableFeatures,\n TData extends RowData,\n TValue extends CellData = CellData,\n TSelected = unknown,\n> {\n cell: Cell<TFeatures, TData, TValue>\n selector?: (state: TableState<TFeatures>) => TSelected\n}\n\nexport interface AppHeaderProps<\n TFeatures extends TableFeatures,\n TData extends RowData,\n TValue extends CellData = CellData,\n TSelected = unknown,\n> {\n header: Header<TFeatures, TData, TValue>\n selector?: (state: TableState<TFeatures>) => TSelected\n}\n\nexport type AppVueTable<\n TFeatures extends TableFeatures,\n TData extends RowData,\n TSelected,\n TTableComponents extends Record<string, ComponentType<any>>,\n TCellComponents extends Record<string, ComponentType<any>>,\n THeaderComponents extends Record<string, ComponentType<any>>,\n> = VueTable<TFeatures, TData, TSelected> &\n NoInfer<TTableComponents> & {\n AppTable: Component<AppTableProps<TFeatures>>\n AppCell: Component<AppCellProps<TFeatures, TData>>\n AppHeader: Component<AppHeaderProps<TFeatures, TData>>\n AppFooter: Component<AppHeaderProps<TFeatures, TData>>\n FlexRender: typeof AppFlexRender\n }\n\nexport const AppFlexRender = defineComponent({\n name: 'TableFlexRender',\n props: {\n cell: {\n type: Object as PropType<Cell<any, any, any>>,\n default: undefined,\n },\n header: {\n type: Object as PropType<Header<any, any, any>>,\n default: undefined,\n },\n footer: {\n type: Object as PropType<Header<any, any, any>>,\n default: undefined,\n },\n },\n setup(props) {\n return () => {\n if (props.cell) {\n return h(FlexRender, {\n render: props.cell.column.columnDef.cell,\n props: props.cell.getContext(),\n })\n }\n\n if (props.header) {\n return h(FlexRender, {\n render: props.header.column.columnDef.header,\n props: props.header.getContext(),\n })\n }\n\n if (props.footer) {\n return h(FlexRender, {\n render: props.footer.column.columnDef.footer,\n props: props.footer.getContext(),\n })\n }\n\n return null\n }\n },\n})\n\n/**\n * Creates app-scoped Vue table helpers with features, row models, and\n * renderable component maps pre-bound.\n *\n * Use this when an app or design system wants typed `useAppTable`, a pre-bound\n * column helper, and context helpers for table, cell, and header components.\n *\n * @example\n * ```ts\n * const { useAppTable, createAppColumnHelper } = createTableHook({\n * _features,\n * _rowModels: {},\n * tableComponents: {},\n * cellComponents: {},\n * headerComponents: {},\n * })\n * ```\n */\nexport function createTableHook<\n TFeatures extends TableFeatures,\n const TTableComponents extends Record<string, ComponentType<any>>,\n const TCellComponents extends Record<string, ComponentType<any>>,\n const THeaderComponents extends Record<string, ComponentType<any>>,\n>({\n tableComponents,\n cellComponents,\n headerComponents,\n ...defaultTableOptions\n}: CreateTableHookOptions<\n TFeatures,\n TTableComponents,\n TCellComponents,\n THeaderComponents\n>) {\n const TableContext = Symbol('TableContext') as InjectionKey<\n VueTable<TFeatures, any, any>\n >\n const CellContext = Symbol('CellContext') as InjectionKey<\n Cell<TFeatures, any, any>\n >\n const HeaderContext = Symbol('HeaderContext') as InjectionKey<\n Header<TFeatures, any, any>\n >\n\n function createAppColumnHelper<TData extends RowData>(): AppColumnHelper<\n TFeatures,\n TData,\n TCellComponents,\n THeaderComponents\n > {\n return coreCreateColumnHelper<TFeatures, TData>() as AppColumnHelper<\n TFeatures,\n TData,\n TCellComponents,\n THeaderComponents\n >\n }\n\n function useTableContext<TData extends RowData = RowData>(): VueTable<\n TFeatures,\n TData\n > {\n const table = inject(TableContext)\n\n if (!table) {\n throw new Error(\n '`useTableContext` must be used within an `AppTable` component. ' +\n 'Make sure your component is wrapped with `<table.AppTable>...</table.AppTable>`.',\n )\n }\n\n return table as VueTable<TFeatures, TData>\n }\n\n function useCellContext<TValue extends CellData = CellData>(): Cell<\n TFeatures,\n any,\n TValue\n > {\n const cell = inject(CellContext)\n\n if (!cell) {\n throw new Error(\n '`useCellContext` must be used within an `AppCell` component. ' +\n 'Make sure your component is wrapped with `<table.AppCell :cell=\"cell\">...</table.AppCell>`.',\n )\n }\n\n return cell as Cell<TFeatures, any, TValue>\n }\n\n function useHeaderContext<TValue extends CellData = CellData>(): Header<\n TFeatures,\n any,\n TValue\n > {\n const header = inject(HeaderContext)\n\n if (!header) {\n throw new Error(\n '`useHeaderContext` must be used within an `AppHeader` or `AppFooter` component.',\n )\n }\n\n return header as Header<TFeatures, any, TValue>\n }\n\n const CellFlexRender = defineComponent({\n name: 'AppCellFlexRender',\n setup() {\n const cell = useCellContext()\n return () => h(AppFlexRender, { cell })\n },\n })\n\n const HeaderFlexRender = defineComponent({\n name: 'AppHeaderFlexRender',\n setup() {\n const header = useHeaderContext()\n return () => h(AppFlexRender, { header })\n },\n })\n\n const FooterFlexRender = defineComponent({\n name: 'AppFooterFlexRender',\n setup() {\n const header = useHeaderContext()\n return () => h(AppFlexRender, { footer: header })\n },\n })\n\n function useAppTable<\n TData extends RowData,\n TSelected = TableState<TFeatures>,\n >(\n tableOptions: Omit<\n TableOptionsWithReactiveData<TFeatures, TData>,\n '_features' | '_rowModels'\n >,\n selector?: (state: TableState<TFeatures>) => TSelected,\n ): AppVueTable<\n TFeatures,\n TData,\n TSelected,\n TTableComponents,\n TCellComponents,\n THeaderComponents\n > {\n const mergedOptions = mergeProxy(\n defaultTableOptions,\n tableOptions,\n ) as TableOptionsWithReactiveData<TFeatures, TData>\n\n const table = useTable<TFeatures, TData, TSelected>(mergedOptions, selector)\n\n const AppTable = defineComponent({\n name: 'AppTable',\n props: {\n selector: {\n type: Function as PropType<(state: TableState<TFeatures>) => unknown>,\n default: undefined,\n },\n },\n setup(props, { slots }) {\n provide(TableContext, table)\n const selected = props.selector\n ? useSelector(table.store, props.selector)\n : undefined\n\n return () => {\n if (!props.selector) {\n return slots.default?.()\n }\n\n return slots.default?.({ state: selected?.value })\n }\n },\n })\n\n const AppCell = defineComponent({\n name: 'AppCell',\n props: {\n cell: {\n type: Object as PropType<object>,\n required: true,\n },\n selector: {\n type: Function as PropType<(state: TableState<TFeatures>) => unknown>,\n default: undefined,\n },\n },\n setup(props, { slots }) {\n const cell = props.cell as Cell<TFeatures, TData, any>\n\n provide(CellContext, cell)\n\n const selected = props.selector\n ? useSelector(table.store, props.selector)\n : undefined\n\n const extendedCell = Object.assign(cell, {\n FlexRender: CellFlexRender,\n ...(cellComponents ?? {}),\n }) as Cell<TFeatures, TData, any> &\n TCellComponents & { FlexRender: Component }\n\n return () => {\n return slots.default?.(\n props.selector\n ? { cell: extendedCell, state: selected?.value }\n : { cell: extendedCell },\n )\n }\n },\n })\n\n const AppHeader = defineComponent({\n name: 'AppHeader',\n props: {\n header: {\n type: Object as PropType<object>,\n required: true,\n },\n selector: {\n type: Function as PropType<(state: TableState<TFeatures>) => unknown>,\n default: undefined,\n },\n },\n setup(props, { slots }) {\n const header = props.header as Header<TFeatures, TData, any>\n\n provide(HeaderContext, header)\n\n const selected = props.selector\n ? useSelector(table.store, props.selector)\n : undefined\n\n const extendedHeader = Object.assign(header, {\n FlexRender: HeaderFlexRender,\n ...(headerComponents ?? {}),\n }) as Header<TFeatures, TData, any> &\n THeaderComponents & { FlexRender: Component }\n\n return () => {\n return slots.default?.(\n props.selector\n ? { header: extendedHeader, state: selected?.value }\n : { header: extendedHeader },\n )\n }\n },\n })\n\n const AppFooter = defineComponent({\n name: 'AppFooter',\n props: {\n header: {\n type: Object as PropType<object>,\n required: true,\n },\n selector: {\n type: Function as PropType<(state: TableState<TFeatures>) => unknown>,\n default: undefined,\n },\n },\n setup(props, { slots }) {\n const header = props.header as Header<TFeatures, TData, any>\n\n provide(HeaderContext, header)\n\n const selected = props.selector\n ? useSelector(table.store, props.selector)\n : undefined\n\n const extendedHeader = Object.assign(header, {\n FlexRender: FooterFlexRender,\n ...(headerComponents ?? {}),\n }) as Header<TFeatures, TData, any> &\n THeaderComponents & { FlexRender: Component }\n\n return () => {\n return slots.default?.(\n props.selector\n ? { header: extendedHeader, state: selected?.value }\n : { header: extendedHeader },\n )\n }\n },\n })\n\n return Object.assign(table, {\n AppTable,\n AppCell,\n AppHeader,\n AppFooter,\n FlexRender: AppFlexRender,\n ...(tableComponents ?? {}),\n }) as AppVueTable<\n TFeatures,\n TData,\n TSelected,\n TTableComponents,\n TCellComponents,\n THeaderComponents\n >\n }\n\n return {\n appFeatures: defaultTableOptions._features as TFeatures,\n createAppColumnHelper,\n useAppTable,\n useTableContext,\n useCellContext,\n useHeaderContext,\n }\n}\n"],"mappings":"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"}
@@ -103,6 +103,24 @@ declare const AppFlexRender: _$vue.DefineComponent<_$vue.ExtractPropTypes<{
103
103
  header: any;
104
104
  footer: any;
105
105
  }, {}, {}, {}, string, _$vue.ComponentProvideOptions, true, {}, any>;
106
+ /**
107
+ * Creates app-scoped Vue table helpers with features, row models, and
108
+ * renderable component maps pre-bound.
109
+ *
110
+ * Use this when an app or design system wants typed `useAppTable`, a pre-bound
111
+ * column helper, and context helpers for table, cell, and header components.
112
+ *
113
+ * @example
114
+ * ```ts
115
+ * const { useAppTable, createAppColumnHelper } = createTableHook({
116
+ * _features,
117
+ * _rowModels: {},
118
+ * tableComponents: {},
119
+ * cellComponents: {},
120
+ * headerComponents: {},
121
+ * })
122
+ * ```
123
+ */
106
124
  declare function createTableHook<TFeatures extends TableFeatures, const TTableComponents extends Record<string, ComponentType<any>>, const TCellComponents extends Record<string, ComponentType<any>>, const THeaderComponents extends Record<string, ComponentType<any>>>({
107
125
  tableComponents,
108
126
  cellComponents,
@@ -103,6 +103,24 @@ declare const AppFlexRender: _$vue.DefineComponent<_$vue.ExtractPropTypes<{
103
103
  header: any;
104
104
  footer: any;
105
105
  }, {}, {}, {}, string, _$vue.ComponentProvideOptions, true, {}, any>;
106
+ /**
107
+ * Creates app-scoped Vue table helpers with features, row models, and
108
+ * renderable component maps pre-bound.
109
+ *
110
+ * Use this when an app or design system wants typed `useAppTable`, a pre-bound
111
+ * column helper, and context helpers for table, cell, and header components.
112
+ *
113
+ * @example
114
+ * ```ts
115
+ * const { useAppTable, createAppColumnHelper } = createTableHook({
116
+ * _features,
117
+ * _rowModels: {},
118
+ * tableComponents: {},
119
+ * cellComponents: {},
120
+ * headerComponents: {},
121
+ * })
122
+ * ```
123
+ */
106
124
  declare function createTableHook<TFeatures extends TableFeatures, const TTableComponents extends Record<string, ComponentType<any>>, const TCellComponents extends Record<string, ComponentType<any>>, const THeaderComponents extends Record<string, ComponentType<any>>>({
107
125
  tableComponents,
108
126
  cellComponents,
@@ -40,6 +40,24 @@ const AppFlexRender = defineComponent({
40
40
  };
41
41
  }
42
42
  });
43
+ /**
44
+ * Creates app-scoped Vue table helpers with features, row models, and
45
+ * renderable component maps pre-bound.
46
+ *
47
+ * Use this when an app or design system wants typed `useAppTable`, a pre-bound
48
+ * column helper, and context helpers for table, cell, and header components.
49
+ *
50
+ * @example
51
+ * ```ts
52
+ * const { useAppTable, createAppColumnHelper } = createTableHook({
53
+ * _features,
54
+ * _rowModels: {},
55
+ * tableComponents: {},
56
+ * cellComponents: {},
57
+ * headerComponents: {},
58
+ * })
59
+ * ```
60
+ */
43
61
  function createTableHook({ tableComponents, cellComponents, headerComponents, ...defaultTableOptions }) {
44
62
  const TableContext = Symbol("TableContext");
45
63
  const CellContext = Symbol("CellContext");
@@ -1 +1 @@
1
- {"version":3,"file":"createTableHook.js","names":["coreCreateColumnHelper"],"sources":["../src/createTableHook.ts"],"sourcesContent":["import { createColumnHelper as coreCreateColumnHelper } from '@tanstack/table-core'\nimport { useSelector } from '@tanstack/vue-store'\nimport { defineComponent, h, inject, provide } from 'vue'\nimport { FlexRender } from './FlexRender'\nimport { mergeProxy } from './merge-proxy'\nimport { useTable } from './useTable'\nimport type { TableOptionsWithReactiveData, VueTable } from './useTable'\nimport type { Component, InjectionKey, PropType, VNodeChild } from 'vue'\nimport type {\n AccessorFn,\n AccessorFnColumnDef,\n AccessorKeyColumnDef,\n Cell,\n CellContext,\n CellData,\n Column,\n ColumnDef,\n DeepKeys,\n DeepValue,\n DisplayColumnDef,\n GroupColumnDef,\n Header,\n IdentifiedColumnDef,\n NoInfer,\n Row,\n RowData,\n Table,\n TableFeatures,\n TableState,\n} from '@tanstack/table-core'\n\nexport type ComponentType<T extends Record<string, any>> = Component<T>\n\nexport type AppCellContext<\n TFeatures extends TableFeatures,\n TData extends RowData,\n TValue extends CellData,\n TCellComponents extends Record<string, ComponentType<any>>,\n> = {\n cell: Cell<TFeatures, TData, TValue> &\n TCellComponents & { FlexRender: Component }\n column: Column<TFeatures, TData, TValue>\n getValue: CellContext<TFeatures, TData, TValue>['getValue']\n renderValue: CellContext<TFeatures, TData, TValue>['renderValue']\n row: Row<TFeatures, TData>\n table: Table<TFeatures, TData>\n}\n\nexport type AppHeaderContext<\n TFeatures extends TableFeatures,\n TData extends RowData,\n TValue extends CellData,\n THeaderComponents extends Record<string, ComponentType<any>>,\n> = {\n column: Column<TFeatures, TData, TValue>\n header: Header<TFeatures, TData, TValue> &\n THeaderComponents & { FlexRender: Component }\n table: Table<TFeatures, TData>\n}\n\nexport type AppColumnDefTemplate<TProps extends object> =\n | string\n | ((props: TProps) => any)\n\nexport type AppColumnDefBase<\n TFeatures extends TableFeatures,\n TData extends RowData,\n TValue extends CellData,\n TCellComponents extends Record<string, ComponentType<any>>,\n THeaderComponents extends Record<string, ComponentType<any>>,\n> = Omit<\n IdentifiedColumnDef<TFeatures, TData, TValue>,\n 'cell' | 'header' | 'footer'\n> & {\n cell?: AppColumnDefTemplate<\n AppCellContext<TFeatures, TData, TValue, TCellComponents>\n >\n header?: AppColumnDefTemplate<\n AppHeaderContext<TFeatures, TData, TValue, THeaderComponents>\n >\n footer?: AppColumnDefTemplate<\n AppHeaderContext<TFeatures, TData, TValue, THeaderComponents>\n >\n}\n\nexport type AppDisplayColumnDef<\n TFeatures extends TableFeatures,\n TData extends RowData,\n TCellComponents extends Record<string, ComponentType<any>>,\n THeaderComponents extends Record<string, ComponentType<any>>,\n> = Omit<\n DisplayColumnDef<TFeatures, TData, unknown>,\n 'cell' | 'header' | 'footer'\n> & {\n cell?: AppColumnDefTemplate<\n AppCellContext<TFeatures, TData, unknown, TCellComponents>\n >\n header?: AppColumnDefTemplate<\n AppHeaderContext<TFeatures, TData, unknown, THeaderComponents>\n >\n footer?: AppColumnDefTemplate<\n AppHeaderContext<TFeatures, TData, unknown, THeaderComponents>\n >\n}\n\nexport type AppGroupColumnDef<\n TFeatures extends TableFeatures,\n TData extends RowData,\n TCellComponents extends Record<string, ComponentType<any>>,\n THeaderComponents extends Record<string, ComponentType<any>>,\n> = Omit<\n GroupColumnDef<TFeatures, TData, unknown>,\n 'cell' | 'header' | 'footer' | 'columns'\n> & {\n cell?: AppColumnDefTemplate<\n AppCellContext<TFeatures, TData, unknown, TCellComponents>\n >\n header?: AppColumnDefTemplate<\n AppHeaderContext<TFeatures, TData, unknown, THeaderComponents>\n >\n footer?: AppColumnDefTemplate<\n AppHeaderContext<TFeatures, TData, unknown, THeaderComponents>\n >\n columns?: Array<ColumnDef<TFeatures, TData, unknown>>\n}\n\nexport type AppColumnHelper<\n TFeatures extends TableFeatures,\n TData extends RowData,\n TCellComponents extends Record<string, ComponentType<any>>,\n THeaderComponents extends Record<string, ComponentType<any>>,\n> = {\n accessor: <\n TAccessor extends AccessorFn<TData> | DeepKeys<TData>,\n TValue extends TAccessor extends AccessorFn<TData, infer TReturn>\n ? TReturn\n : TAccessor extends DeepKeys<TData>\n ? DeepValue<TData, TAccessor>\n : never,\n >(\n accessor: TAccessor,\n column: TAccessor extends AccessorFn<TData>\n ? AppColumnDefBase<\n TFeatures,\n TData,\n TValue,\n TCellComponents,\n THeaderComponents\n > & { id: string }\n : AppColumnDefBase<\n TFeatures,\n TData,\n TValue,\n TCellComponents,\n THeaderComponents\n >,\n ) => TAccessor extends AccessorFn<TData>\n ? AccessorFnColumnDef<TFeatures, TData, TValue>\n : AccessorKeyColumnDef<TFeatures, TData, TValue>\n columns: <TColumns extends ReadonlyArray<ColumnDef<TFeatures, TData, any>>>(\n columns: [...TColumns],\n ) => Array<ColumnDef<TFeatures, TData, any>> & [...TColumns]\n display: (\n column: AppDisplayColumnDef<\n TFeatures,\n TData,\n TCellComponents,\n THeaderComponents\n >,\n ) => DisplayColumnDef<TFeatures, TData, unknown>\n group: (\n column: AppGroupColumnDef<\n TFeatures,\n TData,\n TCellComponents,\n THeaderComponents\n >,\n ) => GroupColumnDef<TFeatures, TData, unknown>\n}\n\nexport type CreateTableHookOptions<\n TFeatures extends TableFeatures,\n TTableComponents extends Record<string, ComponentType<any>>,\n TCellComponents extends Record<string, ComponentType<any>>,\n THeaderComponents extends Record<string, ComponentType<any>>,\n> = Omit<\n TableOptionsWithReactiveData<TFeatures, any>,\n 'columns' | 'data' | 'store' | 'state' | 'initialState'\n> & {\n tableComponents?: TTableComponents\n cellComponents?: TCellComponents\n headerComponents?: THeaderComponents\n}\n\nexport interface AppTableProps<\n TFeatures extends TableFeatures,\n TSelected = unknown,\n> {\n selector?: (state: TableState<TFeatures>) => TSelected\n}\n\nexport interface AppCellProps<\n TFeatures extends TableFeatures,\n TData extends RowData,\n TValue extends CellData = CellData,\n TSelected = unknown,\n> {\n cell: Cell<TFeatures, TData, TValue>\n selector?: (state: TableState<TFeatures>) => TSelected\n}\n\nexport interface AppHeaderProps<\n TFeatures extends TableFeatures,\n TData extends RowData,\n TValue extends CellData = CellData,\n TSelected = unknown,\n> {\n header: Header<TFeatures, TData, TValue>\n selector?: (state: TableState<TFeatures>) => TSelected\n}\n\nexport type AppVueTable<\n TFeatures extends TableFeatures,\n TData extends RowData,\n TSelected,\n TTableComponents extends Record<string, ComponentType<any>>,\n TCellComponents extends Record<string, ComponentType<any>>,\n THeaderComponents extends Record<string, ComponentType<any>>,\n> = VueTable<TFeatures, TData, TSelected> &\n NoInfer<TTableComponents> & {\n AppTable: Component<AppTableProps<TFeatures>>\n AppCell: Component<AppCellProps<TFeatures, TData>>\n AppHeader: Component<AppHeaderProps<TFeatures, TData>>\n AppFooter: Component<AppHeaderProps<TFeatures, TData>>\n FlexRender: typeof AppFlexRender\n }\n\nexport const AppFlexRender = defineComponent({\n name: 'TableFlexRender',\n props: {\n cell: {\n type: Object as PropType<Cell<any, any, any>>,\n default: undefined,\n },\n header: {\n type: Object as PropType<Header<any, any, any>>,\n default: undefined,\n },\n footer: {\n type: Object as PropType<Header<any, any, any>>,\n default: undefined,\n },\n },\n setup(props) {\n return () => {\n if (props.cell) {\n return h(FlexRender, {\n render: props.cell.column.columnDef.cell,\n props: props.cell.getContext(),\n })\n }\n\n if (props.header) {\n return h(FlexRender, {\n render: props.header.column.columnDef.header,\n props: props.header.getContext(),\n })\n }\n\n if (props.footer) {\n return h(FlexRender, {\n render: props.footer.column.columnDef.footer,\n props: props.footer.getContext(),\n })\n }\n\n return null\n }\n },\n})\n\nexport function createTableHook<\n TFeatures extends TableFeatures,\n const TTableComponents extends Record<string, ComponentType<any>>,\n const TCellComponents extends Record<string, ComponentType<any>>,\n const THeaderComponents extends Record<string, ComponentType<any>>,\n>({\n tableComponents,\n cellComponents,\n headerComponents,\n ...defaultTableOptions\n}: CreateTableHookOptions<\n TFeatures,\n TTableComponents,\n TCellComponents,\n THeaderComponents\n>) {\n const TableContext = Symbol('TableContext') as InjectionKey<\n VueTable<TFeatures, any, any>\n >\n const CellContext = Symbol('CellContext') as InjectionKey<\n Cell<TFeatures, any, any>\n >\n const HeaderContext = Symbol('HeaderContext') as InjectionKey<\n Header<TFeatures, any, any>\n >\n\n function createAppColumnHelper<TData extends RowData>(): AppColumnHelper<\n TFeatures,\n TData,\n TCellComponents,\n THeaderComponents\n > {\n return coreCreateColumnHelper<TFeatures, TData>() as AppColumnHelper<\n TFeatures,\n TData,\n TCellComponents,\n THeaderComponents\n >\n }\n\n function useTableContext<TData extends RowData = RowData>(): VueTable<\n TFeatures,\n TData\n > {\n const table = inject(TableContext)\n\n if (!table) {\n throw new Error(\n '`useTableContext` must be used within an `AppTable` component. ' +\n 'Make sure your component is wrapped with `<table.AppTable>...</table.AppTable>`.',\n )\n }\n\n return table as VueTable<TFeatures, TData>\n }\n\n function useCellContext<TValue extends CellData = CellData>(): Cell<\n TFeatures,\n any,\n TValue\n > {\n const cell = inject(CellContext)\n\n if (!cell) {\n throw new Error(\n '`useCellContext` must be used within an `AppCell` component. ' +\n 'Make sure your component is wrapped with `<table.AppCell :cell=\"cell\">...</table.AppCell>`.',\n )\n }\n\n return cell as Cell<TFeatures, any, TValue>\n }\n\n function useHeaderContext<TValue extends CellData = CellData>(): Header<\n TFeatures,\n any,\n TValue\n > {\n const header = inject(HeaderContext)\n\n if (!header) {\n throw new Error(\n '`useHeaderContext` must be used within an `AppHeader` or `AppFooter` component.',\n )\n }\n\n return header as Header<TFeatures, any, TValue>\n }\n\n const CellFlexRender = defineComponent({\n name: 'AppCellFlexRender',\n setup() {\n const cell = useCellContext()\n return () => h(AppFlexRender, { cell })\n },\n })\n\n const HeaderFlexRender = defineComponent({\n name: 'AppHeaderFlexRender',\n setup() {\n const header = useHeaderContext()\n return () => h(AppFlexRender, { header })\n },\n })\n\n const FooterFlexRender = defineComponent({\n name: 'AppFooterFlexRender',\n setup() {\n const header = useHeaderContext()\n return () => h(AppFlexRender, { footer: header })\n },\n })\n\n function useAppTable<\n TData extends RowData,\n TSelected = TableState<TFeatures>,\n >(\n tableOptions: Omit<\n TableOptionsWithReactiveData<TFeatures, TData>,\n '_features' | '_rowModels'\n >,\n selector?: (state: TableState<TFeatures>) => TSelected,\n ): AppVueTable<\n TFeatures,\n TData,\n TSelected,\n TTableComponents,\n TCellComponents,\n THeaderComponents\n > {\n const mergedOptions = mergeProxy(\n defaultTableOptions,\n tableOptions,\n ) as TableOptionsWithReactiveData<TFeatures, TData>\n\n const table = useTable<TFeatures, TData, TSelected>(mergedOptions, selector)\n\n const AppTable = defineComponent({\n name: 'AppTable',\n props: {\n selector: {\n type: Function as PropType<(state: TableState<TFeatures>) => unknown>,\n default: undefined,\n },\n },\n setup(props, { slots }) {\n provide(TableContext, table)\n const selected = props.selector\n ? useSelector(table.store, props.selector)\n : undefined\n\n return () => {\n if (!props.selector) {\n return slots.default?.()\n }\n\n return slots.default?.({ state: selected?.value })\n }\n },\n })\n\n const AppCell = defineComponent({\n name: 'AppCell',\n props: {\n cell: {\n type: Object as PropType<object>,\n required: true,\n },\n selector: {\n type: Function as PropType<(state: TableState<TFeatures>) => unknown>,\n default: undefined,\n },\n },\n setup(props, { slots }) {\n const cell = props.cell as Cell<TFeatures, TData, any>\n\n provide(CellContext, cell)\n\n const selected = props.selector\n ? useSelector(table.store, props.selector)\n : undefined\n\n const extendedCell = Object.assign(cell, {\n FlexRender: CellFlexRender,\n ...(cellComponents ?? {}),\n }) as Cell<TFeatures, TData, any> &\n TCellComponents & { FlexRender: Component }\n\n return () => {\n return slots.default?.(\n props.selector\n ? { cell: extendedCell, state: selected?.value }\n : { cell: extendedCell },\n )\n }\n },\n })\n\n const AppHeader = defineComponent({\n name: 'AppHeader',\n props: {\n header: {\n type: Object as PropType<object>,\n required: true,\n },\n selector: {\n type: Function as PropType<(state: TableState<TFeatures>) => unknown>,\n default: undefined,\n },\n },\n setup(props, { slots }) {\n const header = props.header as Header<TFeatures, TData, any>\n\n provide(HeaderContext, header)\n\n const selected = props.selector\n ? useSelector(table.store, props.selector)\n : undefined\n\n const extendedHeader = Object.assign(header, {\n FlexRender: HeaderFlexRender,\n ...(headerComponents ?? {}),\n }) as Header<TFeatures, TData, any> &\n THeaderComponents & { FlexRender: Component }\n\n return () => {\n return slots.default?.(\n props.selector\n ? { header: extendedHeader, state: selected?.value }\n : { header: extendedHeader },\n )\n }\n },\n })\n\n const AppFooter = defineComponent({\n name: 'AppFooter',\n props: {\n header: {\n type: Object as PropType<object>,\n required: true,\n },\n selector: {\n type: Function as PropType<(state: TableState<TFeatures>) => unknown>,\n default: undefined,\n },\n },\n setup(props, { slots }) {\n const header = props.header as Header<TFeatures, TData, any>\n\n provide(HeaderContext, header)\n\n const selected = props.selector\n ? useSelector(table.store, props.selector)\n : undefined\n\n const extendedHeader = Object.assign(header, {\n FlexRender: FooterFlexRender,\n ...(headerComponents ?? {}),\n }) as Header<TFeatures, TData, any> &\n THeaderComponents & { FlexRender: Component }\n\n return () => {\n return slots.default?.(\n props.selector\n ? { header: extendedHeader, state: selected?.value }\n : { header: extendedHeader },\n )\n }\n },\n })\n\n return Object.assign(table, {\n AppTable,\n AppCell,\n AppHeader,\n AppFooter,\n FlexRender: AppFlexRender,\n ...(tableComponents ?? {}),\n }) as AppVueTable<\n TFeatures,\n TData,\n TSelected,\n TTableComponents,\n TCellComponents,\n THeaderComponents\n >\n }\n\n return {\n appFeatures: defaultTableOptions._features as TFeatures,\n createAppColumnHelper,\n useAppTable,\n useTableContext,\n useCellContext,\n useHeaderContext,\n }\n}\n"],"mappings":"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"}
1
+ {"version":3,"file":"createTableHook.js","names":["coreCreateColumnHelper"],"sources":["../src/createTableHook.ts"],"sourcesContent":["import { createColumnHelper as coreCreateColumnHelper } from '@tanstack/table-core'\nimport { useSelector } from '@tanstack/vue-store'\nimport { defineComponent, h, inject, provide } from 'vue'\nimport { FlexRender } from './FlexRender'\nimport { mergeProxy } from './merge-proxy'\nimport { useTable } from './useTable'\nimport type { TableOptionsWithReactiveData, VueTable } from './useTable'\nimport type { Component, InjectionKey, PropType, VNodeChild } from 'vue'\nimport type {\n AccessorFn,\n AccessorFnColumnDef,\n AccessorKeyColumnDef,\n Cell,\n CellContext,\n CellData,\n Column,\n ColumnDef,\n DeepKeys,\n DeepValue,\n DisplayColumnDef,\n GroupColumnDef,\n Header,\n IdentifiedColumnDef,\n NoInfer,\n Row,\n RowData,\n Table,\n TableFeatures,\n TableState,\n} from '@tanstack/table-core'\n\nexport type ComponentType<T extends Record<string, any>> = Component<T>\n\nexport type AppCellContext<\n TFeatures extends TableFeatures,\n TData extends RowData,\n TValue extends CellData,\n TCellComponents extends Record<string, ComponentType<any>>,\n> = {\n cell: Cell<TFeatures, TData, TValue> &\n TCellComponents & { FlexRender: Component }\n column: Column<TFeatures, TData, TValue>\n getValue: CellContext<TFeatures, TData, TValue>['getValue']\n renderValue: CellContext<TFeatures, TData, TValue>['renderValue']\n row: Row<TFeatures, TData>\n table: Table<TFeatures, TData>\n}\n\nexport type AppHeaderContext<\n TFeatures extends TableFeatures,\n TData extends RowData,\n TValue extends CellData,\n THeaderComponents extends Record<string, ComponentType<any>>,\n> = {\n column: Column<TFeatures, TData, TValue>\n header: Header<TFeatures, TData, TValue> &\n THeaderComponents & { FlexRender: Component }\n table: Table<TFeatures, TData>\n}\n\nexport type AppColumnDefTemplate<TProps extends object> =\n | string\n | ((props: TProps) => any)\n\nexport type AppColumnDefBase<\n TFeatures extends TableFeatures,\n TData extends RowData,\n TValue extends CellData,\n TCellComponents extends Record<string, ComponentType<any>>,\n THeaderComponents extends Record<string, ComponentType<any>>,\n> = Omit<\n IdentifiedColumnDef<TFeatures, TData, TValue>,\n 'cell' | 'header' | 'footer'\n> & {\n cell?: AppColumnDefTemplate<\n AppCellContext<TFeatures, TData, TValue, TCellComponents>\n >\n header?: AppColumnDefTemplate<\n AppHeaderContext<TFeatures, TData, TValue, THeaderComponents>\n >\n footer?: AppColumnDefTemplate<\n AppHeaderContext<TFeatures, TData, TValue, THeaderComponents>\n >\n}\n\nexport type AppDisplayColumnDef<\n TFeatures extends TableFeatures,\n TData extends RowData,\n TCellComponents extends Record<string, ComponentType<any>>,\n THeaderComponents extends Record<string, ComponentType<any>>,\n> = Omit<\n DisplayColumnDef<TFeatures, TData, unknown>,\n 'cell' | 'header' | 'footer'\n> & {\n cell?: AppColumnDefTemplate<\n AppCellContext<TFeatures, TData, unknown, TCellComponents>\n >\n header?: AppColumnDefTemplate<\n AppHeaderContext<TFeatures, TData, unknown, THeaderComponents>\n >\n footer?: AppColumnDefTemplate<\n AppHeaderContext<TFeatures, TData, unknown, THeaderComponents>\n >\n}\n\nexport type AppGroupColumnDef<\n TFeatures extends TableFeatures,\n TData extends RowData,\n TCellComponents extends Record<string, ComponentType<any>>,\n THeaderComponents extends Record<string, ComponentType<any>>,\n> = Omit<\n GroupColumnDef<TFeatures, TData, unknown>,\n 'cell' | 'header' | 'footer' | 'columns'\n> & {\n cell?: AppColumnDefTemplate<\n AppCellContext<TFeatures, TData, unknown, TCellComponents>\n >\n header?: AppColumnDefTemplate<\n AppHeaderContext<TFeatures, TData, unknown, THeaderComponents>\n >\n footer?: AppColumnDefTemplate<\n AppHeaderContext<TFeatures, TData, unknown, THeaderComponents>\n >\n columns?: Array<ColumnDef<TFeatures, TData, unknown>>\n}\n\nexport type AppColumnHelper<\n TFeatures extends TableFeatures,\n TData extends RowData,\n TCellComponents extends Record<string, ComponentType<any>>,\n THeaderComponents extends Record<string, ComponentType<any>>,\n> = {\n accessor: <\n TAccessor extends AccessorFn<TData> | DeepKeys<TData>,\n TValue extends TAccessor extends AccessorFn<TData, infer TReturn>\n ? TReturn\n : TAccessor extends DeepKeys<TData>\n ? DeepValue<TData, TAccessor>\n : never,\n >(\n accessor: TAccessor,\n column: TAccessor extends AccessorFn<TData>\n ? AppColumnDefBase<\n TFeatures,\n TData,\n TValue,\n TCellComponents,\n THeaderComponents\n > & { id: string }\n : AppColumnDefBase<\n TFeatures,\n TData,\n TValue,\n TCellComponents,\n THeaderComponents\n >,\n ) => TAccessor extends AccessorFn<TData>\n ? AccessorFnColumnDef<TFeatures, TData, TValue>\n : AccessorKeyColumnDef<TFeatures, TData, TValue>\n columns: <TColumns extends ReadonlyArray<ColumnDef<TFeatures, TData, any>>>(\n columns: [...TColumns],\n ) => Array<ColumnDef<TFeatures, TData, any>> & [...TColumns]\n display: (\n column: AppDisplayColumnDef<\n TFeatures,\n TData,\n TCellComponents,\n THeaderComponents\n >,\n ) => DisplayColumnDef<TFeatures, TData, unknown>\n group: (\n column: AppGroupColumnDef<\n TFeatures,\n TData,\n TCellComponents,\n THeaderComponents\n >,\n ) => GroupColumnDef<TFeatures, TData, unknown>\n}\n\nexport type CreateTableHookOptions<\n TFeatures extends TableFeatures,\n TTableComponents extends Record<string, ComponentType<any>>,\n TCellComponents extends Record<string, ComponentType<any>>,\n THeaderComponents extends Record<string, ComponentType<any>>,\n> = Omit<\n TableOptionsWithReactiveData<TFeatures, any>,\n 'columns' | 'data' | 'store' | 'state' | 'initialState'\n> & {\n tableComponents?: TTableComponents\n cellComponents?: TCellComponents\n headerComponents?: THeaderComponents\n}\n\nexport interface AppTableProps<\n TFeatures extends TableFeatures,\n TSelected = unknown,\n> {\n selector?: (state: TableState<TFeatures>) => TSelected\n}\n\nexport interface AppCellProps<\n TFeatures extends TableFeatures,\n TData extends RowData,\n TValue extends CellData = CellData,\n TSelected = unknown,\n> {\n cell: Cell<TFeatures, TData, TValue>\n selector?: (state: TableState<TFeatures>) => TSelected\n}\n\nexport interface AppHeaderProps<\n TFeatures extends TableFeatures,\n TData extends RowData,\n TValue extends CellData = CellData,\n TSelected = unknown,\n> {\n header: Header<TFeatures, TData, TValue>\n selector?: (state: TableState<TFeatures>) => TSelected\n}\n\nexport type AppVueTable<\n TFeatures extends TableFeatures,\n TData extends RowData,\n TSelected,\n TTableComponents extends Record<string, ComponentType<any>>,\n TCellComponents extends Record<string, ComponentType<any>>,\n THeaderComponents extends Record<string, ComponentType<any>>,\n> = VueTable<TFeatures, TData, TSelected> &\n NoInfer<TTableComponents> & {\n AppTable: Component<AppTableProps<TFeatures>>\n AppCell: Component<AppCellProps<TFeatures, TData>>\n AppHeader: Component<AppHeaderProps<TFeatures, TData>>\n AppFooter: Component<AppHeaderProps<TFeatures, TData>>\n FlexRender: typeof AppFlexRender\n }\n\nexport const AppFlexRender = defineComponent({\n name: 'TableFlexRender',\n props: {\n cell: {\n type: Object as PropType<Cell<any, any, any>>,\n default: undefined,\n },\n header: {\n type: Object as PropType<Header<any, any, any>>,\n default: undefined,\n },\n footer: {\n type: Object as PropType<Header<any, any, any>>,\n default: undefined,\n },\n },\n setup(props) {\n return () => {\n if (props.cell) {\n return h(FlexRender, {\n render: props.cell.column.columnDef.cell,\n props: props.cell.getContext(),\n })\n }\n\n if (props.header) {\n return h(FlexRender, {\n render: props.header.column.columnDef.header,\n props: props.header.getContext(),\n })\n }\n\n if (props.footer) {\n return h(FlexRender, {\n render: props.footer.column.columnDef.footer,\n props: props.footer.getContext(),\n })\n }\n\n return null\n }\n },\n})\n\n/**\n * Creates app-scoped Vue table helpers with features, row models, and\n * renderable component maps pre-bound.\n *\n * Use this when an app or design system wants typed `useAppTable`, a pre-bound\n * column helper, and context helpers for table, cell, and header components.\n *\n * @example\n * ```ts\n * const { useAppTable, createAppColumnHelper } = createTableHook({\n * _features,\n * _rowModels: {},\n * tableComponents: {},\n * cellComponents: {},\n * headerComponents: {},\n * })\n * ```\n */\nexport function createTableHook<\n TFeatures extends TableFeatures,\n const TTableComponents extends Record<string, ComponentType<any>>,\n const TCellComponents extends Record<string, ComponentType<any>>,\n const THeaderComponents extends Record<string, ComponentType<any>>,\n>({\n tableComponents,\n cellComponents,\n headerComponents,\n ...defaultTableOptions\n}: CreateTableHookOptions<\n TFeatures,\n TTableComponents,\n TCellComponents,\n THeaderComponents\n>) {\n const TableContext = Symbol('TableContext') as InjectionKey<\n VueTable<TFeatures, any, any>\n >\n const CellContext = Symbol('CellContext') as InjectionKey<\n Cell<TFeatures, any, any>\n >\n const HeaderContext = Symbol('HeaderContext') as InjectionKey<\n Header<TFeatures, any, any>\n >\n\n function createAppColumnHelper<TData extends RowData>(): AppColumnHelper<\n TFeatures,\n TData,\n TCellComponents,\n THeaderComponents\n > {\n return coreCreateColumnHelper<TFeatures, TData>() as AppColumnHelper<\n TFeatures,\n TData,\n TCellComponents,\n THeaderComponents\n >\n }\n\n function useTableContext<TData extends RowData = RowData>(): VueTable<\n TFeatures,\n TData\n > {\n const table = inject(TableContext)\n\n if (!table) {\n throw new Error(\n '`useTableContext` must be used within an `AppTable` component. ' +\n 'Make sure your component is wrapped with `<table.AppTable>...</table.AppTable>`.',\n )\n }\n\n return table as VueTable<TFeatures, TData>\n }\n\n function useCellContext<TValue extends CellData = CellData>(): Cell<\n TFeatures,\n any,\n TValue\n > {\n const cell = inject(CellContext)\n\n if (!cell) {\n throw new Error(\n '`useCellContext` must be used within an `AppCell` component. ' +\n 'Make sure your component is wrapped with `<table.AppCell :cell=\"cell\">...</table.AppCell>`.',\n )\n }\n\n return cell as Cell<TFeatures, any, TValue>\n }\n\n function useHeaderContext<TValue extends CellData = CellData>(): Header<\n TFeatures,\n any,\n TValue\n > {\n const header = inject(HeaderContext)\n\n if (!header) {\n throw new Error(\n '`useHeaderContext` must be used within an `AppHeader` or `AppFooter` component.',\n )\n }\n\n return header as Header<TFeatures, any, TValue>\n }\n\n const CellFlexRender = defineComponent({\n name: 'AppCellFlexRender',\n setup() {\n const cell = useCellContext()\n return () => h(AppFlexRender, { cell })\n },\n })\n\n const HeaderFlexRender = defineComponent({\n name: 'AppHeaderFlexRender',\n setup() {\n const header = useHeaderContext()\n return () => h(AppFlexRender, { header })\n },\n })\n\n const FooterFlexRender = defineComponent({\n name: 'AppFooterFlexRender',\n setup() {\n const header = useHeaderContext()\n return () => h(AppFlexRender, { footer: header })\n },\n })\n\n function useAppTable<\n TData extends RowData,\n TSelected = TableState<TFeatures>,\n >(\n tableOptions: Omit<\n TableOptionsWithReactiveData<TFeatures, TData>,\n '_features' | '_rowModels'\n >,\n selector?: (state: TableState<TFeatures>) => TSelected,\n ): AppVueTable<\n TFeatures,\n TData,\n TSelected,\n TTableComponents,\n TCellComponents,\n THeaderComponents\n > {\n const mergedOptions = mergeProxy(\n defaultTableOptions,\n tableOptions,\n ) as TableOptionsWithReactiveData<TFeatures, TData>\n\n const table = useTable<TFeatures, TData, TSelected>(mergedOptions, selector)\n\n const AppTable = defineComponent({\n name: 'AppTable',\n props: {\n selector: {\n type: Function as PropType<(state: TableState<TFeatures>) => unknown>,\n default: undefined,\n },\n },\n setup(props, { slots }) {\n provide(TableContext, table)\n const selected = props.selector\n ? useSelector(table.store, props.selector)\n : undefined\n\n return () => {\n if (!props.selector) {\n return slots.default?.()\n }\n\n return slots.default?.({ state: selected?.value })\n }\n },\n })\n\n const AppCell = defineComponent({\n name: 'AppCell',\n props: {\n cell: {\n type: Object as PropType<object>,\n required: true,\n },\n selector: {\n type: Function as PropType<(state: TableState<TFeatures>) => unknown>,\n default: undefined,\n },\n },\n setup(props, { slots }) {\n const cell = props.cell as Cell<TFeatures, TData, any>\n\n provide(CellContext, cell)\n\n const selected = props.selector\n ? useSelector(table.store, props.selector)\n : undefined\n\n const extendedCell = Object.assign(cell, {\n FlexRender: CellFlexRender,\n ...(cellComponents ?? {}),\n }) as Cell<TFeatures, TData, any> &\n TCellComponents & { FlexRender: Component }\n\n return () => {\n return slots.default?.(\n props.selector\n ? { cell: extendedCell, state: selected?.value }\n : { cell: extendedCell },\n )\n }\n },\n })\n\n const AppHeader = defineComponent({\n name: 'AppHeader',\n props: {\n header: {\n type: Object as PropType<object>,\n required: true,\n },\n selector: {\n type: Function as PropType<(state: TableState<TFeatures>) => unknown>,\n default: undefined,\n },\n },\n setup(props, { slots }) {\n const header = props.header as Header<TFeatures, TData, any>\n\n provide(HeaderContext, header)\n\n const selected = props.selector\n ? useSelector(table.store, props.selector)\n : undefined\n\n const extendedHeader = Object.assign(header, {\n FlexRender: HeaderFlexRender,\n ...(headerComponents ?? {}),\n }) as Header<TFeatures, TData, any> &\n THeaderComponents & { FlexRender: Component }\n\n return () => {\n return slots.default?.(\n props.selector\n ? { header: extendedHeader, state: selected?.value }\n : { header: extendedHeader },\n )\n }\n },\n })\n\n const AppFooter = defineComponent({\n name: 'AppFooter',\n props: {\n header: {\n type: Object as PropType<object>,\n required: true,\n },\n selector: {\n type: Function as PropType<(state: TableState<TFeatures>) => unknown>,\n default: undefined,\n },\n },\n setup(props, { slots }) {\n const header = props.header as Header<TFeatures, TData, any>\n\n provide(HeaderContext, header)\n\n const selected = props.selector\n ? useSelector(table.store, props.selector)\n : undefined\n\n const extendedHeader = Object.assign(header, {\n FlexRender: FooterFlexRender,\n ...(headerComponents ?? {}),\n }) as Header<TFeatures, TData, any> &\n THeaderComponents & { FlexRender: Component }\n\n return () => {\n return slots.default?.(\n props.selector\n ? { header: extendedHeader, state: selected?.value }\n : { header: extendedHeader },\n )\n }\n },\n })\n\n return Object.assign(table, {\n AppTable,\n AppCell,\n AppHeader,\n AppFooter,\n FlexRender: AppFlexRender,\n ...(tableComponents ?? {}),\n }) as AppVueTable<\n TFeatures,\n TData,\n TSelected,\n TTableComponents,\n TCellComponents,\n THeaderComponents\n >\n }\n\n return {\n appFeatures: defaultTableOptions._features as TFeatures,\n createAppColumnHelper,\n useAppTable,\n useTableContext,\n useCellContext,\n useHeaderContext,\n }\n}\n"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"merge-proxy.cjs","names":[],"sources":["../src/merge-proxy.ts"],"sourcesContent":["function trueFn() {\n return true\n}\n\nconst $PROXY = Symbol('merge-proxy')\nconst $SOURCES = Symbol('merge-proxy-sources')\n\n// https://github.com/solidjs/solid/blob/c20ca4fd8c36bc0522fedb2c7f38a110b7ee2663/packages/solid/src/render/component.ts#L51-L118\nconst propTraps: ProxyHandler<{\n get: (k: string | number | symbol) => any\n has: (k: string | number | symbol) => boolean\n keys: () => Array<string>\n sources: Array<any>\n}> = {\n get(_, property, receiver) {\n if (property === $PROXY) return receiver\n if (property === $SOURCES) return _.sources\n return _.get(property)\n },\n has(_, property) {\n return _.has(property)\n },\n set: trueFn,\n deleteProperty: trueFn,\n getOwnPropertyDescriptor(_, property) {\n return {\n configurable: true,\n enumerable: true,\n get() {\n return _.get(property)\n },\n set: trueFn,\n deleteProperty: trueFn,\n }\n },\n ownKeys(_) {\n return _.keys()\n },\n}\n\ntype UnboxLazy<T> = T extends () => infer U ? U : T\ntype BoxedTupleTypes<T extends Array<any>> = {\n [P in keyof T]: [UnboxLazy<T[P]>]\n}[Exclude<keyof T, keyof Array<any>>]\ntype UnionToIntersection<T> = (T extends any ? (k: T) => void : never) extends (\n k: infer I,\n) => void\n ? I\n : never\ntype UnboxIntersection<T> = T extends { 0: infer U } ? U : never\ntype MergeProxy<T extends Array<any>> = UnboxIntersection<\n UnionToIntersection<BoxedTupleTypes<T>>\n>\n\nfunction resolveSource(s: any) {\n return 'value' in s ? s.value : s\n}\n\nexport function mergeProxy<T extends Array<any>>(...sources: T): MergeProxy<T>\nexport function mergeProxy(...sources: any): any {\n const flattenedSources = sources.flatMap((source: any) => {\n if (\n typeof source === 'object' &&\n source !== null &&\n $SOURCES in source &&\n Array.isArray(source[$SOURCES])\n ) {\n return source[$SOURCES]\n }\n\n return [source]\n })\n\n return new Proxy(\n {\n sources: flattenedSources,\n get(property: string | number | symbol) {\n for (let i = flattenedSources.length - 1; i >= 0; i--) {\n const v = resolveSource(flattenedSources[i])[property]\n if (v !== undefined) return v\n }\n },\n has(property: string | number | symbol) {\n for (let i = flattenedSources.length - 1; i >= 0; i--) {\n if (property in resolveSource(flattenedSources[i])) return true\n }\n return false\n },\n keys() {\n const keys = []\n for (const source of flattenedSources)\n keys.push(...Object.keys(resolveSource(source)))\n return [...Array.from(new Set(keys))]\n },\n },\n propTraps,\n )\n}\n"],"mappings":";;AAAA,SAAS,SAAS;AAChB,QAAO;;AAGT,MAAM,SAAS,OAAO,cAAc;AACpC,MAAM,WAAW,OAAO,sBAAsB;AAG9C,MAAM,YAKD;CACH,IAAI,GAAG,UAAU,UAAU;AACzB,MAAI,aAAa,OAAQ,QAAO;AAChC,MAAI,aAAa,SAAU,QAAO,EAAE;AACpC,SAAO,EAAE,IAAI,SAAS;;CAExB,IAAI,GAAG,UAAU;AACf,SAAO,EAAE,IAAI,SAAS;;CAExB,KAAK;CACL,gBAAgB;CAChB,yBAAyB,GAAG,UAAU;AACpC,SAAO;GACL,cAAc;GACd,YAAY;GACZ,MAAM;AACJ,WAAO,EAAE,IAAI,SAAS;;GAExB,KAAK;GACL,gBAAgB;GACjB;;CAEH,QAAQ,GAAG;AACT,SAAO,EAAE,MAAM;;CAElB;AAgBD,SAAS,cAAc,GAAQ;AAC7B,QAAO,WAAW,IAAI,EAAE,QAAQ;;AAIlC,SAAgB,WAAW,GAAG,SAAmB;CAC/C,MAAM,mBAAmB,QAAQ,SAAS,WAAgB;AACxD,MACE,OAAO,WAAW,YAClB,WAAW,QACX,YAAY,UACZ,MAAM,QAAQ,OAAO,UAAU,CAE/B,QAAO,OAAO;AAGhB,SAAO,CAAC,OAAO;GACf;AAEF,QAAO,IAAI,MACT;EACE,SAAS;EACT,IAAI,UAAoC;AACtC,QAAK,IAAI,IAAI,iBAAiB,SAAS,GAAG,KAAK,GAAG,KAAK;IACrD,MAAM,IAAI,cAAc,iBAAiB,GAAG,CAAC;AAC7C,QAAI,MAAM,OAAW,QAAO;;;EAGhC,IAAI,UAAoC;AACtC,QAAK,IAAI,IAAI,iBAAiB,SAAS,GAAG,KAAK,GAAG,IAChD,KAAI,YAAY,cAAc,iBAAiB,GAAG,CAAE,QAAO;AAE7D,UAAO;;EAET,OAAO;GACL,MAAM,OAAO,EAAE;AACf,QAAK,MAAM,UAAU,iBACnB,MAAK,KAAK,GAAG,OAAO,KAAK,cAAc,OAAO,CAAC,CAAC;AAClD,UAAO,CAAC,GAAG,MAAM,KAAK,IAAI,IAAI,KAAK,CAAC,CAAC;;EAExC,EACD,UACD"}
1
+ {"version":3,"file":"merge-proxy.cjs","names":[],"sources":["../src/merge-proxy.ts"],"sourcesContent":["function trueFn() {\n return true\n}\n\nconst $PROXY = Symbol('merge-proxy')\nconst $SOURCES = Symbol('merge-proxy-sources')\n\n// https://github.com/solidjs/solid/blob/c20ca4fd8c36bc0522fedb2c7f38a110b7ee2663/packages/solid/src/render/component.ts#L51-L118\nconst propTraps: ProxyHandler<{\n get: (k: string | number | symbol) => any\n has: (k: string | number | symbol) => boolean\n keys: () => Array<string>\n sources: Array<any>\n}> = {\n get(_, property, receiver) {\n if (property === $PROXY) return receiver\n if (property === $SOURCES) return _.sources\n return _.get(property)\n },\n has(_, property) {\n return _.has(property)\n },\n set: trueFn,\n deleteProperty: trueFn,\n getOwnPropertyDescriptor(_, property) {\n return {\n configurable: true,\n enumerable: true,\n get() {\n return _.get(property)\n },\n set: trueFn,\n deleteProperty: trueFn,\n }\n },\n ownKeys(_) {\n return _.keys()\n },\n}\n\ntype UnboxLazy<T> = T extends () => infer U ? U : T\ntype BoxedTupleTypes<T extends Array<any>> = {\n [P in keyof T]: [UnboxLazy<T[P]>]\n}[Exclude<keyof T, keyof Array<any>>]\ntype UnionToIntersection<T> = (T extends any ? (k: T) => void : never) extends (\n k: infer I,\n) => void\n ? I\n : never\ntype UnboxIntersection<T> = T extends { 0: infer U } ? U : never\ntype MergeProxy<T extends Array<any>> = UnboxIntersection<\n UnionToIntersection<BoxedTupleTypes<T>>\n>\n\nfunction resolveSource(s: any) {\n return 'value' in s ? s.value : s\n}\n\nexport function mergeProxy<T extends Array<any>>(...sources: T): MergeProxy<T>\nexport function mergeProxy(...sources: any): any {\n const flattenedSources = sources.flatMap((source: any) => {\n if (\n typeof source === 'object' &&\n source !== null &&\n $SOURCES in source &&\n Array.isArray(source[$SOURCES])\n ) {\n return source[$SOURCES]\n }\n\n return [source]\n })\n\n return new Proxy(\n {\n sources: flattenedSources,\n get(property: string | number | symbol) {\n for (let i = flattenedSources.length - 1; i >= 0; i--) {\n const v = resolveSource(flattenedSources[i])[property]\n if (v !== undefined) return v\n }\n },\n has(property: string | number | symbol) {\n for (let i = flattenedSources.length - 1; i >= 0; i--) {\n if (property in resolveSource(flattenedSources[i])) return true\n }\n return false\n },\n keys() {\n const keys = []\n for (const source of flattenedSources)\n keys.push(...Object.keys(resolveSource(source)))\n return [...Array.from(new Set(keys))]\n },\n },\n propTraps,\n )\n}\n"],"mappings":";;AAAA,SAAS,SAAS;CAChB,OAAO;;AAGT,MAAM,SAAS,OAAO,cAAc;AACpC,MAAM,WAAW,OAAO,sBAAsB;AAG9C,MAAM,YAKD;CACH,IAAI,GAAG,UAAU,UAAU;EACzB,IAAI,aAAa,QAAQ,OAAO;EAChC,IAAI,aAAa,UAAU,OAAO,EAAE;EACpC,OAAO,EAAE,IAAI,SAAS;;CAExB,IAAI,GAAG,UAAU;EACf,OAAO,EAAE,IAAI,SAAS;;CAExB,KAAK;CACL,gBAAgB;CAChB,yBAAyB,GAAG,UAAU;EACpC,OAAO;GACL,cAAc;GACd,YAAY;GACZ,MAAM;IACJ,OAAO,EAAE,IAAI,SAAS;;GAExB,KAAK;GACL,gBAAgB;GACjB;;CAEH,QAAQ,GAAG;EACT,OAAO,EAAE,MAAM;;CAElB;AAgBD,SAAS,cAAc,GAAQ;CAC7B,OAAO,WAAW,IAAI,EAAE,QAAQ;;AAIlC,SAAgB,WAAW,GAAG,SAAmB;CAC/C,MAAM,mBAAmB,QAAQ,SAAS,WAAgB;EACxD,IACE,OAAO,WAAW,YAClB,WAAW,QACX,YAAY,UACZ,MAAM,QAAQ,OAAO,UAAU,EAE/B,OAAO,OAAO;EAGhB,OAAO,CAAC,OAAO;GACf;CAEF,OAAO,IAAI,MACT;EACE,SAAS;EACT,IAAI,UAAoC;GACtC,KAAK,IAAI,IAAI,iBAAiB,SAAS,GAAG,KAAK,GAAG,KAAK;IACrD,MAAM,IAAI,cAAc,iBAAiB,GAAG,CAAC;IAC7C,IAAI,MAAM,QAAW,OAAO;;;EAGhC,IAAI,UAAoC;GACtC,KAAK,IAAI,IAAI,iBAAiB,SAAS,GAAG,KAAK,GAAG,KAChD,IAAI,YAAY,cAAc,iBAAiB,GAAG,EAAE,OAAO;GAE7D,OAAO;;EAET,OAAO;GACL,MAAM,OAAO,EAAE;GACf,KAAK,MAAM,UAAU,kBACnB,KAAK,KAAK,GAAG,OAAO,KAAK,cAAc,OAAO,CAAC,CAAC;GAClD,OAAO,CAAC,GAAG,MAAM,KAAK,IAAI,IAAI,KAAK,CAAC,CAAC;;EAExC,EACD,UACD"}
@@ -1 +1 @@
1
- {"version":3,"file":"merge-proxy.js","names":[],"sources":["../src/merge-proxy.ts"],"sourcesContent":["function trueFn() {\n return true\n}\n\nconst $PROXY = Symbol('merge-proxy')\nconst $SOURCES = Symbol('merge-proxy-sources')\n\n// https://github.com/solidjs/solid/blob/c20ca4fd8c36bc0522fedb2c7f38a110b7ee2663/packages/solid/src/render/component.ts#L51-L118\nconst propTraps: ProxyHandler<{\n get: (k: string | number | symbol) => any\n has: (k: string | number | symbol) => boolean\n keys: () => Array<string>\n sources: Array<any>\n}> = {\n get(_, property, receiver) {\n if (property === $PROXY) return receiver\n if (property === $SOURCES) return _.sources\n return _.get(property)\n },\n has(_, property) {\n return _.has(property)\n },\n set: trueFn,\n deleteProperty: trueFn,\n getOwnPropertyDescriptor(_, property) {\n return {\n configurable: true,\n enumerable: true,\n get() {\n return _.get(property)\n },\n set: trueFn,\n deleteProperty: trueFn,\n }\n },\n ownKeys(_) {\n return _.keys()\n },\n}\n\ntype UnboxLazy<T> = T extends () => infer U ? U : T\ntype BoxedTupleTypes<T extends Array<any>> = {\n [P in keyof T]: [UnboxLazy<T[P]>]\n}[Exclude<keyof T, keyof Array<any>>]\ntype UnionToIntersection<T> = (T extends any ? (k: T) => void : never) extends (\n k: infer I,\n) => void\n ? I\n : never\ntype UnboxIntersection<T> = T extends { 0: infer U } ? U : never\ntype MergeProxy<T extends Array<any>> = UnboxIntersection<\n UnionToIntersection<BoxedTupleTypes<T>>\n>\n\nfunction resolveSource(s: any) {\n return 'value' in s ? s.value : s\n}\n\nexport function mergeProxy<T extends Array<any>>(...sources: T): MergeProxy<T>\nexport function mergeProxy(...sources: any): any {\n const flattenedSources = sources.flatMap((source: any) => {\n if (\n typeof source === 'object' &&\n source !== null &&\n $SOURCES in source &&\n Array.isArray(source[$SOURCES])\n ) {\n return source[$SOURCES]\n }\n\n return [source]\n })\n\n return new Proxy(\n {\n sources: flattenedSources,\n get(property: string | number | symbol) {\n for (let i = flattenedSources.length - 1; i >= 0; i--) {\n const v = resolveSource(flattenedSources[i])[property]\n if (v !== undefined) return v\n }\n },\n has(property: string | number | symbol) {\n for (let i = flattenedSources.length - 1; i >= 0; i--) {\n if (property in resolveSource(flattenedSources[i])) return true\n }\n return false\n },\n keys() {\n const keys = []\n for (const source of flattenedSources)\n keys.push(...Object.keys(resolveSource(source)))\n return [...Array.from(new Set(keys))]\n },\n },\n propTraps,\n )\n}\n"],"mappings":";AAAA,SAAS,SAAS;AAChB,QAAO;;AAGT,MAAM,SAAS,OAAO,cAAc;AACpC,MAAM,WAAW,OAAO,sBAAsB;AAG9C,MAAM,YAKD;CACH,IAAI,GAAG,UAAU,UAAU;AACzB,MAAI,aAAa,OAAQ,QAAO;AAChC,MAAI,aAAa,SAAU,QAAO,EAAE;AACpC,SAAO,EAAE,IAAI,SAAS;;CAExB,IAAI,GAAG,UAAU;AACf,SAAO,EAAE,IAAI,SAAS;;CAExB,KAAK;CACL,gBAAgB;CAChB,yBAAyB,GAAG,UAAU;AACpC,SAAO;GACL,cAAc;GACd,YAAY;GACZ,MAAM;AACJ,WAAO,EAAE,IAAI,SAAS;;GAExB,KAAK;GACL,gBAAgB;GACjB;;CAEH,QAAQ,GAAG;AACT,SAAO,EAAE,MAAM;;CAElB;AAgBD,SAAS,cAAc,GAAQ;AAC7B,QAAO,WAAW,IAAI,EAAE,QAAQ;;AAIlC,SAAgB,WAAW,GAAG,SAAmB;CAC/C,MAAM,mBAAmB,QAAQ,SAAS,WAAgB;AACxD,MACE,OAAO,WAAW,YAClB,WAAW,QACX,YAAY,UACZ,MAAM,QAAQ,OAAO,UAAU,CAE/B,QAAO,OAAO;AAGhB,SAAO,CAAC,OAAO;GACf;AAEF,QAAO,IAAI,MACT;EACE,SAAS;EACT,IAAI,UAAoC;AACtC,QAAK,IAAI,IAAI,iBAAiB,SAAS,GAAG,KAAK,GAAG,KAAK;IACrD,MAAM,IAAI,cAAc,iBAAiB,GAAG,CAAC;AAC7C,QAAI,MAAM,OAAW,QAAO;;;EAGhC,IAAI,UAAoC;AACtC,QAAK,IAAI,IAAI,iBAAiB,SAAS,GAAG,KAAK,GAAG,IAChD,KAAI,YAAY,cAAc,iBAAiB,GAAG,CAAE,QAAO;AAE7D,UAAO;;EAET,OAAO;GACL,MAAM,OAAO,EAAE;AACf,QAAK,MAAM,UAAU,iBACnB,MAAK,KAAK,GAAG,OAAO,KAAK,cAAc,OAAO,CAAC,CAAC;AAClD,UAAO,CAAC,GAAG,MAAM,KAAK,IAAI,IAAI,KAAK,CAAC,CAAC;;EAExC,EACD,UACD"}
1
+ {"version":3,"file":"merge-proxy.js","names":[],"sources":["../src/merge-proxy.ts"],"sourcesContent":["function trueFn() {\n return true\n}\n\nconst $PROXY = Symbol('merge-proxy')\nconst $SOURCES = Symbol('merge-proxy-sources')\n\n// https://github.com/solidjs/solid/blob/c20ca4fd8c36bc0522fedb2c7f38a110b7ee2663/packages/solid/src/render/component.ts#L51-L118\nconst propTraps: ProxyHandler<{\n get: (k: string | number | symbol) => any\n has: (k: string | number | symbol) => boolean\n keys: () => Array<string>\n sources: Array<any>\n}> = {\n get(_, property, receiver) {\n if (property === $PROXY) return receiver\n if (property === $SOURCES) return _.sources\n return _.get(property)\n },\n has(_, property) {\n return _.has(property)\n },\n set: trueFn,\n deleteProperty: trueFn,\n getOwnPropertyDescriptor(_, property) {\n return {\n configurable: true,\n enumerable: true,\n get() {\n return _.get(property)\n },\n set: trueFn,\n deleteProperty: trueFn,\n }\n },\n ownKeys(_) {\n return _.keys()\n },\n}\n\ntype UnboxLazy<T> = T extends () => infer U ? U : T\ntype BoxedTupleTypes<T extends Array<any>> = {\n [P in keyof T]: [UnboxLazy<T[P]>]\n}[Exclude<keyof T, keyof Array<any>>]\ntype UnionToIntersection<T> = (T extends any ? (k: T) => void : never) extends (\n k: infer I,\n) => void\n ? I\n : never\ntype UnboxIntersection<T> = T extends { 0: infer U } ? U : never\ntype MergeProxy<T extends Array<any>> = UnboxIntersection<\n UnionToIntersection<BoxedTupleTypes<T>>\n>\n\nfunction resolveSource(s: any) {\n return 'value' in s ? s.value : s\n}\n\nexport function mergeProxy<T extends Array<any>>(...sources: T): MergeProxy<T>\nexport function mergeProxy(...sources: any): any {\n const flattenedSources = sources.flatMap((source: any) => {\n if (\n typeof source === 'object' &&\n source !== null &&\n $SOURCES in source &&\n Array.isArray(source[$SOURCES])\n ) {\n return source[$SOURCES]\n }\n\n return [source]\n })\n\n return new Proxy(\n {\n sources: flattenedSources,\n get(property: string | number | symbol) {\n for (let i = flattenedSources.length - 1; i >= 0; i--) {\n const v = resolveSource(flattenedSources[i])[property]\n if (v !== undefined) return v\n }\n },\n has(property: string | number | symbol) {\n for (let i = flattenedSources.length - 1; i >= 0; i--) {\n if (property in resolveSource(flattenedSources[i])) return true\n }\n return false\n },\n keys() {\n const keys = []\n for (const source of flattenedSources)\n keys.push(...Object.keys(resolveSource(source)))\n return [...Array.from(new Set(keys))]\n },\n },\n propTraps,\n )\n}\n"],"mappings":";AAAA,SAAS,SAAS;CAChB,OAAO;;AAGT,MAAM,SAAS,OAAO,cAAc;AACpC,MAAM,WAAW,OAAO,sBAAsB;AAG9C,MAAM,YAKD;CACH,IAAI,GAAG,UAAU,UAAU;EACzB,IAAI,aAAa,QAAQ,OAAO;EAChC,IAAI,aAAa,UAAU,OAAO,EAAE;EACpC,OAAO,EAAE,IAAI,SAAS;;CAExB,IAAI,GAAG,UAAU;EACf,OAAO,EAAE,IAAI,SAAS;;CAExB,KAAK;CACL,gBAAgB;CAChB,yBAAyB,GAAG,UAAU;EACpC,OAAO;GACL,cAAc;GACd,YAAY;GACZ,MAAM;IACJ,OAAO,EAAE,IAAI,SAAS;;GAExB,KAAK;GACL,gBAAgB;GACjB;;CAEH,QAAQ,GAAG;EACT,OAAO,EAAE,MAAM;;CAElB;AAgBD,SAAS,cAAc,GAAQ;CAC7B,OAAO,WAAW,IAAI,EAAE,QAAQ;;AAIlC,SAAgB,WAAW,GAAG,SAAmB;CAC/C,MAAM,mBAAmB,QAAQ,SAAS,WAAgB;EACxD,IACE,OAAO,WAAW,YAClB,WAAW,QACX,YAAY,UACZ,MAAM,QAAQ,OAAO,UAAU,EAE/B,OAAO,OAAO;EAGhB,OAAO,CAAC,OAAO;GACf;CAEF,OAAO,IAAI,MACT;EACE,SAAS;EACT,IAAI,UAAoC;GACtC,KAAK,IAAI,IAAI,iBAAiB,SAAS,GAAG,KAAK,GAAG,KAAK;IACrD,MAAM,IAAI,cAAc,iBAAiB,GAAG,CAAC;IAC7C,IAAI,MAAM,QAAW,OAAO;;;EAGhC,IAAI,UAAoC;GACtC,KAAK,IAAI,IAAI,iBAAiB,SAAS,GAAG,KAAK,GAAG,KAChD,IAAI,YAAY,cAAc,iBAAiB,GAAG,EAAE,OAAO;GAE7D,OAAO;;EAET,OAAO;GACL,MAAM,OAAO,EAAE;GACf,KAAK,MAAM,UAAU,kBACnB,KAAK,KAAK,GAAG,OAAO,KAAK,cAAc,OAAO,CAAC,CAAC;GAClD,OAAO,CAAC,GAAG,MAAM,KAAK,IAAI,IAAI,KAAK,CAAC,CAAC;;EAExC,EACD,UACD"}
@@ -26,6 +26,13 @@ function refToWritableAtom(source) {
26
26
  })
27
27
  });
28
28
  }
29
+ /**
30
+ * Creates the table-core reactivity bindings used by the Vue adapter.
31
+ *
32
+ * Readonly table atoms are backed by Vue `computed` refs and writable atoms by
33
+ * `shallowRef`. Subscriptions use synchronous `watch` callbacks so table store
34
+ * updates are visible to Vue render and computed work immediately.
35
+ */
29
36
  function vueReactivity() {
30
37
  return {
31
38
  createOptionsStore: true,
@@ -1 +1 @@
1
- {"version":3,"file":"reactivity.cjs","names":[],"sources":["../src/reactivity.ts"],"sourcesContent":["import { computed, shallowRef, watch } from 'vue'\nimport type {\n TableAtomOptions,\n TableReactivityBindings,\n} from '@tanstack/table-core/reactivity'\nimport type { Atom, Observer, ReadonlyAtom } from '@tanstack/vue-store'\nimport type { ComputedRef, ShallowRef } from 'vue'\n\nfunction observerToCallback<T>(\n observerOrNext: Observer<T> | ((value: T) => void),\n): (value: T) => void {\n return typeof observerOrNext === 'function'\n ? observerOrNext\n : (value) => observerOrNext.next?.(value)\n}\n\nfunction refToReadonlyAtom<T>(\n source: ComputedRef<T> | ShallowRef<T>,\n): ReadonlyAtom<T> {\n return Object.assign(source, {\n get: () => source.value,\n subscribe: ((observerOrNext: Observer<T> | ((value: T) => void)) => {\n const stop = watch(source, observerToCallback(observerOrNext), {\n flush: 'sync',\n })\n return { unsubscribe: stop }\n }) as ReadonlyAtom<T>['subscribe'],\n })\n}\n\nfunction refToWritableAtom<T>(source: ShallowRef<T>): Atom<T> {\n return Object.assign(source, {\n set: (updater: T | ((prevVal: T) => T)) => {\n source.value =\n typeof updater === 'function'\n ? (updater as (prevVal: T) => T)(source.value)\n : updater\n },\n get: () => source.value,\n subscribe: ((observerOrNext: Observer<T> | ((value: T) => void)) => {\n const stop = watch(source, observerToCallback(observerOrNext), {\n flush: 'sync',\n })\n return { unsubscribe: stop }\n }) as Atom<T>['subscribe'],\n })\n}\n\nexport function vueReactivity(): TableReactivityBindings {\n return {\n createOptionsStore: true,\n createReadonlyAtom: <T>(fn: () => T, _options?: TableAtomOptions<T>) => {\n return refToReadonlyAtom(computed(fn))\n },\n createWritableAtom: <T>(\n value: T,\n _options?: TableAtomOptions<T>,\n ): Atom<T> => {\n return refToWritableAtom(shallowRef(value) as ShallowRef<T>)\n },\n untrack: (fn) => fn(),\n batch: (fn) => fn(),\n }\n}\n"],"mappings":";;;AAQA,SAAS,mBACP,gBACoB;AACpB,QAAO,OAAO,mBAAmB,aAC7B,kBACC,UAAU;;gDAAe,uGAAO,MAAM;;;AAG7C,SAAS,kBACP,QACiB;AACjB,QAAO,OAAO,OAAO,QAAQ;EAC3B,WAAW,OAAO;EAClB,aAAa,mBAAuD;AAIlE,UAAO,EAAE,4BAHU,QAAQ,mBAAmB,eAAe,EAAE,EAC7D,OAAO,QACR,CACyB,EAAE;;EAE/B,CAAC;;AAGJ,SAAS,kBAAqB,QAAgC;AAC5D,QAAO,OAAO,OAAO,QAAQ;EAC3B,MAAM,YAAqC;AACzC,UAAO,QACL,OAAO,YAAY,aACd,QAA8B,OAAO,MAAM,GAC5C;;EAER,WAAW,OAAO;EAClB,aAAa,mBAAuD;AAIlE,UAAO,EAAE,4BAHU,QAAQ,mBAAmB,eAAe,EAAE,EAC7D,OAAO,QACR,CACyB,EAAE;;EAE/B,CAAC;;AAGJ,SAAgB,gBAAyC;AACvD,QAAO;EACL,oBAAoB;EACpB,qBAAwB,IAAa,aAAmC;AACtE,UAAO,oCAA2B,GAAG,CAAC;;EAExC,qBACE,OACA,aACY;AACZ,UAAO,sCAA6B,MAAM,CAAkB;;EAE9D,UAAU,OAAO,IAAI;EACrB,QAAQ,OAAO,IAAI;EACpB"}
1
+ {"version":3,"file":"reactivity.cjs","names":[],"sources":["../src/reactivity.ts"],"sourcesContent":["import { computed, shallowRef, watch } from 'vue'\nimport type {\n TableAtomOptions,\n TableReactivityBindings,\n} from '@tanstack/table-core/reactivity'\nimport type { Atom, Observer, ReadonlyAtom } from '@tanstack/vue-store'\nimport type { ComputedRef, ShallowRef } from 'vue'\n\nfunction observerToCallback<T>(\n observerOrNext: Observer<T> | ((value: T) => void),\n): (value: T) => void {\n return typeof observerOrNext === 'function'\n ? observerOrNext\n : (value) => observerOrNext.next?.(value)\n}\n\nfunction refToReadonlyAtom<T>(\n source: ComputedRef<T> | ShallowRef<T>,\n): ReadonlyAtom<T> {\n return Object.assign(source, {\n get: () => source.value,\n subscribe: ((observerOrNext: Observer<T> | ((value: T) => void)) => {\n const stop = watch(source, observerToCallback(observerOrNext), {\n flush: 'sync',\n })\n return { unsubscribe: stop }\n }) as ReadonlyAtom<T>['subscribe'],\n })\n}\n\nfunction refToWritableAtom<T>(source: ShallowRef<T>): Atom<T> {\n return Object.assign(source, {\n set: (updater: T | ((prevVal: T) => T)) => {\n source.value =\n typeof updater === 'function'\n ? (updater as (prevVal: T) => T)(source.value)\n : updater\n },\n get: () => source.value,\n subscribe: ((observerOrNext: Observer<T> | ((value: T) => void)) => {\n const stop = watch(source, observerToCallback(observerOrNext), {\n flush: 'sync',\n })\n return { unsubscribe: stop }\n }) as Atom<T>['subscribe'],\n })\n}\n\n/**\n * Creates the table-core reactivity bindings used by the Vue adapter.\n *\n * Readonly table atoms are backed by Vue `computed` refs and writable atoms by\n * `shallowRef`. Subscriptions use synchronous `watch` callbacks so table store\n * updates are visible to Vue render and computed work immediately.\n */\nexport function vueReactivity(): TableReactivityBindings {\n return {\n createOptionsStore: true,\n createReadonlyAtom: <T>(fn: () => T, _options?: TableAtomOptions<T>) => {\n return refToReadonlyAtom(computed(fn))\n },\n createWritableAtom: <T>(\n value: T,\n _options?: TableAtomOptions<T>,\n ): Atom<T> => {\n return refToWritableAtom(shallowRef(value) as ShallowRef<T>)\n },\n untrack: (fn) => fn(),\n batch: (fn) => fn(),\n }\n}\n"],"mappings":";;;AAQA,SAAS,mBACP,gBACoB;CACpB,OAAO,OAAO,mBAAmB,aAC7B,kBACC,UAAU;;gDAAe,uGAAO,MAAM;;;AAG7C,SAAS,kBACP,QACiB;CACjB,OAAO,OAAO,OAAO,QAAQ;EAC3B,WAAW,OAAO;EAClB,aAAa,mBAAuD;GAIlE,OAAO,EAAE,4BAHU,QAAQ,mBAAmB,eAAe,EAAE,EAC7D,OAAO,QACR,CACyB,EAAE;;EAE/B,CAAC;;AAGJ,SAAS,kBAAqB,QAAgC;CAC5D,OAAO,OAAO,OAAO,QAAQ;EAC3B,MAAM,YAAqC;GACzC,OAAO,QACL,OAAO,YAAY,aACd,QAA8B,OAAO,MAAM,GAC5C;;EAER,WAAW,OAAO;EAClB,aAAa,mBAAuD;GAIlE,OAAO,EAAE,4BAHU,QAAQ,mBAAmB,eAAe,EAAE,EAC7D,OAAO,QACR,CACyB,EAAE;;EAE/B,CAAC;;;;;;;;;AAUJ,SAAgB,gBAAyC;CACvD,OAAO;EACL,oBAAoB;EACpB,qBAAwB,IAAa,aAAmC;GACtE,OAAO,oCAA2B,GAAG,CAAC;;EAExC,qBACE,OACA,aACY;GACZ,OAAO,sCAA6B,MAAM,CAAkB;;EAE9D,UAAU,OAAO,IAAI;EACrB,QAAQ,OAAO,IAAI;EACpB"}
@@ -26,6 +26,13 @@ function refToWritableAtom(source) {
26
26
  })
27
27
  });
28
28
  }
29
+ /**
30
+ * Creates the table-core reactivity bindings used by the Vue adapter.
31
+ *
32
+ * Readonly table atoms are backed by Vue `computed` refs and writable atoms by
33
+ * `shallowRef`. Subscriptions use synchronous `watch` callbacks so table store
34
+ * updates are visible to Vue render and computed work immediately.
35
+ */
29
36
  function vueReactivity() {
30
37
  return {
31
38
  createOptionsStore: true,
@@ -1 +1 @@
1
- {"version":3,"file":"reactivity.js","names":[],"sources":["../src/reactivity.ts"],"sourcesContent":["import { computed, shallowRef, watch } from 'vue'\nimport type {\n TableAtomOptions,\n TableReactivityBindings,\n} from '@tanstack/table-core/reactivity'\nimport type { Atom, Observer, ReadonlyAtom } from '@tanstack/vue-store'\nimport type { ComputedRef, ShallowRef } from 'vue'\n\nfunction observerToCallback<T>(\n observerOrNext: Observer<T> | ((value: T) => void),\n): (value: T) => void {\n return typeof observerOrNext === 'function'\n ? observerOrNext\n : (value) => observerOrNext.next?.(value)\n}\n\nfunction refToReadonlyAtom<T>(\n source: ComputedRef<T> | ShallowRef<T>,\n): ReadonlyAtom<T> {\n return Object.assign(source, {\n get: () => source.value,\n subscribe: ((observerOrNext: Observer<T> | ((value: T) => void)) => {\n const stop = watch(source, observerToCallback(observerOrNext), {\n flush: 'sync',\n })\n return { unsubscribe: stop }\n }) as ReadonlyAtom<T>['subscribe'],\n })\n}\n\nfunction refToWritableAtom<T>(source: ShallowRef<T>): Atom<T> {\n return Object.assign(source, {\n set: (updater: T | ((prevVal: T) => T)) => {\n source.value =\n typeof updater === 'function'\n ? (updater as (prevVal: T) => T)(source.value)\n : updater\n },\n get: () => source.value,\n subscribe: ((observerOrNext: Observer<T> | ((value: T) => void)) => {\n const stop = watch(source, observerToCallback(observerOrNext), {\n flush: 'sync',\n })\n return { unsubscribe: stop }\n }) as Atom<T>['subscribe'],\n })\n}\n\nexport function vueReactivity(): TableReactivityBindings {\n return {\n createOptionsStore: true,\n createReadonlyAtom: <T>(fn: () => T, _options?: TableAtomOptions<T>) => {\n return refToReadonlyAtom(computed(fn))\n },\n createWritableAtom: <T>(\n value: T,\n _options?: TableAtomOptions<T>,\n ): Atom<T> => {\n return refToWritableAtom(shallowRef(value) as ShallowRef<T>)\n },\n untrack: (fn) => fn(),\n batch: (fn) => fn(),\n }\n}\n"],"mappings":";;;AAQA,SAAS,mBACP,gBACoB;AACpB,QAAO,OAAO,mBAAmB,aAC7B,kBACC,UAAU;;gDAAe,uGAAO,MAAM;;;AAG7C,SAAS,kBACP,QACiB;AACjB,QAAO,OAAO,OAAO,QAAQ;EAC3B,WAAW,OAAO;EAClB,aAAa,mBAAuD;AAIlE,UAAO,EAAE,aAHI,MAAM,QAAQ,mBAAmB,eAAe,EAAE,EAC7D,OAAO,QACR,CACyB,EAAE;;EAE/B,CAAC;;AAGJ,SAAS,kBAAqB,QAAgC;AAC5D,QAAO,OAAO,OAAO,QAAQ;EAC3B,MAAM,YAAqC;AACzC,UAAO,QACL,OAAO,YAAY,aACd,QAA8B,OAAO,MAAM,GAC5C;;EAER,WAAW,OAAO;EAClB,aAAa,mBAAuD;AAIlE,UAAO,EAAE,aAHI,MAAM,QAAQ,mBAAmB,eAAe,EAAE,EAC7D,OAAO,QACR,CACyB,EAAE;;EAE/B,CAAC;;AAGJ,SAAgB,gBAAyC;AACvD,QAAO;EACL,oBAAoB;EACpB,qBAAwB,IAAa,aAAmC;AACtE,UAAO,kBAAkB,SAAS,GAAG,CAAC;;EAExC,qBACE,OACA,aACY;AACZ,UAAO,kBAAkB,WAAW,MAAM,CAAkB;;EAE9D,UAAU,OAAO,IAAI;EACrB,QAAQ,OAAO,IAAI;EACpB"}
1
+ {"version":3,"file":"reactivity.js","names":[],"sources":["../src/reactivity.ts"],"sourcesContent":["import { computed, shallowRef, watch } from 'vue'\nimport type {\n TableAtomOptions,\n TableReactivityBindings,\n} from '@tanstack/table-core/reactivity'\nimport type { Atom, Observer, ReadonlyAtom } from '@tanstack/vue-store'\nimport type { ComputedRef, ShallowRef } from 'vue'\n\nfunction observerToCallback<T>(\n observerOrNext: Observer<T> | ((value: T) => void),\n): (value: T) => void {\n return typeof observerOrNext === 'function'\n ? observerOrNext\n : (value) => observerOrNext.next?.(value)\n}\n\nfunction refToReadonlyAtom<T>(\n source: ComputedRef<T> | ShallowRef<T>,\n): ReadonlyAtom<T> {\n return Object.assign(source, {\n get: () => source.value,\n subscribe: ((observerOrNext: Observer<T> | ((value: T) => void)) => {\n const stop = watch(source, observerToCallback(observerOrNext), {\n flush: 'sync',\n })\n return { unsubscribe: stop }\n }) as ReadonlyAtom<T>['subscribe'],\n })\n}\n\nfunction refToWritableAtom<T>(source: ShallowRef<T>): Atom<T> {\n return Object.assign(source, {\n set: (updater: T | ((prevVal: T) => T)) => {\n source.value =\n typeof updater === 'function'\n ? (updater as (prevVal: T) => T)(source.value)\n : updater\n },\n get: () => source.value,\n subscribe: ((observerOrNext: Observer<T> | ((value: T) => void)) => {\n const stop = watch(source, observerToCallback(observerOrNext), {\n flush: 'sync',\n })\n return { unsubscribe: stop }\n }) as Atom<T>['subscribe'],\n })\n}\n\n/**\n * Creates the table-core reactivity bindings used by the Vue adapter.\n *\n * Readonly table atoms are backed by Vue `computed` refs and writable atoms by\n * `shallowRef`. Subscriptions use synchronous `watch` callbacks so table store\n * updates are visible to Vue render and computed work immediately.\n */\nexport function vueReactivity(): TableReactivityBindings {\n return {\n createOptionsStore: true,\n createReadonlyAtom: <T>(fn: () => T, _options?: TableAtomOptions<T>) => {\n return refToReadonlyAtom(computed(fn))\n },\n createWritableAtom: <T>(\n value: T,\n _options?: TableAtomOptions<T>,\n ): Atom<T> => {\n return refToWritableAtom(shallowRef(value) as ShallowRef<T>)\n },\n untrack: (fn) => fn(),\n batch: (fn) => fn(),\n }\n}\n"],"mappings":";;;AAQA,SAAS,mBACP,gBACoB;CACpB,OAAO,OAAO,mBAAmB,aAC7B,kBACC,UAAU;;gDAAe,uGAAO,MAAM;;;AAG7C,SAAS,kBACP,QACiB;CACjB,OAAO,OAAO,OAAO,QAAQ;EAC3B,WAAW,OAAO;EAClB,aAAa,mBAAuD;GAIlE,OAAO,EAAE,aAHI,MAAM,QAAQ,mBAAmB,eAAe,EAAE,EAC7D,OAAO,QACR,CACyB,EAAE;;EAE/B,CAAC;;AAGJ,SAAS,kBAAqB,QAAgC;CAC5D,OAAO,OAAO,OAAO,QAAQ;EAC3B,MAAM,YAAqC;GACzC,OAAO,QACL,OAAO,YAAY,aACd,QAA8B,OAAO,MAAM,GAC5C;;EAER,WAAW,OAAO;EAClB,aAAa,mBAAuD;GAIlE,OAAO,EAAE,aAHI,MAAM,QAAQ,mBAAmB,eAAe,EAAE,EAC7D,OAAO,QACR,CACyB,EAAE;;EAE/B,CAAC;;;;;;;;;AAUJ,SAAgB,gBAAyC;CACvD,OAAO;EACL,oBAAoB;EACpB,qBAAwB,IAAa,aAAmC;GACtE,OAAO,kBAAkB,SAAS,GAAG,CAAC;;EAExC,qBACE,OACA,aACY;GACZ,OAAO,kBAAkB,WAAW,MAAM,CAAkB;;EAE9D,UAAU,OAAO,IAAI;EACrB,QAAQ,OAAO,IAAI;EACpB"}
package/dist/useTable.cjs CHANGED
@@ -13,6 +13,29 @@ function getOptionsWithReactiveValues(options) {
13
13
  function getReactiveOptionDeps(options) {
14
14
  return Object.keys(options).map((key) => (0, vue.unref)(options[key]));
15
15
  }
16
+ /**
17
+ * Creates a Vue table instance backed by Vue-aware TanStack Store atoms.
18
+ *
19
+ * Table options may contain Vue refs or computed values. The adapter unwraps
20
+ * those reactive inputs, watches them with synchronous flushing, and keeps the
21
+ * table options in sync. The optional selector projects from `table.store` and
22
+ * exposes the selected value on `table.state`.
23
+ *
24
+ * @example
25
+ * ```ts
26
+ * const table = useTable(
27
+ * {
28
+ * _features,
29
+ * _rowModels: {},
30
+ * columns,
31
+ * data,
32
+ * },
33
+ * (state) => ({ pagination: state.pagination }),
34
+ * )
35
+ *
36
+ * table.state.pagination
37
+ * ```
38
+ */
16
39
  function useTable(tableOptions, selector) {
17
40
  const syncTableOptions = (table, options) => {
18
41
  table.setOptions(() => getOptionsWithReactiveValues(options));
@@ -1 +1 @@
1
- {"version":3,"file":"useTable.cjs","names":["mergeProxy","vueReactivity","shallow"],"sources":["../src/useTable.ts"],"sourcesContent":["import { unref, watch } from 'vue'\nimport { constructTable } from '@tanstack/table-core'\nimport { shallow, useSelector } from '@tanstack/vue-store'\nimport { mergeProxy } from './merge-proxy'\nimport { vueReactivity } from './reactivity'\nimport type {\n Atom,\n ReadonlyAtom,\n ReadonlyStore,\n Store,\n} from '@tanstack/vue-store'\nimport type {\n NoInfer,\n RowData,\n Table,\n TableFeatures,\n TableOptions,\n TableState,\n} from '@tanstack/table-core'\nimport type { MaybeRef, VNode } from 'vue'\n\nexport type SubscribeSource<TValue> =\n | Atom<TValue>\n | ReadonlyAtom<TValue>\n | Store<TValue>\n | ReadonlyStore<TValue>\n\nexport type TableOptionsWithReactiveData<\n TFeatures extends TableFeatures,\n TData extends RowData,\n> = {\n [K in keyof TableOptions<TFeatures, TData>]: K extends 'data'\n ? MaybeRef<ReadonlyArray<TData>>\n : MaybeRef<TableOptions<TFeatures, TData>[K]>\n}\n\nfunction getOptionsWithReactiveValues<\n TFeatures extends TableFeatures,\n TData extends RowData,\n>(options: TableOptionsWithReactiveData<TFeatures, TData>) {\n const resolvedOptions: Record<string, unknown> = {}\n\n for (const key of Object.keys(options)) {\n resolvedOptions[key] = unref(\n options[key as keyof TableOptionsWithReactiveData<TFeatures, TData>],\n )\n }\n\n return mergeProxy(options, resolvedOptions)\n}\n\nfunction getReactiveOptionDeps<\n TFeatures extends TableFeatures,\n TData extends RowData,\n>(options: TableOptionsWithReactiveData<TFeatures, TData>) {\n return Object.keys(options).map((key) =>\n unref(options[key as keyof TableOptionsWithReactiveData<TFeatures, TData>]),\n )\n}\n\nexport type VueTable<\n TFeatures extends TableFeatures,\n TData extends RowData,\n TSelected = TableState<TFeatures>,\n> = Table<TFeatures, TData> & {\n /**\n * Store mode: `selector` required. Source mode: pass `source` (atom or store); omit\n * `selector` for the whole value (identity), or pass `selector` to project. Split\n * overloads so source-only infers `TSourceValue` for `children` (see React `Subscribe`).\n */\n Subscribe: {\n <TSourceValue>(props: {\n source: SubscribeSource<TSourceValue>\n selector?: undefined\n children:\n | ((state: Readonly<TSourceValue>) => VNode | Array<VNode>)\n | VNode\n | Array<VNode>\n }): VNode | Array<VNode>\n <TSourceValue, TSubSelected>(props: {\n source: SubscribeSource<TSourceValue>\n selector: (state: TSourceValue) => TSubSelected\n children:\n | ((state: Readonly<TSubSelected>) => VNode | Array<VNode>)\n | VNode\n | Array<VNode>\n }): VNode | Array<VNode>\n <TSubSelected>(props: {\n selector: (state: NoInfer<TableState<TFeatures>>) => TSubSelected\n children:\n | ((state: Readonly<TSubSelected>) => VNode | Array<VNode>)\n | VNode\n | Array<VNode>\n }): VNode | Array<VNode>\n }\n /**\n * The selected state of the table. This state may not match the structure of `table.store.state` because it is selected by the `selector` function that you pass as the 2nd argument to `useTable`.\n *\n * @example\n * const table = useTable(options, (state) => ({ globalFilter: state.globalFilter })) // only globalFilter is part of the selected state\n *\n * console.log(table.state.globalFilter)\n */\n readonly state: Readonly<TSelected>\n}\n\nexport function useTable<\n TFeatures extends TableFeatures,\n TData extends RowData,\n TSelected = TableState<TFeatures>,\n>(\n tableOptions:\n | TableOptions<TFeatures, TData>\n | TableOptionsWithReactiveData<TFeatures, TData>,\n selector?: (state: TableState<TFeatures>) => TSelected,\n): VueTable<TFeatures, TData, TSelected> {\n const syncTableOptions = (\n table: Table<TFeatures, TData>,\n options: TableOptionsWithReactiveData<TFeatures, TData>,\n ) => {\n table.setOptions(\n () =>\n getOptionsWithReactiveValues(options) as TableOptions<TFeatures, TData>,\n )\n }\n\n const mergedOptions = {\n ...tableOptions,\n _features: {\n coreReativityFeature: vueReactivity(),\n ...tableOptions._features,\n },\n }\n\n const resolvedOptions = mergeProxy(\n getOptionsWithReactiveValues(\n mergedOptions as TableOptionsWithReactiveData<TFeatures, TData>,\n ),\n {\n // Remove state and onStateChange - store handles it internally\n mergeOptions: (\n defaultOptions: TableOptions<TFeatures, TData>,\n newOptions: Partial<TableOptions<TFeatures, TData>>,\n ) => {\n return mergeProxy(defaultOptions, newOptions)\n },\n },\n ) as TableOptions<TFeatures, TData>\n\n const table = constructTable(resolvedOptions) as VueTable<\n TFeatures,\n TData,\n TSelected\n >\n\n watch(\n () =>\n getReactiveOptionDeps(\n mergedOptions as TableOptionsWithReactiveData<TFeatures, TData>,\n ),\n () => {\n syncTableOptions(table, mergedOptions)\n },\n { immediate: true },\n )\n\n watch(\n () => {\n const controlledState = unref(tableOptions.state) as\n | Record<string, unknown>\n | undefined\n const controlledAtoms = unref(tableOptions.atoms) as\n | Record<string, unknown>\n | undefined\n\n if (!controlledState) {\n return []\n }\n\n const controlledValues: Array<unknown> = []\n\n for (const key of Object.keys(table.initialState)) {\n if (!(key in controlledState) || controlledAtoms?.[key] !== undefined) {\n continue\n }\n\n // Reading only controlled state slices here lets Vue subscribe to\n // getters/computed values that are passed through `options.state`.\n controlledValues.push(controlledState[key])\n }\n\n return controlledValues\n },\n (controlledValues) => {\n if (controlledValues.length > 0) {\n syncTableOptions(table, mergedOptions)\n }\n },\n { immediate: true },\n )\n\n table.Subscribe = ((props: {\n source?: SubscribeSource<unknown>\n selector?: ((state: unknown) => unknown) | undefined\n children:\n | ((state: Readonly<unknown>) => VNode | Array<VNode>)\n | VNode\n | Array<VNode>\n }) => {\n const source = props.source ?? table.store\n const selected = useSelector(source as never, props.selector as never, {\n compare: shallow,\n })\n if (typeof props.children === 'function') {\n return props.children(selected.value as Readonly<unknown>)\n }\n return props.children\n }) as VueTable<TFeatures, TData, TSelected>['Subscribe']\n\n const stateStore = useSelector(table.store, selector)\n\n return {\n ...table,\n get state() {\n return stateStore.value\n },\n }\n}\n"],"mappings":";;;;;;;AAoCA,SAAS,6BAGP,SAAyD;CACzD,MAAM,kBAA2C,EAAE;AAEnD,MAAK,MAAM,OAAO,OAAO,KAAK,QAAQ,CACpC,iBAAgB,sBACd,QAAQ,KACT;AAGH,QAAOA,+BAAW,SAAS,gBAAgB;;AAG7C,SAAS,sBAGP,SAAyD;AACzD,QAAO,OAAO,KAAK,QAAQ,CAAC,KAAK,uBACzB,QAAQ,KAA6D,CAC5E;;AAiDH,SAAgB,SAKd,cAGA,UACuC;CACvC,MAAM,oBACJ,OACA,YACG;AACH,QAAM,iBAEF,6BAA6B,QAAQ,CACxC;;CAGH,MAAM,gBAAgB;EACpB,GAAG;EACH,WAAW;GACT,sBAAsBC,kCAAe;GACrC,GAAG,aAAa;GACjB;EACF;CAiBD,MAAM,iDAfkBD,+BACtB,6BACE,cACD,EACD,EAEE,eACE,gBACA,eACG;AACH,SAAOA,+BAAW,gBAAgB,WAAW;IAEhD,CAGyC,CAAC;AAM7C,sBAEI,sBACE,cACD,QACG;AACJ,mBAAiB,OAAO,cAAc;IAExC,EAAE,WAAW,MAAM,CACpB;AAED,sBACQ;EACJ,MAAM,iCAAwB,aAAa,MAAM;EAGjD,MAAM,iCAAwB,aAAa,MAAM;AAIjD,MAAI,CAAC,gBACH,QAAO,EAAE;EAGX,MAAM,mBAAmC,EAAE;AAE3C,OAAK,MAAM,OAAO,OAAO,KAAK,MAAM,aAAa,EAAE;AACjD,OAAI,EAAE,OAAO,uFAAoB,gBAAkB,UAAS,OAC1D;AAKF,oBAAiB,KAAK,gBAAgB,KAAK;;AAG7C,SAAO;KAER,qBAAqB;AACpB,MAAI,iBAAiB,SAAS,EAC5B,kBAAiB,OAAO,cAAc;IAG1C,EAAE,WAAW,MAAM,CACpB;AAED,OAAM,cAAc,UAOd;EAEJ,MAAM,gDADS,MAAM,UAAU,MAAM,OACS,MAAM,UAAmB,EACrE,SAASE,6BACV,CAAC;AACF,MAAI,OAAO,MAAM,aAAa,WAC5B,QAAO,MAAM,SAAS,SAAS,MAA2B;AAE5D,SAAO,MAAM;;CAGf,MAAM,kDAAyB,MAAM,OAAO,SAAS;AAErD,QAAO;EACL,GAAG;EACH,IAAI,QAAQ;AACV,UAAO,WAAW;;EAErB"}
1
+ {"version":3,"file":"useTable.cjs","names":["mergeProxy","vueReactivity","shallow"],"sources":["../src/useTable.ts"],"sourcesContent":["import { unref, watch } from 'vue'\nimport { constructTable } from '@tanstack/table-core'\nimport { shallow, useSelector } from '@tanstack/vue-store'\nimport { mergeProxy } from './merge-proxy'\nimport { vueReactivity } from './reactivity'\nimport type {\n Atom,\n ReadonlyAtom,\n ReadonlyStore,\n Store,\n} from '@tanstack/vue-store'\nimport type {\n NoInfer,\n RowData,\n Table,\n TableFeatures,\n TableOptions,\n TableState,\n} from '@tanstack/table-core'\nimport type { MaybeRef, VNode } from 'vue'\n\nexport type SubscribeSource<TValue> =\n | Atom<TValue>\n | ReadonlyAtom<TValue>\n | Store<TValue>\n | ReadonlyStore<TValue>\n\nexport type TableOptionsWithReactiveData<\n TFeatures extends TableFeatures,\n TData extends RowData,\n> = {\n [K in keyof TableOptions<TFeatures, TData>]: K extends 'data'\n ? MaybeRef<ReadonlyArray<TData>>\n : MaybeRef<TableOptions<TFeatures, TData>[K]>\n}\n\nfunction getOptionsWithReactiveValues<\n TFeatures extends TableFeatures,\n TData extends RowData,\n>(options: TableOptionsWithReactiveData<TFeatures, TData>) {\n const resolvedOptions: Record<string, unknown> = {}\n\n for (const key of Object.keys(options)) {\n resolvedOptions[key] = unref(\n options[key as keyof TableOptionsWithReactiveData<TFeatures, TData>],\n )\n }\n\n return mergeProxy(options, resolvedOptions)\n}\n\nfunction getReactiveOptionDeps<\n TFeatures extends TableFeatures,\n TData extends RowData,\n>(options: TableOptionsWithReactiveData<TFeatures, TData>) {\n return Object.keys(options).map((key) =>\n unref(options[key as keyof TableOptionsWithReactiveData<TFeatures, TData>]),\n )\n}\n\nexport type VueTable<\n TFeatures extends TableFeatures,\n TData extends RowData,\n TSelected = TableState<TFeatures>,\n> = Table<TFeatures, TData> & {\n /**\n * Store mode: `selector` required. Source mode: pass `source` (atom or store); omit\n * `selector` for the whole value (identity), or pass `selector` to project. Split\n * overloads so source-only infers `TSourceValue` for `children` (see React `Subscribe`).\n */\n Subscribe: {\n <TSourceValue>(props: {\n source: SubscribeSource<TSourceValue>\n selector?: undefined\n children:\n | ((state: Readonly<TSourceValue>) => VNode | Array<VNode>)\n | VNode\n | Array<VNode>\n }): VNode | Array<VNode>\n <TSourceValue, TSubSelected>(props: {\n source: SubscribeSource<TSourceValue>\n selector: (state: TSourceValue) => TSubSelected\n children:\n | ((state: Readonly<TSubSelected>) => VNode | Array<VNode>)\n | VNode\n | Array<VNode>\n }): VNode | Array<VNode>\n <TSubSelected>(props: {\n selector: (state: NoInfer<TableState<TFeatures>>) => TSubSelected\n children:\n | ((state: Readonly<TSubSelected>) => VNode | Array<VNode>)\n | VNode\n | Array<VNode>\n }): VNode | Array<VNode>\n }\n /**\n * The selected state of the table. This state may not match the structure of `table.store.state` because it is selected by the `selector` function that you pass as the 2nd argument to `useTable`.\n *\n * @example\n * const table = useTable(options, (state) => ({ globalFilter: state.globalFilter })) // only globalFilter is part of the selected state\n *\n * console.log(table.state.globalFilter)\n */\n readonly state: Readonly<TSelected>\n}\n\n/**\n * Creates a Vue table instance backed by Vue-aware TanStack Store atoms.\n *\n * Table options may contain Vue refs or computed values. The adapter unwraps\n * those reactive inputs, watches them with synchronous flushing, and keeps the\n * table options in sync. The optional selector projects from `table.store` and\n * exposes the selected value on `table.state`.\n *\n * @example\n * ```ts\n * const table = useTable(\n * {\n * _features,\n * _rowModels: {},\n * columns,\n * data,\n * },\n * (state) => ({ pagination: state.pagination }),\n * )\n *\n * table.state.pagination\n * ```\n */\nexport function useTable<\n TFeatures extends TableFeatures,\n TData extends RowData,\n TSelected = TableState<TFeatures>,\n>(\n tableOptions:\n | TableOptions<TFeatures, TData>\n | TableOptionsWithReactiveData<TFeatures, TData>,\n selector?: (state: TableState<TFeatures>) => TSelected,\n): VueTable<TFeatures, TData, TSelected> {\n const syncTableOptions = (\n table: Table<TFeatures, TData>,\n options: TableOptionsWithReactiveData<TFeatures, TData>,\n ) => {\n table.setOptions(\n () =>\n getOptionsWithReactiveValues(options) as TableOptions<TFeatures, TData>,\n )\n }\n\n const mergedOptions = {\n ...tableOptions,\n _features: {\n coreReativityFeature: vueReactivity(),\n ...tableOptions._features,\n },\n }\n\n const resolvedOptions = mergeProxy(\n getOptionsWithReactiveValues(\n mergedOptions as TableOptionsWithReactiveData<TFeatures, TData>,\n ),\n {\n // Remove state and onStateChange - store handles it internally\n mergeOptions: (\n defaultOptions: TableOptions<TFeatures, TData>,\n newOptions: Partial<TableOptions<TFeatures, TData>>,\n ) => {\n return mergeProxy(defaultOptions, newOptions)\n },\n },\n ) as TableOptions<TFeatures, TData>\n\n const table = constructTable(resolvedOptions) as VueTable<\n TFeatures,\n TData,\n TSelected\n >\n\n watch(\n () =>\n getReactiveOptionDeps(\n mergedOptions as TableOptionsWithReactiveData<TFeatures, TData>,\n ),\n () => {\n syncTableOptions(table, mergedOptions)\n },\n { immediate: true },\n )\n\n watch(\n () => {\n const controlledState = unref(tableOptions.state) as\n | Record<string, unknown>\n | undefined\n const controlledAtoms = unref(tableOptions.atoms) as\n | Record<string, unknown>\n | undefined\n\n if (!controlledState) {\n return []\n }\n\n const controlledValues: Array<unknown> = []\n\n for (const key of Object.keys(table.initialState)) {\n if (!(key in controlledState) || controlledAtoms?.[key] !== undefined) {\n continue\n }\n\n // Reading only controlled state slices here lets Vue subscribe to\n // getters/computed values that are passed through `options.state`.\n controlledValues.push(controlledState[key])\n }\n\n return controlledValues\n },\n (controlledValues) => {\n if (controlledValues.length > 0) {\n syncTableOptions(table, mergedOptions)\n }\n },\n { immediate: true },\n )\n\n table.Subscribe = ((props: {\n source?: SubscribeSource<unknown>\n selector?: ((state: unknown) => unknown) | undefined\n children:\n | ((state: Readonly<unknown>) => VNode | Array<VNode>)\n | VNode\n | Array<VNode>\n }) => {\n const source = props.source ?? table.store\n const selected = useSelector(source as never, props.selector as never, {\n compare: shallow,\n })\n if (typeof props.children === 'function') {\n return props.children(selected.value as Readonly<unknown>)\n }\n return props.children\n }) as VueTable<TFeatures, TData, TSelected>['Subscribe']\n\n const stateStore = useSelector(table.store, selector)\n\n return {\n ...table,\n get state() {\n return stateStore.value\n },\n }\n}\n"],"mappings":";;;;;;;AAoCA,SAAS,6BAGP,SAAyD;CACzD,MAAM,kBAA2C,EAAE;CAEnD,KAAK,MAAM,OAAO,OAAO,KAAK,QAAQ,EACpC,gBAAgB,sBACd,QAAQ,KACT;CAGH,OAAOA,+BAAW,SAAS,gBAAgB;;AAG7C,SAAS,sBAGP,SAAyD;CACzD,OAAO,OAAO,KAAK,QAAQ,CAAC,KAAK,uBACzB,QAAQ,KAA6D,CAC5E;;;;;;;;;;;;;;;;;;;;;;;;;AAwEH,SAAgB,SAKd,cAGA,UACuC;CACvC,MAAM,oBACJ,OACA,YACG;EACH,MAAM,iBAEF,6BAA6B,QAAQ,CACxC;;CAGH,MAAM,gBAAgB;EACpB,GAAG;EACH,WAAW;GACT,sBAAsBC,kCAAe;GACrC,GAAG,aAAa;GACjB;EACF;CAiBD,MAAM,iDAfkBD,+BACtB,6BACE,cACD,EACD,EAEE,eACE,gBACA,eACG;EACH,OAAOA,+BAAW,gBAAgB,WAAW;IAEhD,CAGyC,CAAC;CAM7C,qBAEI,sBACE,cACD,QACG;EACJ,iBAAiB,OAAO,cAAc;IAExC,EAAE,WAAW,MAAM,CACpB;CAED,qBACQ;EACJ,MAAM,iCAAwB,aAAa,MAAM;EAGjD,MAAM,iCAAwB,aAAa,MAAM;EAIjD,IAAI,CAAC,iBACH,OAAO,EAAE;EAGX,MAAM,mBAAmC,EAAE;EAE3C,KAAK,MAAM,OAAO,OAAO,KAAK,MAAM,aAAa,EAAE;GACjD,IAAI,EAAE,OAAO,uFAAoB,gBAAkB,UAAS,QAC1D;GAKF,iBAAiB,KAAK,gBAAgB,KAAK;;EAG7C,OAAO;KAER,qBAAqB;EACpB,IAAI,iBAAiB,SAAS,GAC5B,iBAAiB,OAAO,cAAc;IAG1C,EAAE,WAAW,MAAM,CACpB;CAED,MAAM,cAAc,UAOd;EAEJ,MAAM,gDADS,MAAM,UAAU,MAAM,OACS,MAAM,UAAmB,EACrE,SAASE,6BACV,CAAC;EACF,IAAI,OAAO,MAAM,aAAa,YAC5B,OAAO,MAAM,SAAS,SAAS,MAA2B;EAE5D,OAAO,MAAM;;CAGf,MAAM,kDAAyB,MAAM,OAAO,SAAS;CAErD,OAAO;EACL,GAAG;EACH,IAAI,QAAQ;GACV,OAAO,WAAW;;EAErB"}
@@ -37,6 +37,29 @@ type VueTable<TFeatures extends TableFeatures, TData extends RowData, TSelected
37
37
  */
38
38
  readonly state: Readonly<TSelected>;
39
39
  };
40
+ /**
41
+ * Creates a Vue table instance backed by Vue-aware TanStack Store atoms.
42
+ *
43
+ * Table options may contain Vue refs or computed values. The adapter unwraps
44
+ * those reactive inputs, watches them with synchronous flushing, and keeps the
45
+ * table options in sync. The optional selector projects from `table.store` and
46
+ * exposes the selected value on `table.state`.
47
+ *
48
+ * @example
49
+ * ```ts
50
+ * const table = useTable(
51
+ * {
52
+ * _features,
53
+ * _rowModels: {},
54
+ * columns,
55
+ * data,
56
+ * },
57
+ * (state) => ({ pagination: state.pagination }),
58
+ * )
59
+ *
60
+ * table.state.pagination
61
+ * ```
62
+ */
40
63
  declare function useTable<TFeatures extends TableFeatures, TData extends RowData, TSelected = TableState<TFeatures>>(tableOptions: TableOptions<TFeatures, TData> | TableOptionsWithReactiveData<TFeatures, TData>, selector?: (state: TableState<TFeatures>) => TSelected): VueTable<TFeatures, TData, TSelected>;
41
64
  //#endregion
42
65
  export { SubscribeSource, TableOptionsWithReactiveData, VueTable, useTable };
@@ -37,6 +37,29 @@ type VueTable<TFeatures extends TableFeatures, TData extends RowData, TSelected
37
37
  */
38
38
  readonly state: Readonly<TSelected>;
39
39
  };
40
+ /**
41
+ * Creates a Vue table instance backed by Vue-aware TanStack Store atoms.
42
+ *
43
+ * Table options may contain Vue refs or computed values. The adapter unwraps
44
+ * those reactive inputs, watches them with synchronous flushing, and keeps the
45
+ * table options in sync. The optional selector projects from `table.store` and
46
+ * exposes the selected value on `table.state`.
47
+ *
48
+ * @example
49
+ * ```ts
50
+ * const table = useTable(
51
+ * {
52
+ * _features,
53
+ * _rowModels: {},
54
+ * columns,
55
+ * data,
56
+ * },
57
+ * (state) => ({ pagination: state.pagination }),
58
+ * )
59
+ *
60
+ * table.state.pagination
61
+ * ```
62
+ */
40
63
  declare function useTable<TFeatures extends TableFeatures, TData extends RowData, TSelected = TableState<TFeatures>>(tableOptions: TableOptions<TFeatures, TData> | TableOptionsWithReactiveData<TFeatures, TData>, selector?: (state: TableState<TFeatures>) => TSelected): VueTable<TFeatures, TData, TSelected>;
41
64
  //#endregion
42
65
  export { SubscribeSource, TableOptionsWithReactiveData, VueTable, useTable };
package/dist/useTable.js CHANGED
@@ -13,6 +13,29 @@ function getOptionsWithReactiveValues(options) {
13
13
  function getReactiveOptionDeps(options) {
14
14
  return Object.keys(options).map((key) => unref(options[key]));
15
15
  }
16
+ /**
17
+ * Creates a Vue table instance backed by Vue-aware TanStack Store atoms.
18
+ *
19
+ * Table options may contain Vue refs or computed values. The adapter unwraps
20
+ * those reactive inputs, watches them with synchronous flushing, and keeps the
21
+ * table options in sync. The optional selector projects from `table.store` and
22
+ * exposes the selected value on `table.state`.
23
+ *
24
+ * @example
25
+ * ```ts
26
+ * const table = useTable(
27
+ * {
28
+ * _features,
29
+ * _rowModels: {},
30
+ * columns,
31
+ * data,
32
+ * },
33
+ * (state) => ({ pagination: state.pagination }),
34
+ * )
35
+ *
36
+ * table.state.pagination
37
+ * ```
38
+ */
16
39
  function useTable(tableOptions, selector) {
17
40
  const syncTableOptions = (table, options) => {
18
41
  table.setOptions(() => getOptionsWithReactiveValues(options));
@@ -1 +1 @@
1
- {"version":3,"file":"useTable.js","names":[],"sources":["../src/useTable.ts"],"sourcesContent":["import { unref, watch } from 'vue'\nimport { constructTable } from '@tanstack/table-core'\nimport { shallow, useSelector } from '@tanstack/vue-store'\nimport { mergeProxy } from './merge-proxy'\nimport { vueReactivity } from './reactivity'\nimport type {\n Atom,\n ReadonlyAtom,\n ReadonlyStore,\n Store,\n} from '@tanstack/vue-store'\nimport type {\n NoInfer,\n RowData,\n Table,\n TableFeatures,\n TableOptions,\n TableState,\n} from '@tanstack/table-core'\nimport type { MaybeRef, VNode } from 'vue'\n\nexport type SubscribeSource<TValue> =\n | Atom<TValue>\n | ReadonlyAtom<TValue>\n | Store<TValue>\n | ReadonlyStore<TValue>\n\nexport type TableOptionsWithReactiveData<\n TFeatures extends TableFeatures,\n TData extends RowData,\n> = {\n [K in keyof TableOptions<TFeatures, TData>]: K extends 'data'\n ? MaybeRef<ReadonlyArray<TData>>\n : MaybeRef<TableOptions<TFeatures, TData>[K]>\n}\n\nfunction getOptionsWithReactiveValues<\n TFeatures extends TableFeatures,\n TData extends RowData,\n>(options: TableOptionsWithReactiveData<TFeatures, TData>) {\n const resolvedOptions: Record<string, unknown> = {}\n\n for (const key of Object.keys(options)) {\n resolvedOptions[key] = unref(\n options[key as keyof TableOptionsWithReactiveData<TFeatures, TData>],\n )\n }\n\n return mergeProxy(options, resolvedOptions)\n}\n\nfunction getReactiveOptionDeps<\n TFeatures extends TableFeatures,\n TData extends RowData,\n>(options: TableOptionsWithReactiveData<TFeatures, TData>) {\n return Object.keys(options).map((key) =>\n unref(options[key as keyof TableOptionsWithReactiveData<TFeatures, TData>]),\n )\n}\n\nexport type VueTable<\n TFeatures extends TableFeatures,\n TData extends RowData,\n TSelected = TableState<TFeatures>,\n> = Table<TFeatures, TData> & {\n /**\n * Store mode: `selector` required. Source mode: pass `source` (atom or store); omit\n * `selector` for the whole value (identity), or pass `selector` to project. Split\n * overloads so source-only infers `TSourceValue` for `children` (see React `Subscribe`).\n */\n Subscribe: {\n <TSourceValue>(props: {\n source: SubscribeSource<TSourceValue>\n selector?: undefined\n children:\n | ((state: Readonly<TSourceValue>) => VNode | Array<VNode>)\n | VNode\n | Array<VNode>\n }): VNode | Array<VNode>\n <TSourceValue, TSubSelected>(props: {\n source: SubscribeSource<TSourceValue>\n selector: (state: TSourceValue) => TSubSelected\n children:\n | ((state: Readonly<TSubSelected>) => VNode | Array<VNode>)\n | VNode\n | Array<VNode>\n }): VNode | Array<VNode>\n <TSubSelected>(props: {\n selector: (state: NoInfer<TableState<TFeatures>>) => TSubSelected\n children:\n | ((state: Readonly<TSubSelected>) => VNode | Array<VNode>)\n | VNode\n | Array<VNode>\n }): VNode | Array<VNode>\n }\n /**\n * The selected state of the table. This state may not match the structure of `table.store.state` because it is selected by the `selector` function that you pass as the 2nd argument to `useTable`.\n *\n * @example\n * const table = useTable(options, (state) => ({ globalFilter: state.globalFilter })) // only globalFilter is part of the selected state\n *\n * console.log(table.state.globalFilter)\n */\n readonly state: Readonly<TSelected>\n}\n\nexport function useTable<\n TFeatures extends TableFeatures,\n TData extends RowData,\n TSelected = TableState<TFeatures>,\n>(\n tableOptions:\n | TableOptions<TFeatures, TData>\n | TableOptionsWithReactiveData<TFeatures, TData>,\n selector?: (state: TableState<TFeatures>) => TSelected,\n): VueTable<TFeatures, TData, TSelected> {\n const syncTableOptions = (\n table: Table<TFeatures, TData>,\n options: TableOptionsWithReactiveData<TFeatures, TData>,\n ) => {\n table.setOptions(\n () =>\n getOptionsWithReactiveValues(options) as TableOptions<TFeatures, TData>,\n )\n }\n\n const mergedOptions = {\n ...tableOptions,\n _features: {\n coreReativityFeature: vueReactivity(),\n ...tableOptions._features,\n },\n }\n\n const resolvedOptions = mergeProxy(\n getOptionsWithReactiveValues(\n mergedOptions as TableOptionsWithReactiveData<TFeatures, TData>,\n ),\n {\n // Remove state and onStateChange - store handles it internally\n mergeOptions: (\n defaultOptions: TableOptions<TFeatures, TData>,\n newOptions: Partial<TableOptions<TFeatures, TData>>,\n ) => {\n return mergeProxy(defaultOptions, newOptions)\n },\n },\n ) as TableOptions<TFeatures, TData>\n\n const table = constructTable(resolvedOptions) as VueTable<\n TFeatures,\n TData,\n TSelected\n >\n\n watch(\n () =>\n getReactiveOptionDeps(\n mergedOptions as TableOptionsWithReactiveData<TFeatures, TData>,\n ),\n () => {\n syncTableOptions(table, mergedOptions)\n },\n { immediate: true },\n )\n\n watch(\n () => {\n const controlledState = unref(tableOptions.state) as\n | Record<string, unknown>\n | undefined\n const controlledAtoms = unref(tableOptions.atoms) as\n | Record<string, unknown>\n | undefined\n\n if (!controlledState) {\n return []\n }\n\n const controlledValues: Array<unknown> = []\n\n for (const key of Object.keys(table.initialState)) {\n if (!(key in controlledState) || controlledAtoms?.[key] !== undefined) {\n continue\n }\n\n // Reading only controlled state slices here lets Vue subscribe to\n // getters/computed values that are passed through `options.state`.\n controlledValues.push(controlledState[key])\n }\n\n return controlledValues\n },\n (controlledValues) => {\n if (controlledValues.length > 0) {\n syncTableOptions(table, mergedOptions)\n }\n },\n { immediate: true },\n )\n\n table.Subscribe = ((props: {\n source?: SubscribeSource<unknown>\n selector?: ((state: unknown) => unknown) | undefined\n children:\n | ((state: Readonly<unknown>) => VNode | Array<VNode>)\n | VNode\n | Array<VNode>\n }) => {\n const source = props.source ?? table.store\n const selected = useSelector(source as never, props.selector as never, {\n compare: shallow,\n })\n if (typeof props.children === 'function') {\n return props.children(selected.value as Readonly<unknown>)\n }\n return props.children\n }) as VueTable<TFeatures, TData, TSelected>['Subscribe']\n\n const stateStore = useSelector(table.store, selector)\n\n return {\n ...table,\n get state() {\n return stateStore.value\n },\n }\n}\n"],"mappings":";;;;;;;AAoCA,SAAS,6BAGP,SAAyD;CACzD,MAAM,kBAA2C,EAAE;AAEnD,MAAK,MAAM,OAAO,OAAO,KAAK,QAAQ,CACpC,iBAAgB,OAAO,MACrB,QAAQ,KACT;AAGH,QAAO,WAAW,SAAS,gBAAgB;;AAG7C,SAAS,sBAGP,SAAyD;AACzD,QAAO,OAAO,KAAK,QAAQ,CAAC,KAAK,QAC/B,MAAM,QAAQ,KAA6D,CAC5E;;AAiDH,SAAgB,SAKd,cAGA,UACuC;CACvC,MAAM,oBACJ,OACA,YACG;AACH,QAAM,iBAEF,6BAA6B,QAAQ,CACxC;;CAGH,MAAM,gBAAgB;EACpB,GAAG;EACH,WAAW;GACT,sBAAsB,eAAe;GACrC,GAAG,aAAa;GACjB;EACF;CAiBD,MAAM,QAAQ,eAfU,WACtB,6BACE,cACD,EACD,EAEE,eACE,gBACA,eACG;AACH,SAAO,WAAW,gBAAgB,WAAW;IAEhD,CAGyC,CAAC;AAM7C,aAEI,sBACE,cACD,QACG;AACJ,mBAAiB,OAAO,cAAc;IAExC,EAAE,WAAW,MAAM,CACpB;AAED,aACQ;EACJ,MAAM,kBAAkB,MAAM,aAAa,MAAM;EAGjD,MAAM,kBAAkB,MAAM,aAAa,MAAM;AAIjD,MAAI,CAAC,gBACH,QAAO,EAAE;EAGX,MAAM,mBAAmC,EAAE;AAE3C,OAAK,MAAM,OAAO,OAAO,KAAK,MAAM,aAAa,EAAE;AACjD,OAAI,EAAE,OAAO,uFAAoB,gBAAkB,UAAS,OAC1D;AAKF,oBAAiB,KAAK,gBAAgB,KAAK;;AAG7C,SAAO;KAER,qBAAqB;AACpB,MAAI,iBAAiB,SAAS,EAC5B,kBAAiB,OAAO,cAAc;IAG1C,EAAE,WAAW,MAAM,CACpB;AAED,OAAM,cAAc,UAOd;EAEJ,MAAM,WAAW,YADF,MAAM,UAAU,MAAM,OACS,MAAM,UAAmB,EACrE,SAAS,SACV,CAAC;AACF,MAAI,OAAO,MAAM,aAAa,WAC5B,QAAO,MAAM,SAAS,SAAS,MAA2B;AAE5D,SAAO,MAAM;;CAGf,MAAM,aAAa,YAAY,MAAM,OAAO,SAAS;AAErD,QAAO;EACL,GAAG;EACH,IAAI,QAAQ;AACV,UAAO,WAAW;;EAErB"}
1
+ {"version":3,"file":"useTable.js","names":[],"sources":["../src/useTable.ts"],"sourcesContent":["import { unref, watch } from 'vue'\nimport { constructTable } from '@tanstack/table-core'\nimport { shallow, useSelector } from '@tanstack/vue-store'\nimport { mergeProxy } from './merge-proxy'\nimport { vueReactivity } from './reactivity'\nimport type {\n Atom,\n ReadonlyAtom,\n ReadonlyStore,\n Store,\n} from '@tanstack/vue-store'\nimport type {\n NoInfer,\n RowData,\n Table,\n TableFeatures,\n TableOptions,\n TableState,\n} from '@tanstack/table-core'\nimport type { MaybeRef, VNode } from 'vue'\n\nexport type SubscribeSource<TValue> =\n | Atom<TValue>\n | ReadonlyAtom<TValue>\n | Store<TValue>\n | ReadonlyStore<TValue>\n\nexport type TableOptionsWithReactiveData<\n TFeatures extends TableFeatures,\n TData extends RowData,\n> = {\n [K in keyof TableOptions<TFeatures, TData>]: K extends 'data'\n ? MaybeRef<ReadonlyArray<TData>>\n : MaybeRef<TableOptions<TFeatures, TData>[K]>\n}\n\nfunction getOptionsWithReactiveValues<\n TFeatures extends TableFeatures,\n TData extends RowData,\n>(options: TableOptionsWithReactiveData<TFeatures, TData>) {\n const resolvedOptions: Record<string, unknown> = {}\n\n for (const key of Object.keys(options)) {\n resolvedOptions[key] = unref(\n options[key as keyof TableOptionsWithReactiveData<TFeatures, TData>],\n )\n }\n\n return mergeProxy(options, resolvedOptions)\n}\n\nfunction getReactiveOptionDeps<\n TFeatures extends TableFeatures,\n TData extends RowData,\n>(options: TableOptionsWithReactiveData<TFeatures, TData>) {\n return Object.keys(options).map((key) =>\n unref(options[key as keyof TableOptionsWithReactiveData<TFeatures, TData>]),\n )\n}\n\nexport type VueTable<\n TFeatures extends TableFeatures,\n TData extends RowData,\n TSelected = TableState<TFeatures>,\n> = Table<TFeatures, TData> & {\n /**\n * Store mode: `selector` required. Source mode: pass `source` (atom or store); omit\n * `selector` for the whole value (identity), or pass `selector` to project. Split\n * overloads so source-only infers `TSourceValue` for `children` (see React `Subscribe`).\n */\n Subscribe: {\n <TSourceValue>(props: {\n source: SubscribeSource<TSourceValue>\n selector?: undefined\n children:\n | ((state: Readonly<TSourceValue>) => VNode | Array<VNode>)\n | VNode\n | Array<VNode>\n }): VNode | Array<VNode>\n <TSourceValue, TSubSelected>(props: {\n source: SubscribeSource<TSourceValue>\n selector: (state: TSourceValue) => TSubSelected\n children:\n | ((state: Readonly<TSubSelected>) => VNode | Array<VNode>)\n | VNode\n | Array<VNode>\n }): VNode | Array<VNode>\n <TSubSelected>(props: {\n selector: (state: NoInfer<TableState<TFeatures>>) => TSubSelected\n children:\n | ((state: Readonly<TSubSelected>) => VNode | Array<VNode>)\n | VNode\n | Array<VNode>\n }): VNode | Array<VNode>\n }\n /**\n * The selected state of the table. This state may not match the structure of `table.store.state` because it is selected by the `selector` function that you pass as the 2nd argument to `useTable`.\n *\n * @example\n * const table = useTable(options, (state) => ({ globalFilter: state.globalFilter })) // only globalFilter is part of the selected state\n *\n * console.log(table.state.globalFilter)\n */\n readonly state: Readonly<TSelected>\n}\n\n/**\n * Creates a Vue table instance backed by Vue-aware TanStack Store atoms.\n *\n * Table options may contain Vue refs or computed values. The adapter unwraps\n * those reactive inputs, watches them with synchronous flushing, and keeps the\n * table options in sync. The optional selector projects from `table.store` and\n * exposes the selected value on `table.state`.\n *\n * @example\n * ```ts\n * const table = useTable(\n * {\n * _features,\n * _rowModels: {},\n * columns,\n * data,\n * },\n * (state) => ({ pagination: state.pagination }),\n * )\n *\n * table.state.pagination\n * ```\n */\nexport function useTable<\n TFeatures extends TableFeatures,\n TData extends RowData,\n TSelected = TableState<TFeatures>,\n>(\n tableOptions:\n | TableOptions<TFeatures, TData>\n | TableOptionsWithReactiveData<TFeatures, TData>,\n selector?: (state: TableState<TFeatures>) => TSelected,\n): VueTable<TFeatures, TData, TSelected> {\n const syncTableOptions = (\n table: Table<TFeatures, TData>,\n options: TableOptionsWithReactiveData<TFeatures, TData>,\n ) => {\n table.setOptions(\n () =>\n getOptionsWithReactiveValues(options) as TableOptions<TFeatures, TData>,\n )\n }\n\n const mergedOptions = {\n ...tableOptions,\n _features: {\n coreReativityFeature: vueReactivity(),\n ...tableOptions._features,\n },\n }\n\n const resolvedOptions = mergeProxy(\n getOptionsWithReactiveValues(\n mergedOptions as TableOptionsWithReactiveData<TFeatures, TData>,\n ),\n {\n // Remove state and onStateChange - store handles it internally\n mergeOptions: (\n defaultOptions: TableOptions<TFeatures, TData>,\n newOptions: Partial<TableOptions<TFeatures, TData>>,\n ) => {\n return mergeProxy(defaultOptions, newOptions)\n },\n },\n ) as TableOptions<TFeatures, TData>\n\n const table = constructTable(resolvedOptions) as VueTable<\n TFeatures,\n TData,\n TSelected\n >\n\n watch(\n () =>\n getReactiveOptionDeps(\n mergedOptions as TableOptionsWithReactiveData<TFeatures, TData>,\n ),\n () => {\n syncTableOptions(table, mergedOptions)\n },\n { immediate: true },\n )\n\n watch(\n () => {\n const controlledState = unref(tableOptions.state) as\n | Record<string, unknown>\n | undefined\n const controlledAtoms = unref(tableOptions.atoms) as\n | Record<string, unknown>\n | undefined\n\n if (!controlledState) {\n return []\n }\n\n const controlledValues: Array<unknown> = []\n\n for (const key of Object.keys(table.initialState)) {\n if (!(key in controlledState) || controlledAtoms?.[key] !== undefined) {\n continue\n }\n\n // Reading only controlled state slices here lets Vue subscribe to\n // getters/computed values that are passed through `options.state`.\n controlledValues.push(controlledState[key])\n }\n\n return controlledValues\n },\n (controlledValues) => {\n if (controlledValues.length > 0) {\n syncTableOptions(table, mergedOptions)\n }\n },\n { immediate: true },\n )\n\n table.Subscribe = ((props: {\n source?: SubscribeSource<unknown>\n selector?: ((state: unknown) => unknown) | undefined\n children:\n | ((state: Readonly<unknown>) => VNode | Array<VNode>)\n | VNode\n | Array<VNode>\n }) => {\n const source = props.source ?? table.store\n const selected = useSelector(source as never, props.selector as never, {\n compare: shallow,\n })\n if (typeof props.children === 'function') {\n return props.children(selected.value as Readonly<unknown>)\n }\n return props.children\n }) as VueTable<TFeatures, TData, TSelected>['Subscribe']\n\n const stateStore = useSelector(table.store, selector)\n\n return {\n ...table,\n get state() {\n return stateStore.value\n },\n }\n}\n"],"mappings":";;;;;;;AAoCA,SAAS,6BAGP,SAAyD;CACzD,MAAM,kBAA2C,EAAE;CAEnD,KAAK,MAAM,OAAO,OAAO,KAAK,QAAQ,EACpC,gBAAgB,OAAO,MACrB,QAAQ,KACT;CAGH,OAAO,WAAW,SAAS,gBAAgB;;AAG7C,SAAS,sBAGP,SAAyD;CACzD,OAAO,OAAO,KAAK,QAAQ,CAAC,KAAK,QAC/B,MAAM,QAAQ,KAA6D,CAC5E;;;;;;;;;;;;;;;;;;;;;;;;;AAwEH,SAAgB,SAKd,cAGA,UACuC;CACvC,MAAM,oBACJ,OACA,YACG;EACH,MAAM,iBAEF,6BAA6B,QAAQ,CACxC;;CAGH,MAAM,gBAAgB;EACpB,GAAG;EACH,WAAW;GACT,sBAAsB,eAAe;GACrC,GAAG,aAAa;GACjB;EACF;CAiBD,MAAM,QAAQ,eAfU,WACtB,6BACE,cACD,EACD,EAEE,eACE,gBACA,eACG;EACH,OAAO,WAAW,gBAAgB,WAAW;IAEhD,CAGyC,CAAC;CAM7C,YAEI,sBACE,cACD,QACG;EACJ,iBAAiB,OAAO,cAAc;IAExC,EAAE,WAAW,MAAM,CACpB;CAED,YACQ;EACJ,MAAM,kBAAkB,MAAM,aAAa,MAAM;EAGjD,MAAM,kBAAkB,MAAM,aAAa,MAAM;EAIjD,IAAI,CAAC,iBACH,OAAO,EAAE;EAGX,MAAM,mBAAmC,EAAE;EAE3C,KAAK,MAAM,OAAO,OAAO,KAAK,MAAM,aAAa,EAAE;GACjD,IAAI,EAAE,OAAO,uFAAoB,gBAAkB,UAAS,QAC1D;GAKF,iBAAiB,KAAK,gBAAgB,KAAK;;EAG7C,OAAO;KAER,qBAAqB;EACpB,IAAI,iBAAiB,SAAS,GAC5B,iBAAiB,OAAO,cAAc;IAG1C,EAAE,WAAW,MAAM,CACpB;CAED,MAAM,cAAc,UAOd;EAEJ,MAAM,WAAW,YADF,MAAM,UAAU,MAAM,OACS,MAAM,UAAmB,EACrE,SAAS,SACV,CAAC;EACF,IAAI,OAAO,MAAM,aAAa,YAC5B,OAAO,MAAM,SAAS,SAAS,MAA2B;EAE5D,OAAO,MAAM;;CAGf,MAAM,aAAa,YAAY,MAAM,OAAO,SAAS;CAErD,OAAO;EACL,GAAG;EACH,IAAI,QAAQ;GACV,OAAO,WAAW;;EAErB"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tanstack/vue-table",
3
- "version": "9.0.0-alpha.45",
3
+ "version": "9.0.0-alpha.46",
4
4
  "description": "Headless UI for building powerful tables & datagrids for Vue.",
5
5
  "author": "Tanner Linsley",
6
6
  "license": "MIT",
@@ -49,12 +49,12 @@
49
49
  ],
50
50
  "dependencies": {
51
51
  "@tanstack/vue-store": "^0.11.0",
52
- "@tanstack/table-core": "9.0.0-alpha.43"
52
+ "@tanstack/table-core": "9.0.0-alpha.46"
53
53
  },
54
54
  "devDependencies": {
55
55
  "@vitejs/plugin-vue": "^6.0.6",
56
- "eslint-plugin-vue": "^10.9.0",
57
- "vue": "^3.5.33"
56
+ "eslint-plugin-vue": "^10.9.1",
57
+ "vue": "^3.5.34"
58
58
  },
59
59
  "peerDependencies": {
60
60
  "vue": ">=3.2"
@@ -279,6 +279,24 @@ export const AppFlexRender = defineComponent({
279
279
  },
280
280
  })
281
281
 
282
+ /**
283
+ * Creates app-scoped Vue table helpers with features, row models, and
284
+ * renderable component maps pre-bound.
285
+ *
286
+ * Use this when an app or design system wants typed `useAppTable`, a pre-bound
287
+ * column helper, and context helpers for table, cell, and header components.
288
+ *
289
+ * @example
290
+ * ```ts
291
+ * const { useAppTable, createAppColumnHelper } = createTableHook({
292
+ * _features,
293
+ * _rowModels: {},
294
+ * tableComponents: {},
295
+ * cellComponents: {},
296
+ * headerComponents: {},
297
+ * })
298
+ * ```
299
+ */
282
300
  export function createTableHook<
283
301
  TFeatures extends TableFeatures,
284
302
  const TTableComponents extends Record<string, ComponentType<any>>,
package/src/reactivity.ts CHANGED
@@ -46,6 +46,13 @@ function refToWritableAtom<T>(source: ShallowRef<T>): Atom<T> {
46
46
  })
47
47
  }
48
48
 
49
+ /**
50
+ * Creates the table-core reactivity bindings used by the Vue adapter.
51
+ *
52
+ * Readonly table atoms are backed by Vue `computed` refs and writable atoms by
53
+ * `shallowRef`. Subscriptions use synchronous `watch` callbacks so table store
54
+ * updates are visible to Vue render and computed work immediately.
55
+ */
49
56
  export function vueReactivity(): TableReactivityBindings {
50
57
  return {
51
58
  createOptionsStore: true,
package/src/useTable.ts CHANGED
@@ -104,6 +104,29 @@ export type VueTable<
104
104
  readonly state: Readonly<TSelected>
105
105
  }
106
106
 
107
+ /**
108
+ * Creates a Vue table instance backed by Vue-aware TanStack Store atoms.
109
+ *
110
+ * Table options may contain Vue refs or computed values. The adapter unwraps
111
+ * those reactive inputs, watches them with synchronous flushing, and keeps the
112
+ * table options in sync. The optional selector projects from `table.store` and
113
+ * exposes the selected value on `table.state`.
114
+ *
115
+ * @example
116
+ * ```ts
117
+ * const table = useTable(
118
+ * {
119
+ * _features,
120
+ * _rowModels: {},
121
+ * columns,
122
+ * data,
123
+ * },
124
+ * (state) => ({ pagination: state.pagination }),
125
+ * )
126
+ *
127
+ * table.state.pagination
128
+ * ```
129
+ */
107
130
  export function useTable<
108
131
  TFeatures extends TableFeatures,
109
132
  TData extends RowData,