@tanstack/preact-table 9.0.0-alpha.20 → 9.0.0-alpha.22
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.d.ts +4 -1
- package/dist/esm/useTable.js +9 -17
- package/dist/esm/useTable.js.map +1 -1
- package/package.json +2 -2
- package/src/useTable.ts +14 -19
package/dist/esm/useTable.d.ts
CHANGED
|
@@ -47,6 +47,9 @@ export type PreactTable<TFeatures extends TableFeatures, TData extends RowData,
|
|
|
47
47
|
*
|
|
48
48
|
* console.log(table.state.globalFilter)
|
|
49
49
|
*/
|
|
50
|
-
readonly state: Readonly<TSelected
|
|
50
|
+
readonly state: Readonly<TSelected> & {
|
|
51
|
+
columns: TableOptions<TFeatures, TData>['columns'];
|
|
52
|
+
data: TableOptions<TFeatures, TData>['data'];
|
|
53
|
+
};
|
|
51
54
|
};
|
|
52
55
|
export declare function useTable<TFeatures extends TableFeatures, TData extends RowData, TSelected = {}>(tableOptions: TableOptions<TFeatures, TData>, selector?: (state: TableState<TFeatures>) => TSelected): PreactTable<TFeatures, TData, TSelected>;
|
package/dist/esm/useTable.js
CHANGED
|
@@ -1,9 +1,8 @@
|
|
|
1
|
-
import { useState,
|
|
1
|
+
import { useState, useMemo } from "preact/hooks";
|
|
2
2
|
import { constructTable } from "@tanstack/table-core";
|
|
3
3
|
import { useStore, shallow } from "@tanstack/preact-store";
|
|
4
4
|
import { FlexRender } from "./FlexRender.js";
|
|
5
5
|
import { Subscribe } from "./Subscribe.js";
|
|
6
|
-
const useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
|
|
7
6
|
function useTable(tableOptions, selector = () => ({})) {
|
|
8
7
|
const [table] = useState(() => {
|
|
9
8
|
const tableInstance = constructTable(tableOptions);
|
|
@@ -17,21 +16,14 @@ function useTable(tableOptions, selector = () => ({})) {
|
|
|
17
16
|
...prev,
|
|
18
17
|
...tableOptions
|
|
19
18
|
}));
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
// re-render when columns change
|
|
29
|
-
table.options.data,
|
|
30
|
-
// re-render when data changes
|
|
31
|
-
table.options.state
|
|
32
|
-
// sync preact state to the table store
|
|
33
|
-
]);
|
|
34
|
-
const state = useStore(table.store, selector, { equal: shallow });
|
|
19
|
+
const selectorWithDataAndColumns = (state2) => ({
|
|
20
|
+
columns: tableOptions.columns,
|
|
21
|
+
data: tableOptions.data,
|
|
22
|
+
...selector(state2)
|
|
23
|
+
});
|
|
24
|
+
const state = useStore(table.store, selectorWithDataAndColumns, {
|
|
25
|
+
equal: shallow
|
|
26
|
+
});
|
|
35
27
|
return useMemo(
|
|
36
28
|
() => ({
|
|
37
29
|
...table,
|
package/dist/esm/useTable.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useTable.js","sources":["../../src/useTable.ts"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"useTable.js","sources":["../../src/useTable.ts"],"sourcesContent":["import { useMemo, useState } from 'preact/hooks'\nimport { constructTable } from '@tanstack/table-core'\nimport { shallow, useStore } from '@tanstack/preact-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 { ComponentChildren } from 'preact'\nimport type { FlexRenderProps } from './FlexRender'\nimport type { SubscribeProps } from './Subscribe'\n\nexport type PreactTable<\n TFeatures extends TableFeatures,\n TData extends RowData,\n TSelected = {},\n> = Table<TFeatures, TData> & {\n /**\n * A Preact 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) => ComponentChildren) | ComponentChildren\n }) => ComponentChildren\n /**\n * A Preact 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 ) => ComponentChildren\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 columns: TableOptions<TFeatures, TData>['columns']\n data: TableOptions<TFeatures, TData>['data']\n }\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): PreactTable<TFeatures, TData, TSelected> {\n const [table] = useState(() => {\n const tableInstance = constructTable(tableOptions) as PreactTable<\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 const selectorWithDataAndColumns = (state: TableState<TFeatures>) => ({\n columns: tableOptions.columns,\n data: tableOptions.data,\n ...selector(state),\n })\n\n const state = useStore(table.store, selectorWithDataAndColumns, {\n equal: shallow,\n })\n\n return useMemo(\n () => ({\n ...table,\n state,\n }),\n [state, table],\n ) as PreactTable<TFeatures, TData, TSelected>\n}\n"],"names":["state"],"mappings":";;;;;AA4EO,SAAS,SAKd,cACA,WAAwD,OACrD,CAAA,IACuC;AAC1C,QAAM,CAAC,KAAK,IAAI,SAAS,MAAM;AAC7B,UAAM,gBAAgB,eAAe,YAAY;AAMjD,kBAAc,YAAY,SAAS,eACjC,OACA;AACA,aAAO,UAAU,EAAE,GAAG,OAAO,OAAO,eAAe;AAAA,IACrD;AAEA,kBAAc,aAAa;AAE3B,WAAO;AAAA,EACT,CAAC;AAGD,QAAM,WAAW,CAAC,UAAU;AAAA,IAC1B,GAAG;AAAA,IACH,GAAG;AAAA,EAAA,EACH;AAEF,QAAM,6BAA6B,CAACA,YAAkC;AAAA,IACpE,SAAS,aAAa;AAAA,IACtB,MAAM,aAAa;AAAA,IACnB,GAAG,SAASA,MAAK;AAAA,EAAA;AAGnB,QAAM,QAAQ,SAAS,MAAM,OAAO,4BAA4B;AAAA,IAC9D,OAAO;AAAA,EAAA,CACR;AAED,SAAO;AAAA,IACL,OAAO;AAAA,MACL,GAAG;AAAA,MACH;AAAA,IAAA;AAAA,IAEF,CAAC,OAAO,KAAK;AAAA,EAAA;AAEjB;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tanstack/preact-table",
|
|
3
|
-
"version": "9.0.0-alpha.
|
|
3
|
+
"version": "9.0.0-alpha.22",
|
|
4
4
|
"description": "Headless UI for building powerful tables & datagrids for Preact.",
|
|
5
5
|
"author": "Tanner Linsley",
|
|
6
6
|
"license": "MIT",
|
|
@@ -43,7 +43,7 @@
|
|
|
43
43
|
],
|
|
44
44
|
"dependencies": {
|
|
45
45
|
"@tanstack/preact-store": "^0.11.1",
|
|
46
|
-
"@tanstack/table-core": "9.0.0-alpha.
|
|
46
|
+
"@tanstack/table-core": "9.0.0-alpha.21"
|
|
47
47
|
},
|
|
48
48
|
"devDependencies": {
|
|
49
49
|
"@preact/preset-vite": "^2.10.3",
|
package/src/useTable.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { useMemo, useState } from 'preact/hooks'
|
|
2
2
|
import { constructTable } from '@tanstack/table-core'
|
|
3
3
|
import { shallow, useStore } from '@tanstack/preact-store'
|
|
4
4
|
import { FlexRender } from './FlexRender'
|
|
@@ -16,9 +16,6 @@ import type { ComponentChildren } from 'preact'
|
|
|
16
16
|
import type { FlexRenderProps } from './FlexRender'
|
|
17
17
|
import type { SubscribeProps } from './Subscribe'
|
|
18
18
|
|
|
19
|
-
const useIsomorphicLayoutEffect =
|
|
20
|
-
typeof window !== 'undefined' ? useLayoutEffect : useEffect
|
|
21
|
-
|
|
22
19
|
export type PreactTable<
|
|
23
20
|
TFeatures extends TableFeatures,
|
|
24
21
|
TData extends RowData,
|
|
@@ -71,7 +68,10 @@ export type PreactTable<
|
|
|
71
68
|
*
|
|
72
69
|
* console.log(table.state.globalFilter)
|
|
73
70
|
*/
|
|
74
|
-
readonly state: Readonly<TSelected>
|
|
71
|
+
readonly state: Readonly<TSelected> & {
|
|
72
|
+
columns: TableOptions<TFeatures, TData>['columns']
|
|
73
|
+
data: TableOptions<TFeatures, TData>['data']
|
|
74
|
+
}
|
|
75
75
|
}
|
|
76
76
|
|
|
77
77
|
export function useTable<
|
|
@@ -107,20 +107,15 @@ export function useTable<
|
|
|
107
107
|
...tableOptions,
|
|
108
108
|
}))
|
|
109
109
|
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
}))
|
|
116
|
-
})
|
|
117
|
-
}, [
|
|
118
|
-
table.options.columns, // re-render when columns change
|
|
119
|
-
table.options.data, // re-render when data changes
|
|
120
|
-
table.options.state, // sync preact state to the table store
|
|
121
|
-
])
|
|
110
|
+
const selectorWithDataAndColumns = (state: TableState<TFeatures>) => ({
|
|
111
|
+
columns: tableOptions.columns,
|
|
112
|
+
data: tableOptions.data,
|
|
113
|
+
...selector(state),
|
|
114
|
+
})
|
|
122
115
|
|
|
123
|
-
const state = useStore(table.store,
|
|
116
|
+
const state = useStore(table.store, selectorWithDataAndColumns, {
|
|
117
|
+
equal: shallow,
|
|
118
|
+
})
|
|
124
119
|
|
|
125
120
|
return useMemo(
|
|
126
121
|
() => ({
|
|
@@ -128,5 +123,5 @@ export function useTable<
|
|
|
128
123
|
state,
|
|
129
124
|
}),
|
|
130
125
|
[state, table],
|
|
131
|
-
)
|
|
126
|
+
) as PreactTable<TFeatures, TData, TSelected>
|
|
132
127
|
}
|