@tanstack/react-table 9.0.0-alpha.11 → 9.0.0-alpha.12
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/esm/useTable.js +0 -4
- package/dist/esm/useTable.js.map +1 -1
- package/package.json +4 -4
- package/src/useTable.ts +0 -6
package/dist/esm/useTable.js
CHANGED
|
@@ -18,10 +18,6 @@ function useTable(tableOptions, selector = () => ({})) {
|
|
|
18
18
|
...prev,
|
|
19
19
|
...tableOptions
|
|
20
20
|
}));
|
|
21
|
-
useIsomorphicLayoutEffect(() => {
|
|
22
|
-
const cleanup = table.store.mount();
|
|
23
|
-
return cleanup;
|
|
24
|
-
}, [table]);
|
|
25
21
|
useIsomorphicLayoutEffect(() => {
|
|
26
22
|
queueMicrotask(() => {
|
|
27
23
|
table.baseStore.setState((prev) => ({
|
package/dist/esm/useTable.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useTable.js","sources":["../../src/useTable.ts"],"sourcesContent":["'use client'\nimport { useEffect, useLayoutEffect, useMemo, useState } from 'react'\nimport { constructTable } from '@tanstack/table-core'\nimport { useStore } from '@tanstack/react-store'\nimport { FlexRender } from './FlexRender'\nimport { Subscribe } from './Subscribe'\nimport type {\n CellData,\n NoInfer,\n RowData,\n Table,\n TableFeatures,\n TableOptions,\n TableState,\n} from '@tanstack/table-core'\nimport type { FunctionComponent, ReactNode } from 'react'\nimport type { FlexRenderProps } from './FlexRender'\nimport type { SubscribeProps } from './Subscribe'\n\nconst useIsomorphicLayoutEffect =\n typeof window !== 'undefined' ? useLayoutEffect : useEffect\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 * @example\n * <table.Subscribe selector={(state) => ({ rowSelection: state.rowSelection })}>\n * {({ rowSelection }) => ( // important to include `{() => {()}}` syntax\n * <tr key={row.id}>\n // render the row\n * </tr>\n * ))}\n * </table.Subscribe>\n */\n Subscribe: <TSelected>(props: {\n selector: (state: NoInfer<TableState<TFeatures>>) => TSelected\n children: ((state: TSelected) => ReactNode) | ReactNode\n }) => ReturnType<FunctionComponent>\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(tableOptions) as ReactTable<\n TFeatures,\n TData,\n TSelected\n >\n\n tableInstance.Subscribe = function SubscribeBound<TSelected>(\n props: Omit<SubscribeProps<TFeatures, TData, TSelected>, 'table'>,\n ) {\n return Subscribe({ ...props, table: tableInstance })\n }\n\n tableInstance.FlexRender = FlexRender\n\n return tableInstance\n })\n\n // sync table options on every render\n table.setOptions((prev) => ({\n ...prev,\n ...tableOptions,\n }))\n\n
|
|
1
|
+
{"version":3,"file":"useTable.js","sources":["../../src/useTable.ts"],"sourcesContent":["'use client'\nimport { useEffect, useLayoutEffect, useMemo, useState } from 'react'\nimport { constructTable } from '@tanstack/table-core'\nimport { useStore } from '@tanstack/react-store'\nimport { FlexRender } from './FlexRender'\nimport { Subscribe } from './Subscribe'\nimport type {\n CellData,\n NoInfer,\n RowData,\n Table,\n TableFeatures,\n TableOptions,\n TableState,\n} from '@tanstack/table-core'\nimport type { FunctionComponent, ReactNode } from 'react'\nimport type { FlexRenderProps } from './FlexRender'\nimport type { SubscribeProps } from './Subscribe'\n\nconst useIsomorphicLayoutEffect =\n typeof window !== 'undefined' ? useLayoutEffect : useEffect\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 * @example\n * <table.Subscribe selector={(state) => ({ rowSelection: state.rowSelection })}>\n * {({ rowSelection }) => ( // important to include `{() => {()}}` syntax\n * <tr key={row.id}>\n // render the row\n * </tr>\n * ))}\n * </table.Subscribe>\n */\n Subscribe: <TSelected>(props: {\n selector: (state: NoInfer<TableState<TFeatures>>) => TSelected\n children: ((state: TSelected) => ReactNode) | ReactNode\n }) => ReturnType<FunctionComponent>\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(tableOptions) as ReactTable<\n TFeatures,\n TData,\n TSelected\n >\n\n tableInstance.Subscribe = function SubscribeBound<TSelected>(\n props: Omit<SubscribeProps<TFeatures, TData, TSelected>, 'table'>,\n ) {\n return Subscribe({ ...props, table: tableInstance })\n }\n\n tableInstance.FlexRender = FlexRender\n\n return tableInstance\n })\n\n // sync table options on every render\n table.setOptions((prev) => ({\n ...prev,\n ...tableOptions,\n }))\n\n useIsomorphicLayoutEffect(() => {\n // prevent race condition between table.setOptions and table.baseStore.setState\n queueMicrotask(() => {\n table.baseStore.setState((prev) => ({\n ...prev,\n }))\n })\n }, [\n table.options.columns, // re-render when columns change\n table.options.data, // re-render when data changes\n table.options.state, // sync react state to the table store\n ])\n\n const state = useStore(table.store, selector)\n\n return useMemo(\n () => ({\n ...table,\n state,\n }),\n [state, table],\n )\n}\n"],"names":[],"mappings":";;;;;;AAmBA;AA0DO;AASL;AACE;AAMA;AAGE;AAAmD;AAGrD;AAEA;AAAO;AAIT;AAA4B;AACvB;AACA;AAGL;AAEE;AACE;AAAoC;AAC/B;AACH;AACH;AACA;AACa;AAAA;AACA;AAAA;AACA;AAAA;AAGhB;AAEA;AAAO;AACE;AACF;AACH;AAAA;AAEW;AAEjB;;;;"}
|
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.12",
|
|
4
4
|
"description": "Headless UI for building powerful tables & datagrids for React.",
|
|
5
5
|
"author": "Tanner Linsley",
|
|
6
6
|
"license": "MIT",
|
|
@@ -42,11 +42,11 @@
|
|
|
42
42
|
"src"
|
|
43
43
|
],
|
|
44
44
|
"dependencies": {
|
|
45
|
-
"@tanstack/react-store": "^0.
|
|
46
|
-
"@tanstack/table-core": "9.0.0-alpha.
|
|
45
|
+
"@tanstack/react-store": "^0.9.1",
|
|
46
|
+
"@tanstack/table-core": "9.0.0-alpha.12"
|
|
47
47
|
},
|
|
48
48
|
"devDependencies": {
|
|
49
|
-
"@eslint-react/eslint-plugin": "^2.
|
|
49
|
+
"@eslint-react/eslint-plugin": "^2.13.0",
|
|
50
50
|
"@types/react": "^19.2.10",
|
|
51
51
|
"@vitejs/plugin-react": "^5.1.2",
|
|
52
52
|
"eslint-plugin-react-compiler": "19.1.0-rc.2",
|
package/src/useTable.ts
CHANGED
|
@@ -108,12 +108,6 @@ export function useTable<
|
|
|
108
108
|
...tableOptions,
|
|
109
109
|
}))
|
|
110
110
|
|
|
111
|
-
// Mount the derived store to register it on the dependency graph
|
|
112
|
-
useIsomorphicLayoutEffect(() => {
|
|
113
|
-
const cleanup = table.store.mount()
|
|
114
|
-
return cleanup
|
|
115
|
-
}, [table])
|
|
116
|
-
|
|
117
111
|
useIsomorphicLayoutEffect(() => {
|
|
118
112
|
// prevent race condition between table.setOptions and table.baseStore.setState
|
|
119
113
|
queueMicrotask(() => {
|