@tanstack/react-table 9.0.0-alpha.42 → 9.0.0-alpha.43
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/reactivity.cjs +21 -0
- package/dist/reactivity.cjs.map +1 -0
- package/dist/reactivity.js +20 -0
- package/dist/reactivity.js.map +1 -0
- package/dist/useTable.cjs +8 -11
- package/dist/useTable.cjs.map +1 -1
- package/dist/useTable.d.cts +1 -4
- package/dist/useTable.d.ts +1 -4
- package/dist/useTable.js +9 -12
- package/dist/useTable.js.map +1 -1
- package/package.json +2 -2
- package/src/reactivity.ts +23 -0
- package/src/useTable.ts +12 -19
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
const require_runtime = require('./_virtual/_rolldown/runtime.cjs');
|
|
2
|
+
let _tanstack_react_store = require("@tanstack/react-store");
|
|
3
|
+
|
|
4
|
+
//#region src/reactivity.ts
|
|
5
|
+
function reactReactivity() {
|
|
6
|
+
return {
|
|
7
|
+
createOptionsStore: false,
|
|
8
|
+
batch: _tanstack_react_store.batch,
|
|
9
|
+
untrack: (fn) => fn(),
|
|
10
|
+
createReadonlyAtom: (fn, options) => {
|
|
11
|
+
return (0, _tanstack_react_store.createAtom)(() => fn(), { compare: options === null || options === void 0 ? void 0 : options.compare });
|
|
12
|
+
},
|
|
13
|
+
createWritableAtom: (value, options) => {
|
|
14
|
+
return (0, _tanstack_react_store.createAtom)(value, { compare: options === null || options === void 0 ? void 0 : options.compare });
|
|
15
|
+
}
|
|
16
|
+
};
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
//#endregion
|
|
20
|
+
exports.reactReactivity = reactReactivity;
|
|
21
|
+
//# sourceMappingURL=reactivity.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"reactivity.cjs","names":[],"sources":["../src/reactivity.ts"],"sourcesContent":["import { batch, createAtom } from '@tanstack/react-store'\nimport type {\n TableAtomOptions,\n TableReactivityBindings,\n} from '@tanstack/table-core/reactivity'\n\nexport function reactReactivity(): TableReactivityBindings {\n return {\n createOptionsStore: false,\n batch,\n untrack: (fn) => fn(),\n createReadonlyAtom: <T>(fn: () => T, options?: TableAtomOptions<T>) => {\n return createAtom(() => fn(), {\n compare: options?.compare,\n })\n },\n createWritableAtom: <T>(value: T, options?: TableAtomOptions<T>) => {\n return createAtom(value, {\n compare: options?.compare,\n })\n },\n }\n}\n"],"mappings":";;;;AAMA,SAAgB,kBAA2C;AACzD,QAAO;EACL,oBAAoB;EACpB;EACA,UAAU,OAAO,IAAI;EACrB,qBAAwB,IAAa,YAAkC;AACrE,sDAAwB,IAAI,EAAE,EAC5B,2DAAS,QAAS,SACnB,CAAC;;EAEJ,qBAAwB,OAAU,YAAkC;AAClE,gDAAkB,OAAO,EACvB,2DAAS,QAAS,SACnB,CAAC;;EAEL"}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { batch, createAtom } from "@tanstack/react-store";
|
|
2
|
+
|
|
3
|
+
//#region src/reactivity.ts
|
|
4
|
+
function reactReactivity() {
|
|
5
|
+
return {
|
|
6
|
+
createOptionsStore: false,
|
|
7
|
+
batch,
|
|
8
|
+
untrack: (fn) => fn(),
|
|
9
|
+
createReadonlyAtom: (fn, options) => {
|
|
10
|
+
return createAtom(() => fn(), { compare: options === null || options === void 0 ? void 0 : options.compare });
|
|
11
|
+
},
|
|
12
|
+
createWritableAtom: (value, options) => {
|
|
13
|
+
return createAtom(value, { compare: options === null || options === void 0 ? void 0 : options.compare });
|
|
14
|
+
}
|
|
15
|
+
};
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
//#endregion
|
|
19
|
+
export { reactReactivity };
|
|
20
|
+
//# sourceMappingURL=reactivity.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"reactivity.js","names":[],"sources":["../src/reactivity.ts"],"sourcesContent":["import { batch, createAtom } from '@tanstack/react-store'\nimport type {\n TableAtomOptions,\n TableReactivityBindings,\n} from '@tanstack/table-core/reactivity'\n\nexport function reactReactivity(): TableReactivityBindings {\n return {\n createOptionsStore: false,\n batch,\n untrack: (fn) => fn(),\n createReadonlyAtom: <T>(fn: () => T, options?: TableAtomOptions<T>) => {\n return createAtom(() => fn(), {\n compare: options?.compare,\n })\n },\n createWritableAtom: <T>(value: T, options?: TableAtomOptions<T>) => {\n return createAtom(value, {\n compare: options?.compare,\n })\n },\n }\n}\n"],"mappings":";;;AAMA,SAAgB,kBAA2C;AACzD,QAAO;EACL,oBAAoB;EACpB;EACA,UAAU,OAAO,IAAI;EACrB,qBAAwB,IAAa,YAAkC;AACrE,UAAO,iBAAiB,IAAI,EAAE,EAC5B,2DAAS,QAAS,SACnB,CAAC;;EAEJ,qBAAwB,OAAU,YAAkC;AAClE,UAAO,WAAW,OAAO,EACvB,2DAAS,QAAS,SACnB,CAAC;;EAEL"}
|
package/dist/useTable.cjs
CHANGED
|
@@ -3,10 +3,10 @@
|
|
|
3
3
|
const require_runtime = require('./_virtual/_rolldown/runtime.cjs');
|
|
4
4
|
const require_FlexRender = require('./FlexRender.cjs');
|
|
5
5
|
const require_Subscribe = require('./Subscribe.cjs');
|
|
6
|
+
const require_reactivity = require('./reactivity.cjs');
|
|
6
7
|
let _tanstack_table_core = require("@tanstack/table-core");
|
|
7
8
|
let react = require("react");
|
|
8
9
|
let _tanstack_react_store = require("@tanstack/react-store");
|
|
9
|
-
let _tanstack_table_core_reactivity = require("@tanstack/table-core/reactivity");
|
|
10
10
|
|
|
11
11
|
//#region src/useTable.ts
|
|
12
12
|
function useTable(tableOptions, selector = () => ({})) {
|
|
@@ -14,7 +14,7 @@ function useTable(tableOptions, selector = () => ({})) {
|
|
|
14
14
|
const tableInstance = (0, _tanstack_table_core.constructTable)({
|
|
15
15
|
...tableOptions,
|
|
16
16
|
_features: {
|
|
17
|
-
coreReativityFeature:
|
|
17
|
+
coreReativityFeature: require_reactivity.reactReactivity(),
|
|
18
18
|
...tableOptions._features
|
|
19
19
|
}
|
|
20
20
|
});
|
|
@@ -27,21 +27,18 @@ function useTable(tableOptions, selector = () => ({})) {
|
|
|
27
27
|
tableInstance.FlexRender = require_FlexRender.FlexRender;
|
|
28
28
|
return tableInstance;
|
|
29
29
|
});
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
}));
|
|
35
|
-
}, [table, tableOptions]);
|
|
30
|
+
table.setOptions((prev) => ({
|
|
31
|
+
...prev,
|
|
32
|
+
...tableOptions
|
|
33
|
+
}));
|
|
36
34
|
const state = (0, _tanstack_react_store.useSelector)(table.store, selector, { compare: _tanstack_react_store.shallow });
|
|
37
|
-
const options = (0, _tanstack_react_store.useSelector)(table.optionsStore, (options) => options, { compare: _tanstack_react_store.shallow });
|
|
38
35
|
return (0, react.useMemo)(() => ({
|
|
39
36
|
...table,
|
|
40
|
-
options,
|
|
37
|
+
options: tableOptions,
|
|
41
38
|
state
|
|
42
39
|
}), [
|
|
43
40
|
table,
|
|
44
|
-
|
|
41
|
+
tableOptions,
|
|
45
42
|
state
|
|
46
43
|
]);
|
|
47
44
|
}
|
package/dist/useTable.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useTable.cjs","names":["Subscribe","FlexRender","shallow"],"sources":["../src/useTable.ts"],"sourcesContent":["'use client'\n\nimport {
|
|
1
|
+
{"version":3,"file":"useTable.cjs","names":["reactReactivity","Subscribe","FlexRender","shallow"],"sources":["../src/useTable.ts"],"sourcesContent":["'use client'\n\nimport { useMemo, useState } from 'react'\nimport { constructTable } from '@tanstack/table-core'\nimport { shallow, useSelector } from '@tanstack/react-store'\nimport { reactReactivity } from './reactivity'\nimport { FlexRender } from './FlexRender'\nimport { Subscribe } from './Subscribe'\nimport type { Atom, ReadonlyAtom } from '@tanstack/react-store'\nimport type { FlexRenderProps } from './FlexRender'\nimport type { SubscribePropsWithStore } from './Subscribe'\nimport type {\n CellData,\n RowData,\n Table,\n TableFeatures,\n TableOptions,\n TableState,\n} from '@tanstack/table-core'\nimport type { FunctionComponent, ReactNode } from 'react'\n\nexport type ReactTable<\n TFeatures extends TableFeatures,\n TData extends RowData,\n TSelected = {},\n> = Table<TFeatures, TData> & {\n /**\n * A React HOC (Higher Order Component) that allows you to subscribe to the table state.\n *\n * This is useful for opting into state re-renders for specific parts of the table state.\n *\n * Pass `source` to subscribe to a single atom or store (e.g. `table.atoms.rowSelection`\n * or `table.optionsStore`) instead of the full `table.store`.\n *\n * @example\n * <table.Subscribe selector={(state) => ({ rowSelection: state.rowSelection })}>\n * {({ rowSelection }) => (\n * <tr key={row.id}>...</tr>\n * )}\n * </table.Subscribe>\n *\n * @example\n * <table.Subscribe source={table.atoms.rowSelection}>\n * {(rowSelection) => <div>...</div>}\n * </table.Subscribe>\n *\n * @example\n * <table.Subscribe source={table.atoms.rowSelection} selector={(s) => s?.[row.id]}>\n * {() => <tr key={row.id}>...</tr>}\n * </table.Subscribe>\n */\n /**\n * Overloads (not a single union) so `selector` callbacks get correct contextual\n * types in JSX; a union of two `selector` signatures degrades to implicit `any`.\n *\n * Source **without** `selector` is a separate overload so children receive `TSourceValue`\n * (identity projection). If `selector` were optional on one overload, `TSubSelected`\n * would default to `unknown` instead of inferring from the source.\n *\n * The **source** overloads are listed first so `TSourceValue` is inferred from `source`.\n */\n Subscribe: {\n <TSourceValue>(props: {\n source: Atom<TSourceValue> | ReadonlyAtom<TSourceValue>\n selector?: undefined\n children: ((state: TSourceValue) => ReactNode) | ReactNode\n }): ReturnType<FunctionComponent>\n <TSourceValue, TSubSelected>(props: {\n source: Atom<TSourceValue> | ReadonlyAtom<TSourceValue>\n selector: (state: TSourceValue) => TSubSelected\n children: ((state: TSubSelected) => ReactNode) | ReactNode\n }): ReturnType<FunctionComponent>\n <TSubSelected>(\n props: Omit<\n SubscribePropsWithStore<TFeatures, TData, TSubSelected>,\n 'table'\n >,\n ): ReturnType<FunctionComponent>\n }\n /**\n * A React component that renders headers, cells, or footers with custom markup.\n * Use this utility component instead of manually calling flexRender.\n *\n * @example\n * ```tsx\n * <table.FlexRender cell={cell} />\n * <table.FlexRender header={header} />\n * <table.FlexRender footer={footer} />\n * ```\n *\n * This replaces calling `flexRender` directly like this:\n * ```tsx\n * flexRender(cell.column.columnDef.cell, cell.getContext())\n * flexRender(header.column.columnDef.header, header.getContext())\n * flexRender(footer.column.columnDef.footer, footer.getContext())\n * ```\n */\n FlexRender: <TValue extends CellData = CellData>(\n props: FlexRenderProps<TFeatures, TData, TValue>,\n ) => ReactNode\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: TableOptions<TFeatures, TData>,\n selector: (state: TableState<TFeatures>) => TSelected = () =>\n ({}) as TSelected,\n): ReactTable<TFeatures, TData, TSelected> {\n const [table] = useState(() => {\n const tableInstance = constructTable({\n ...tableOptions,\n _features: {\n coreReativityFeature: reactReactivity(),\n ...tableOptions._features,\n },\n }) as ReactTable<TFeatures, TData, TSelected>\n\n tableInstance.Subscribe = ((props: any) => {\n return Subscribe({\n ...props,\n table: tableInstance,\n })\n }) as ReactTable<TFeatures, TData, TSelected>['Subscribe']\n\n tableInstance.FlexRender = FlexRender\n\n return tableInstance\n })\n\n // sync options on every render\n table.setOptions((prev) => ({\n ...prev,\n ...tableOptions,\n }))\n\n const state = useSelector(table.store, selector, { compare: shallow })\n\n // we know this is not the most efficient way to return the table,\n // but it is required for the react compiler to work\n return useMemo(\n () => ({\n ...table,\n options: tableOptions,\n state,\n }),\n [table, tableOptions, state],\n )\n}\n"],"mappings":";;;;;;;;;;;AA+GA,SAAgB,SAKd,cACA,kBACG,EAAE,GACoC;CACzC,MAAM,CAAC,mCAAwB;EAC7B,MAAM,yDAA+B;GACnC,GAAG;GACH,WAAW;IACT,sBAAsBA,oCAAiB;IACvC,GAAG,aAAa;IACjB;GACF,CAAC;AAEF,gBAAc,cAAc,UAAe;AACzC,UAAOC,4BAAU;IACf,GAAG;IACH,OAAO;IACR,CAAC;;AAGJ,gBAAc,aAAaC;AAE3B,SAAO;GACP;AAGF,OAAM,YAAY,UAAU;EAC1B,GAAG;EACH,GAAG;EACJ,EAAE;CAEH,MAAM,+CAAoB,MAAM,OAAO,UAAU,EAAE,SAASC,+BAAS,CAAC;AAItE,kCACS;EACL,GAAG;EACH,SAAS;EACT;EACD,GACD;EAAC;EAAO;EAAc;EAAM,CAC7B"}
|
package/dist/useTable.d.cts
CHANGED
|
@@ -81,10 +81,7 @@ type ReactTable<TFeatures extends TableFeatures, TData extends RowData, TSelecte
|
|
|
81
81
|
*
|
|
82
82
|
* console.log(table.state.globalFilter)
|
|
83
83
|
*/
|
|
84
|
-
readonly state: Readonly<TSelected
|
|
85
|
-
columns: TableOptions<TFeatures, TData>['columns'];
|
|
86
|
-
data: TableOptions<TFeatures, TData>['data'];
|
|
87
|
-
};
|
|
84
|
+
readonly state: Readonly<TSelected>;
|
|
88
85
|
};
|
|
89
86
|
declare function useTable<TFeatures extends TableFeatures, TData extends RowData, TSelected = {}>(tableOptions: TableOptions<TFeatures, TData>, selector?: (state: TableState<TFeatures>) => TSelected): ReactTable<TFeatures, TData, TSelected>;
|
|
90
87
|
//#endregion
|
package/dist/useTable.d.ts
CHANGED
|
@@ -81,10 +81,7 @@ type ReactTable<TFeatures extends TableFeatures, TData extends RowData, TSelecte
|
|
|
81
81
|
*
|
|
82
82
|
* console.log(table.state.globalFilter)
|
|
83
83
|
*/
|
|
84
|
-
readonly state: Readonly<TSelected
|
|
85
|
-
columns: TableOptions<TFeatures, TData>['columns'];
|
|
86
|
-
data: TableOptions<TFeatures, TData>['data'];
|
|
87
|
-
};
|
|
84
|
+
readonly state: Readonly<TSelected>;
|
|
88
85
|
};
|
|
89
86
|
declare function useTable<TFeatures extends TableFeatures, TData extends RowData, TSelected = {}>(tableOptions: TableOptions<TFeatures, TData>, selector?: (state: TableState<TFeatures>) => TSelected): ReactTable<TFeatures, TData, TSelected>;
|
|
90
87
|
//#endregion
|
package/dist/useTable.js
CHANGED
|
@@ -2,10 +2,10 @@
|
|
|
2
2
|
|
|
3
3
|
import { FlexRender } from "./FlexRender.js";
|
|
4
4
|
import { Subscribe } from "./Subscribe.js";
|
|
5
|
+
import { reactReactivity } from "./reactivity.js";
|
|
5
6
|
import { constructTable } from "@tanstack/table-core";
|
|
6
|
-
import {
|
|
7
|
+
import { useMemo, useState } from "react";
|
|
7
8
|
import { shallow, useSelector } from "@tanstack/react-store";
|
|
8
|
-
import { constructReactivityBindings } from "@tanstack/table-core/reactivity";
|
|
9
9
|
|
|
10
10
|
//#region src/useTable.ts
|
|
11
11
|
function useTable(tableOptions, selector = () => ({})) {
|
|
@@ -13,7 +13,7 @@ function useTable(tableOptions, selector = () => ({})) {
|
|
|
13
13
|
const tableInstance = constructTable({
|
|
14
14
|
...tableOptions,
|
|
15
15
|
_features: {
|
|
16
|
-
coreReativityFeature:
|
|
16
|
+
coreReativityFeature: reactReactivity(),
|
|
17
17
|
...tableOptions._features
|
|
18
18
|
}
|
|
19
19
|
});
|
|
@@ -26,21 +26,18 @@ function useTable(tableOptions, selector = () => ({})) {
|
|
|
26
26
|
tableInstance.FlexRender = FlexRender;
|
|
27
27
|
return tableInstance;
|
|
28
28
|
});
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
}));
|
|
34
|
-
}, [table, tableOptions]);
|
|
29
|
+
table.setOptions((prev) => ({
|
|
30
|
+
...prev,
|
|
31
|
+
...tableOptions
|
|
32
|
+
}));
|
|
35
33
|
const state = useSelector(table.store, selector, { compare: shallow });
|
|
36
|
-
const options = useSelector(table.optionsStore, (options) => options, { compare: shallow });
|
|
37
34
|
return useMemo(() => ({
|
|
38
35
|
...table,
|
|
39
|
-
options,
|
|
36
|
+
options: tableOptions,
|
|
40
37
|
state
|
|
41
38
|
}), [
|
|
42
39
|
table,
|
|
43
|
-
|
|
40
|
+
tableOptions,
|
|
44
41
|
state
|
|
45
42
|
]);
|
|
46
43
|
}
|
package/dist/useTable.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useTable.js","names":[],"sources":["../src/useTable.ts"],"sourcesContent":["'use client'\n\nimport {
|
|
1
|
+
{"version":3,"file":"useTable.js","names":[],"sources":["../src/useTable.ts"],"sourcesContent":["'use client'\n\nimport { useMemo, useState } from 'react'\nimport { constructTable } from '@tanstack/table-core'\nimport { shallow, useSelector } from '@tanstack/react-store'\nimport { reactReactivity } from './reactivity'\nimport { FlexRender } from './FlexRender'\nimport { Subscribe } from './Subscribe'\nimport type { Atom, ReadonlyAtom } from '@tanstack/react-store'\nimport type { FlexRenderProps } from './FlexRender'\nimport type { SubscribePropsWithStore } from './Subscribe'\nimport type {\n CellData,\n RowData,\n Table,\n TableFeatures,\n TableOptions,\n TableState,\n} from '@tanstack/table-core'\nimport type { FunctionComponent, ReactNode } from 'react'\n\nexport type ReactTable<\n TFeatures extends TableFeatures,\n TData extends RowData,\n TSelected = {},\n> = Table<TFeatures, TData> & {\n /**\n * A React HOC (Higher Order Component) that allows you to subscribe to the table state.\n *\n * This is useful for opting into state re-renders for specific parts of the table state.\n *\n * Pass `source` to subscribe to a single atom or store (e.g. `table.atoms.rowSelection`\n * or `table.optionsStore`) instead of the full `table.store`.\n *\n * @example\n * <table.Subscribe selector={(state) => ({ rowSelection: state.rowSelection })}>\n * {({ rowSelection }) => (\n * <tr key={row.id}>...</tr>\n * )}\n * </table.Subscribe>\n *\n * @example\n * <table.Subscribe source={table.atoms.rowSelection}>\n * {(rowSelection) => <div>...</div>}\n * </table.Subscribe>\n *\n * @example\n * <table.Subscribe source={table.atoms.rowSelection} selector={(s) => s?.[row.id]}>\n * {() => <tr key={row.id}>...</tr>}\n * </table.Subscribe>\n */\n /**\n * Overloads (not a single union) so `selector` callbacks get correct contextual\n * types in JSX; a union of two `selector` signatures degrades to implicit `any`.\n *\n * Source **without** `selector` is a separate overload so children receive `TSourceValue`\n * (identity projection). If `selector` were optional on one overload, `TSubSelected`\n * would default to `unknown` instead of inferring from the source.\n *\n * The **source** overloads are listed first so `TSourceValue` is inferred from `source`.\n */\n Subscribe: {\n <TSourceValue>(props: {\n source: Atom<TSourceValue> | ReadonlyAtom<TSourceValue>\n selector?: undefined\n children: ((state: TSourceValue) => ReactNode) | ReactNode\n }): ReturnType<FunctionComponent>\n <TSourceValue, TSubSelected>(props: {\n source: Atom<TSourceValue> | ReadonlyAtom<TSourceValue>\n selector: (state: TSourceValue) => TSubSelected\n children: ((state: TSubSelected) => ReactNode) | ReactNode\n }): ReturnType<FunctionComponent>\n <TSubSelected>(\n props: Omit<\n SubscribePropsWithStore<TFeatures, TData, TSubSelected>,\n 'table'\n >,\n ): ReturnType<FunctionComponent>\n }\n /**\n * A React component that renders headers, cells, or footers with custom markup.\n * Use this utility component instead of manually calling flexRender.\n *\n * @example\n * ```tsx\n * <table.FlexRender cell={cell} />\n * <table.FlexRender header={header} />\n * <table.FlexRender footer={footer} />\n * ```\n *\n * This replaces calling `flexRender` directly like this:\n * ```tsx\n * flexRender(cell.column.columnDef.cell, cell.getContext())\n * flexRender(header.column.columnDef.header, header.getContext())\n * flexRender(footer.column.columnDef.footer, footer.getContext())\n * ```\n */\n FlexRender: <TValue extends CellData = CellData>(\n props: FlexRenderProps<TFeatures, TData, TValue>,\n ) => ReactNode\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: TableOptions<TFeatures, TData>,\n selector: (state: TableState<TFeatures>) => TSelected = () =>\n ({}) as TSelected,\n): ReactTable<TFeatures, TData, TSelected> {\n const [table] = useState(() => {\n const tableInstance = constructTable({\n ...tableOptions,\n _features: {\n coreReativityFeature: reactReactivity(),\n ...tableOptions._features,\n },\n }) as ReactTable<TFeatures, TData, TSelected>\n\n tableInstance.Subscribe = ((props: any) => {\n return Subscribe({\n ...props,\n table: tableInstance,\n })\n }) as ReactTable<TFeatures, TData, TSelected>['Subscribe']\n\n tableInstance.FlexRender = FlexRender\n\n return tableInstance\n })\n\n // sync options on every render\n table.setOptions((prev) => ({\n ...prev,\n ...tableOptions,\n }))\n\n const state = useSelector(table.store, selector, { compare: shallow })\n\n // we know this is not the most efficient way to return the table,\n // but it is required for the react compiler to work\n return useMemo(\n () => ({\n ...table,\n options: tableOptions,\n state,\n }),\n [table, tableOptions, state],\n )\n}\n"],"mappings":";;;;;;;;;;AA+GA,SAAgB,SAKd,cACA,kBACG,EAAE,GACoC;CACzC,MAAM,CAAC,SAAS,eAAe;EAC7B,MAAM,gBAAgB,eAAe;GACnC,GAAG;GACH,WAAW;IACT,sBAAsB,iBAAiB;IACvC,GAAG,aAAa;IACjB;GACF,CAAC;AAEF,gBAAc,cAAc,UAAe;AACzC,UAAO,UAAU;IACf,GAAG;IACH,OAAO;IACR,CAAC;;AAGJ,gBAAc,aAAa;AAE3B,SAAO;GACP;AAGF,OAAM,YAAY,UAAU;EAC1B,GAAG;EACH,GAAG;EACJ,EAAE;CAEH,MAAM,QAAQ,YAAY,MAAM,OAAO,UAAU,EAAE,SAAS,SAAS,CAAC;AAItE,QAAO,eACE;EACL,GAAG;EACH,SAAS;EACT;EACD,GACD;EAAC;EAAO;EAAc;EAAM,CAC7B"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tanstack/react-table",
|
|
3
|
-
"version": "9.0.0-alpha.
|
|
3
|
+
"version": "9.0.0-alpha.43",
|
|
4
4
|
"description": "Headless UI for building powerful tables & datagrids for React.",
|
|
5
5
|
"author": "Tanner Linsley",
|
|
6
6
|
"license": "MIT",
|
|
@@ -53,7 +53,7 @@
|
|
|
53
53
|
],
|
|
54
54
|
"dependencies": {
|
|
55
55
|
"@tanstack/react-store": "^0.11.0",
|
|
56
|
-
"@tanstack/table-core": "9.0.0-alpha.
|
|
56
|
+
"@tanstack/table-core": "9.0.0-alpha.43"
|
|
57
57
|
},
|
|
58
58
|
"devDependencies": {
|
|
59
59
|
"@eslint-react/eslint-plugin": "^5.7.0",
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { batch, createAtom } from '@tanstack/react-store'
|
|
2
|
+
import type {
|
|
3
|
+
TableAtomOptions,
|
|
4
|
+
TableReactivityBindings,
|
|
5
|
+
} from '@tanstack/table-core/reactivity'
|
|
6
|
+
|
|
7
|
+
export function reactReactivity(): TableReactivityBindings {
|
|
8
|
+
return {
|
|
9
|
+
createOptionsStore: false,
|
|
10
|
+
batch,
|
|
11
|
+
untrack: (fn) => fn(),
|
|
12
|
+
createReadonlyAtom: <T>(fn: () => T, options?: TableAtomOptions<T>) => {
|
|
13
|
+
return createAtom(() => fn(), {
|
|
14
|
+
compare: options?.compare,
|
|
15
|
+
})
|
|
16
|
+
},
|
|
17
|
+
createWritableAtom: <T>(value: T, options?: TableAtomOptions<T>) => {
|
|
18
|
+
return createAtom(value, {
|
|
19
|
+
compare: options?.compare,
|
|
20
|
+
})
|
|
21
|
+
},
|
|
22
|
+
}
|
|
23
|
+
}
|
package/src/useTable.ts
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
'use client'
|
|
2
2
|
|
|
3
|
-
import {
|
|
3
|
+
import { useMemo, useState } from 'react'
|
|
4
4
|
import { constructTable } from '@tanstack/table-core'
|
|
5
5
|
import { shallow, useSelector } from '@tanstack/react-store'
|
|
6
|
-
import {
|
|
6
|
+
import { reactReactivity } from './reactivity'
|
|
7
7
|
import { FlexRender } from './FlexRender'
|
|
8
8
|
import { Subscribe } from './Subscribe'
|
|
9
9
|
import type { Atom, ReadonlyAtom } from '@tanstack/react-store'
|
|
@@ -106,10 +106,7 @@ export type ReactTable<
|
|
|
106
106
|
*
|
|
107
107
|
* console.log(table.state.globalFilter)
|
|
108
108
|
*/
|
|
109
|
-
readonly state: Readonly<TSelected>
|
|
110
|
-
columns: TableOptions<TFeatures, TData>['columns']
|
|
111
|
-
data: TableOptions<TFeatures, TData>['data']
|
|
112
|
-
}
|
|
109
|
+
readonly state: Readonly<TSelected>
|
|
113
110
|
}
|
|
114
111
|
|
|
115
112
|
export function useTable<
|
|
@@ -125,7 +122,7 @@ export function useTable<
|
|
|
125
122
|
const tableInstance = constructTable({
|
|
126
123
|
...tableOptions,
|
|
127
124
|
_features: {
|
|
128
|
-
coreReativityFeature:
|
|
125
|
+
coreReativityFeature: reactReactivity(),
|
|
129
126
|
...tableOptions._features,
|
|
130
127
|
},
|
|
131
128
|
}) as ReactTable<TFeatures, TData, TSelected>
|
|
@@ -142,26 +139,22 @@ export function useTable<
|
|
|
142
139
|
return tableInstance
|
|
143
140
|
})
|
|
144
141
|
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
}, [table, tableOptions])
|
|
142
|
+
// sync options on every render
|
|
143
|
+
table.setOptions((prev) => ({
|
|
144
|
+
...prev,
|
|
145
|
+
...tableOptions,
|
|
146
|
+
}))
|
|
151
147
|
|
|
152
148
|
const state = useSelector(table.store, selector, { compare: shallow })
|
|
153
|
-
const options = useSelector(table.optionsStore, (options) => options, {
|
|
154
|
-
compare: shallow,
|
|
155
|
-
})
|
|
156
149
|
|
|
157
150
|
// we know this is not the most efficient way to return the table,
|
|
158
151
|
// but it is required for the react compiler to work
|
|
159
152
|
return useMemo(
|
|
160
153
|
() => ({
|
|
161
154
|
...table,
|
|
162
|
-
options,
|
|
155
|
+
options: tableOptions,
|
|
163
156
|
state,
|
|
164
157
|
}),
|
|
165
|
-
[table,
|
|
166
|
-
)
|
|
158
|
+
[table, tableOptions, state],
|
|
159
|
+
)
|
|
167
160
|
}
|