@tanstack/vue-table 9.0.0-alpha.43 → 9.0.0-alpha.44
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.cts +2 -2
- package/dist/index.d.ts +2 -2
- package/dist/useTable.cjs +1 -1
- package/dist/useTable.cjs.map +1 -1
- package/dist/useTable.d.cts +5 -4
- package/dist/useTable.d.ts +5 -4
- package/dist/useTable.js +1 -1
- package/dist/useTable.js.map +1 -1
- package/package.json +1 -1
- package/src/useTable.ts +17 -9
package/dist/index.d.cts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { FlexRender, flexRender } from "./FlexRender.cjs";
|
|
2
|
-
import { TableOptionsWithReactiveData, VueTable, useTable } from "./useTable.cjs";
|
|
2
|
+
import { SubscribeSource, TableOptionsWithReactiveData, VueTable, useTable } from "./useTable.cjs";
|
|
3
3
|
import { AppCellContext, AppCellProps, AppColumnDefBase, AppColumnDefTemplate, AppColumnHelper, AppDisplayColumnDef, AppFlexRender, AppGroupColumnDef, AppHeaderContext, AppHeaderProps, AppTableProps, AppVueTable, ComponentType, CreateTableHookOptions, createTableHook } from "./createTableHook.cjs";
|
|
4
4
|
export * from "@tanstack/table-core";
|
|
5
|
-
export { AppCellContext, AppCellProps, AppColumnDefBase, AppColumnDefTemplate, AppColumnHelper, AppDisplayColumnDef, AppFlexRender, AppGroupColumnDef, AppHeaderContext, AppHeaderProps, AppTableProps, AppVueTable, ComponentType, CreateTableHookOptions, FlexRender, TableOptionsWithReactiveData, VueTable, createTableHook, flexRender, useTable };
|
|
5
|
+
export { AppCellContext, AppCellProps, AppColumnDefBase, AppColumnDefTemplate, AppColumnHelper, AppDisplayColumnDef, AppFlexRender, AppGroupColumnDef, AppHeaderContext, AppHeaderProps, AppTableProps, AppVueTable, ComponentType, CreateTableHookOptions, FlexRender, SubscribeSource, TableOptionsWithReactiveData, VueTable, createTableHook, flexRender, useTable };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { FlexRender, flexRender } from "./FlexRender.js";
|
|
2
|
-
import { TableOptionsWithReactiveData, VueTable, useTable } from "./useTable.js";
|
|
2
|
+
import { SubscribeSource, TableOptionsWithReactiveData, VueTable, useTable } from "./useTable.js";
|
|
3
3
|
import { AppCellContext, AppCellProps, AppColumnDefBase, AppColumnDefTemplate, AppColumnHelper, AppDisplayColumnDef, AppFlexRender, AppGroupColumnDef, AppHeaderContext, AppHeaderProps, AppTableProps, AppVueTable, ComponentType, CreateTableHookOptions, createTableHook } from "./createTableHook.js";
|
|
4
4
|
export * from "@tanstack/table-core";
|
|
5
|
-
export { AppCellContext, AppCellProps, AppColumnDefBase, AppColumnDefTemplate, AppColumnHelper, AppDisplayColumnDef, AppFlexRender, AppGroupColumnDef, AppHeaderContext, AppHeaderProps, AppTableProps, AppVueTable, ComponentType, CreateTableHookOptions, FlexRender, TableOptionsWithReactiveData, VueTable, createTableHook, flexRender, useTable };
|
|
5
|
+
export { AppCellContext, AppCellProps, AppColumnDefBase, AppColumnDefTemplate, AppColumnHelper, AppDisplayColumnDef, AppFlexRender, AppGroupColumnDef, AppHeaderContext, AppHeaderProps, AppTableProps, AppVueTable, ComponentType, CreateTableHookOptions, FlexRender, SubscribeSource, TableOptionsWithReactiveData, VueTable, createTableHook, flexRender, useTable };
|
package/dist/useTable.cjs
CHANGED
|
@@ -44,7 +44,7 @@ function useTable(tableOptions, selector = () => ({})) {
|
|
|
44
44
|
if (controlledValues.length > 0) syncTableOptions(table, mergedOptions);
|
|
45
45
|
}, { immediate: true });
|
|
46
46
|
table.Subscribe = ((props) => {
|
|
47
|
-
const selected = (0, _tanstack_vue_store.useSelector)(props.source
|
|
47
|
+
const selected = (0, _tanstack_vue_store.useSelector)(props.source ?? table.store, props.selector ?? ((x) => x), { compare: _tanstack_vue_store.shallow });
|
|
48
48
|
if (typeof props.children === "function") return props.children(selected.value);
|
|
49
49
|
return props.children;
|
|
50
50
|
});
|
package/dist/useTable.cjs.map
CHANGED
|
@@ -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 {
|
|
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 = {},\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 = {},\n>(\n tableOptions:\n | TableOptions<TFeatures, TData>\n | TableOptionsWithReactiveData<TFeatures, TData>,\n selector: (state: TableState<TFeatures>) => TSelected = () =>\n ({}) as 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 selectFn = props.selector ?? ((x: unknown) => x)\n const selected = useSelector(source as never, selectFn 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,kBACG,EAAE,GACkC;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;EAGJ,MAAM,gDAFS,MAAM,UAAU,MAAM,OACpB,MAAM,cAAc,MAAe,IACa,EAC/D,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"}
|
package/dist/useTable.d.cts
CHANGED
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import { MaybeRef, VNode } from "vue";
|
|
2
2
|
import { NoInfer, RowData, Table, TableFeatures, TableOptions, TableState } from "@tanstack/table-core";
|
|
3
|
-
import { Atom, ReadonlyAtom } from "@tanstack/vue-store";
|
|
3
|
+
import { Atom, ReadonlyAtom, ReadonlyStore, Store } from "@tanstack/vue-store";
|
|
4
4
|
|
|
5
5
|
//#region src/useTable.d.ts
|
|
6
|
+
type SubscribeSource<TValue> = Atom<TValue> | ReadonlyAtom<TValue> | Store<TValue> | ReadonlyStore<TValue>;
|
|
6
7
|
type TableOptionsWithReactiveData<TFeatures extends TableFeatures, TData extends RowData> = { [K in keyof TableOptions<TFeatures, TData>]: K extends 'data' ? MaybeRef<ReadonlyArray<TData>> : MaybeRef<TableOptions<TFeatures, TData>[K]> };
|
|
7
8
|
type VueTable<TFeatures extends TableFeatures, TData extends RowData, TSelected = {}> = Table<TFeatures, TData> & {
|
|
8
9
|
/**
|
|
@@ -12,12 +13,12 @@ type VueTable<TFeatures extends TableFeatures, TData extends RowData, TSelected
|
|
|
12
13
|
*/
|
|
13
14
|
Subscribe: {
|
|
14
15
|
<TSourceValue>(props: {
|
|
15
|
-
source:
|
|
16
|
+
source: SubscribeSource<TSourceValue>;
|
|
16
17
|
selector?: undefined;
|
|
17
18
|
children: ((state: Readonly<TSourceValue>) => VNode | Array<VNode>) | VNode | Array<VNode>;
|
|
18
19
|
}): VNode | Array<VNode>;
|
|
19
20
|
<TSourceValue, TSubSelected>(props: {
|
|
20
|
-
source:
|
|
21
|
+
source: SubscribeSource<TSourceValue>;
|
|
21
22
|
selector: (state: TSourceValue) => TSubSelected;
|
|
22
23
|
children: ((state: Readonly<TSubSelected>) => VNode | Array<VNode>) | VNode | Array<VNode>;
|
|
23
24
|
}): VNode | Array<VNode>;
|
|
@@ -38,5 +39,5 @@ type VueTable<TFeatures extends TableFeatures, TData extends RowData, TSelected
|
|
|
38
39
|
};
|
|
39
40
|
declare function useTable<TFeatures extends TableFeatures, TData extends RowData, TSelected = {}>(tableOptions: TableOptions<TFeatures, TData> | TableOptionsWithReactiveData<TFeatures, TData>, selector?: (state: TableState<TFeatures>) => TSelected): VueTable<TFeatures, TData, TSelected>;
|
|
40
41
|
//#endregion
|
|
41
|
-
export { TableOptionsWithReactiveData, VueTable, useTable };
|
|
42
|
+
export { SubscribeSource, TableOptionsWithReactiveData, VueTable, useTable };
|
|
42
43
|
//# sourceMappingURL=useTable.d.cts.map
|
package/dist/useTable.d.ts
CHANGED
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import { MaybeRef, VNode } from "vue";
|
|
2
2
|
import { NoInfer, RowData, Table, TableFeatures, TableOptions, TableState } from "@tanstack/table-core";
|
|
3
|
-
import { Atom, ReadonlyAtom } from "@tanstack/vue-store";
|
|
3
|
+
import { Atom, ReadonlyAtom, ReadonlyStore, Store } from "@tanstack/vue-store";
|
|
4
4
|
|
|
5
5
|
//#region src/useTable.d.ts
|
|
6
|
+
type SubscribeSource<TValue> = Atom<TValue> | ReadonlyAtom<TValue> | Store<TValue> | ReadonlyStore<TValue>;
|
|
6
7
|
type TableOptionsWithReactiveData<TFeatures extends TableFeatures, TData extends RowData> = { [K in keyof TableOptions<TFeatures, TData>]: K extends 'data' ? MaybeRef<ReadonlyArray<TData>> : MaybeRef<TableOptions<TFeatures, TData>[K]> };
|
|
7
8
|
type VueTable<TFeatures extends TableFeatures, TData extends RowData, TSelected = {}> = Table<TFeatures, TData> & {
|
|
8
9
|
/**
|
|
@@ -12,12 +13,12 @@ type VueTable<TFeatures extends TableFeatures, TData extends RowData, TSelected
|
|
|
12
13
|
*/
|
|
13
14
|
Subscribe: {
|
|
14
15
|
<TSourceValue>(props: {
|
|
15
|
-
source:
|
|
16
|
+
source: SubscribeSource<TSourceValue>;
|
|
16
17
|
selector?: undefined;
|
|
17
18
|
children: ((state: Readonly<TSourceValue>) => VNode | Array<VNode>) | VNode | Array<VNode>;
|
|
18
19
|
}): VNode | Array<VNode>;
|
|
19
20
|
<TSourceValue, TSubSelected>(props: {
|
|
20
|
-
source:
|
|
21
|
+
source: SubscribeSource<TSourceValue>;
|
|
21
22
|
selector: (state: TSourceValue) => TSubSelected;
|
|
22
23
|
children: ((state: Readonly<TSubSelected>) => VNode | Array<VNode>) | VNode | Array<VNode>;
|
|
23
24
|
}): VNode | Array<VNode>;
|
|
@@ -38,5 +39,5 @@ type VueTable<TFeatures extends TableFeatures, TData extends RowData, TSelected
|
|
|
38
39
|
};
|
|
39
40
|
declare function useTable<TFeatures extends TableFeatures, TData extends RowData, TSelected = {}>(tableOptions: TableOptions<TFeatures, TData> | TableOptionsWithReactiveData<TFeatures, TData>, selector?: (state: TableState<TFeatures>) => TSelected): VueTable<TFeatures, TData, TSelected>;
|
|
40
41
|
//#endregion
|
|
41
|
-
export { TableOptionsWithReactiveData, VueTable, useTable };
|
|
42
|
+
export { SubscribeSource, TableOptionsWithReactiveData, VueTable, useTable };
|
|
42
43
|
//# sourceMappingURL=useTable.d.ts.map
|
package/dist/useTable.js
CHANGED
|
@@ -44,7 +44,7 @@ function useTable(tableOptions, selector = () => ({})) {
|
|
|
44
44
|
if (controlledValues.length > 0) syncTableOptions(table, mergedOptions);
|
|
45
45
|
}, { immediate: true });
|
|
46
46
|
table.Subscribe = ((props) => {
|
|
47
|
-
const selected = useSelector(props.source
|
|
47
|
+
const selected = useSelector(props.source ?? table.store, props.selector ?? ((x) => x), { compare: shallow });
|
|
48
48
|
if (typeof props.children === "function") return props.children(selected.value);
|
|
49
49
|
return props.children;
|
|
50
50
|
});
|
package/dist/useTable.js.map
CHANGED
|
@@ -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 {
|
|
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 = {},\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 = {},\n>(\n tableOptions:\n | TableOptions<TFeatures, TData>\n | TableOptionsWithReactiveData<TFeatures, TData>,\n selector: (state: TableState<TFeatures>) => TSelected = () =>\n ({}) as 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 selectFn = props.selector ?? ((x: unknown) => x)\n const selected = useSelector(source as never, selectFn 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,kBACG,EAAE,GACkC;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;EAGJ,MAAM,WAAW,YAFF,MAAM,UAAU,MAAM,OACpB,MAAM,cAAc,MAAe,IACa,EAC/D,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"}
|
package/package.json
CHANGED
package/src/useTable.ts
CHANGED
|
@@ -3,7 +3,12 @@ import { constructTable } from '@tanstack/table-core'
|
|
|
3
3
|
import { shallow, useSelector } from '@tanstack/vue-store'
|
|
4
4
|
import { mergeProxy } from './merge-proxy'
|
|
5
5
|
import { vueReactivity } from './reactivity'
|
|
6
|
-
import type {
|
|
6
|
+
import type {
|
|
7
|
+
Atom,
|
|
8
|
+
ReadonlyAtom,
|
|
9
|
+
ReadonlyStore,
|
|
10
|
+
Store,
|
|
11
|
+
} from '@tanstack/vue-store'
|
|
7
12
|
import type {
|
|
8
13
|
NoInfer,
|
|
9
14
|
RowData,
|
|
@@ -14,6 +19,12 @@ import type {
|
|
|
14
19
|
} from '@tanstack/table-core'
|
|
15
20
|
import type { MaybeRef, VNode } from 'vue'
|
|
16
21
|
|
|
22
|
+
export type SubscribeSource<TValue> =
|
|
23
|
+
| Atom<TValue>
|
|
24
|
+
| ReadonlyAtom<TValue>
|
|
25
|
+
| Store<TValue>
|
|
26
|
+
| ReadonlyStore<TValue>
|
|
27
|
+
|
|
17
28
|
export type TableOptionsWithReactiveData<
|
|
18
29
|
TFeatures extends TableFeatures,
|
|
19
30
|
TData extends RowData,
|
|
@@ -59,7 +70,7 @@ export type VueTable<
|
|
|
59
70
|
*/
|
|
60
71
|
Subscribe: {
|
|
61
72
|
<TSourceValue>(props: {
|
|
62
|
-
source:
|
|
73
|
+
source: SubscribeSource<TSourceValue>
|
|
63
74
|
selector?: undefined
|
|
64
75
|
children:
|
|
65
76
|
| ((state: Readonly<TSourceValue>) => VNode | Array<VNode>)
|
|
@@ -67,7 +78,7 @@ export type VueTable<
|
|
|
67
78
|
| Array<VNode>
|
|
68
79
|
}): VNode | Array<VNode>
|
|
69
80
|
<TSourceValue, TSubSelected>(props: {
|
|
70
|
-
source:
|
|
81
|
+
source: SubscribeSource<TSourceValue>
|
|
71
82
|
selector: (state: TSourceValue) => TSubSelected
|
|
72
83
|
children:
|
|
73
84
|
| ((state: Readonly<TSubSelected>) => VNode | Array<VNode>)
|
|
@@ -190,18 +201,15 @@ export function useTable<
|
|
|
190
201
|
)
|
|
191
202
|
|
|
192
203
|
table.Subscribe = ((props: {
|
|
193
|
-
source?:
|
|
204
|
+
source?: SubscribeSource<unknown>
|
|
194
205
|
selector?: ((state: unknown) => unknown) | undefined
|
|
195
206
|
children:
|
|
196
207
|
| ((state: Readonly<unknown>) => VNode | Array<VNode>)
|
|
197
208
|
| VNode
|
|
198
209
|
| Array<VNode>
|
|
199
210
|
}) => {
|
|
200
|
-
const source = props.source
|
|
201
|
-
const selectFn =
|
|
202
|
-
props.source !== undefined
|
|
203
|
-
? (props.selector ?? ((x: unknown) => x))
|
|
204
|
-
: props.selector
|
|
211
|
+
const source = props.source ?? table.store
|
|
212
|
+
const selectFn = props.selector ?? ((x: unknown) => x)
|
|
205
213
|
const selected = useSelector(source as never, selectFn as never, {
|
|
206
214
|
compare: shallow,
|
|
207
215
|
})
|