@tanstack/preact-table 9.0.0-alpha.32 → 9.0.0-alpha.33
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/Subscribe.cjs +1 -1
- package/dist/Subscribe.cjs.map +1 -1
- package/dist/Subscribe.js +2 -2
- package/dist/Subscribe.js.map +1 -1
- package/dist/useTable.cjs +1 -1
- package/dist/useTable.cjs.map +1 -1
- package/dist/useTable.js +2 -2
- package/dist/useTable.js.map +1 -1
- package/package.json +3 -3
- package/src/Subscribe.ts +2 -2
- package/src/useTable.ts +3 -3
package/dist/Subscribe.cjs
CHANGED
|
@@ -27,7 +27,7 @@ let _tanstack_preact_store = require("@tanstack/preact-store");
|
|
|
27
27
|
* ```
|
|
28
28
|
*/
|
|
29
29
|
function Subscribe(props) {
|
|
30
|
-
const selected = (0, _tanstack_preact_store.
|
|
30
|
+
const selected = (0, _tanstack_preact_store.useSelector)(props.table.store, props.selector);
|
|
31
31
|
return typeof props.children === "function" ? props.children(selected) : props.children;
|
|
32
32
|
}
|
|
33
33
|
|
package/dist/Subscribe.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Subscribe.cjs","names":[],"sources":["../src/Subscribe.ts"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"Subscribe.cjs","names":[],"sources":["../src/Subscribe.ts"],"sourcesContent":["import { useSelector } from '@tanstack/preact-store'\nimport type {\n NoInfer,\n RowData,\n Table,\n TableFeatures,\n TableState,\n} from '@tanstack/table-core'\nimport type { ComponentChildren } from 'preact'\n\nexport type SubscribeProps<\n TFeatures extends TableFeatures,\n TData extends RowData,\n TSelected = {},\n> = {\n /**\n * The table instance to subscribe to. Required when using as a standalone component.\n * Not needed when using as `table.Subscribe`.\n */\n table: Table<TFeatures, TData>\n /**\n * A selector function that selects the part of the table state to subscribe to.\n * This allows for fine-grained reactivity by only re-rendering when the selected state changes.\n */\n selector: (state: NoInfer<TableState<TFeatures>>) => TSelected\n /**\n * The children to render. Can be a function that receives the selected state, or a Preact node.\n */\n children: ((state: TSelected) => ComponentChildren) | ComponentChildren\n}\n\n/**\n * A Preact 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 * ```tsx\n * // As a standalone component\n * <Subscribe table={table} selector={(state) => ({ rowSelection: state.rowSelection })}>\n * {({ rowSelection }) => (\n * <div>Selected rows: {Object.keys(rowSelection).length}</div>\n * )}\n * </Subscribe>\n * ```\n *\n * @example\n * ```tsx\n * // As table.Subscribe (table instance method)\n * <table.Subscribe selector={(state) => ({ rowSelection: state.rowSelection })}>\n * {({ rowSelection }) => (\n * <div>Selected rows: {Object.keys(rowSelection).length}</div>\n * )}\n * </table.Subscribe>\n * ```\n */\nexport function Subscribe<\n TFeatures extends TableFeatures,\n TData extends RowData,\n TSelected = {},\n>(props: SubscribeProps<TFeatures, TData, TSelected>): ComponentChildren {\n const selected = useSelector(props.table.store, props.selector)\n\n return typeof props.children === 'function'\n ? props.children(selected)\n : props.children\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwDA,SAAgB,UAId,OAAuE;CACvE,MAAM,mDAAuB,MAAM,MAAM,OAAO,MAAM,SAAS;AAE/D,QAAO,OAAO,MAAM,aAAa,aAC7B,MAAM,SAAS,SAAS,GACxB,MAAM"}
|
package/dist/Subscribe.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { useSelector } from "@tanstack/preact-store";
|
|
2
2
|
|
|
3
3
|
//#region src/Subscribe.ts
|
|
4
4
|
/**
|
|
@@ -27,7 +27,7 @@ import { useStore } from "@tanstack/preact-store";
|
|
|
27
27
|
* ```
|
|
28
28
|
*/
|
|
29
29
|
function Subscribe(props) {
|
|
30
|
-
const selected =
|
|
30
|
+
const selected = useSelector(props.table.store, props.selector);
|
|
31
31
|
return typeof props.children === "function" ? props.children(selected) : props.children;
|
|
32
32
|
}
|
|
33
33
|
|
package/dist/Subscribe.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Subscribe.js","names":[],"sources":["../src/Subscribe.ts"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"Subscribe.js","names":[],"sources":["../src/Subscribe.ts"],"sourcesContent":["import { useSelector } from '@tanstack/preact-store'\nimport type {\n NoInfer,\n RowData,\n Table,\n TableFeatures,\n TableState,\n} from '@tanstack/table-core'\nimport type { ComponentChildren } from 'preact'\n\nexport type SubscribeProps<\n TFeatures extends TableFeatures,\n TData extends RowData,\n TSelected = {},\n> = {\n /**\n * The table instance to subscribe to. Required when using as a standalone component.\n * Not needed when using as `table.Subscribe`.\n */\n table: Table<TFeatures, TData>\n /**\n * A selector function that selects the part of the table state to subscribe to.\n * This allows for fine-grained reactivity by only re-rendering when the selected state changes.\n */\n selector: (state: NoInfer<TableState<TFeatures>>) => TSelected\n /**\n * The children to render. Can be a function that receives the selected state, or a Preact node.\n */\n children: ((state: TSelected) => ComponentChildren) | ComponentChildren\n}\n\n/**\n * A Preact 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 * ```tsx\n * // As a standalone component\n * <Subscribe table={table} selector={(state) => ({ rowSelection: state.rowSelection })}>\n * {({ rowSelection }) => (\n * <div>Selected rows: {Object.keys(rowSelection).length}</div>\n * )}\n * </Subscribe>\n * ```\n *\n * @example\n * ```tsx\n * // As table.Subscribe (table instance method)\n * <table.Subscribe selector={(state) => ({ rowSelection: state.rowSelection })}>\n * {({ rowSelection }) => (\n * <div>Selected rows: {Object.keys(rowSelection).length}</div>\n * )}\n * </table.Subscribe>\n * ```\n */\nexport function Subscribe<\n TFeatures extends TableFeatures,\n TData extends RowData,\n TSelected = {},\n>(props: SubscribeProps<TFeatures, TData, TSelected>): ComponentChildren {\n const selected = useSelector(props.table.store, props.selector)\n\n return typeof props.children === 'function'\n ? props.children(selected)\n : props.children\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwDA,SAAgB,UAId,OAAuE;CACvE,MAAM,WAAW,YAAY,MAAM,MAAM,OAAO,MAAM,SAAS;AAE/D,QAAO,OAAO,MAAM,aAAa,aAC7B,MAAM,SAAS,SAAS,GACxB,MAAM"}
|
package/dist/useTable.cjs
CHANGED
|
@@ -26,7 +26,7 @@ function useTable(tableOptions, selector = () => ({})) {
|
|
|
26
26
|
data: tableOptions.data,
|
|
27
27
|
...selector(state)
|
|
28
28
|
});
|
|
29
|
-
const state = (0, _tanstack_preact_store.
|
|
29
|
+
const state = (0, _tanstack_preact_store.useSelector)(table.store, selectorWithDataAndColumns, { compare: _tanstack_preact_store.shallow });
|
|
30
30
|
return (0, preact_hooks.useMemo)(() => ({
|
|
31
31
|
...table,
|
|
32
32
|
state
|
package/dist/useTable.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useTable.cjs","names":["Subscribe","FlexRender","shallow"],"sources":["../src/useTable.ts"],"sourcesContent":["import { useMemo, useState } from 'preact/hooks'\nimport { constructTable } from '@tanstack/table-core'\nimport { shallow,
|
|
1
|
+
{"version":3,"file":"useTable.cjs","names":["Subscribe","FlexRender","shallow"],"sources":["../src/useTable.ts"],"sourcesContent":["import { useMemo, useState } from 'preact/hooks'\nimport { constructTable } from '@tanstack/table-core'\nimport { shallow, useSelector } 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 = useSelector(table.store, selectorWithDataAndColumns, {\n compare: shallow,\n })\n\n return useMemo(\n () => ({\n ...table,\n state,\n }),\n [state, table],\n ) as PreactTable<TFeatures, TData, TSelected>\n}\n"],"mappings":";;;;;;;AA4EA,SAAgB,SAKd,cACA,kBACG,EAAE,GACqC;CAC1C,MAAM,CAAC,0CAAwB;EAC7B,MAAM,yDAA+B,aAAa;AAMlD,gBAAc,YAAY,SAAS,eACjC,OACA;AACA,UAAOA,4BAAU;IAAE,GAAG;IAAO,OAAO;IAAe,CAAC;;AAGtD,gBAAc,aAAaC;AAE3B,SAAO;GACP;AAGF,OAAM,YAAY,UAAU;EAC1B,GAAG;EACH,GAAG;EACJ,EAAE;CAEH,MAAM,8BAA8B,WAAkC;EACpE,SAAS,aAAa;EACtB,MAAM,aAAa;EACnB,GAAG,SAAS,MAAM;EACnB;CAED,MAAM,gDAAoB,MAAM,OAAO,4BAA4B,EACjE,SAASC,gCACV,CAAC;AAEF,yCACS;EACL,GAAG;EACH;EACD,GACD,CAAC,OAAO,MAAM,CACf"}
|
package/dist/useTable.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { FlexRender } from "./FlexRender.js";
|
|
2
2
|
import { Subscribe } from "./Subscribe.js";
|
|
3
3
|
import { constructTable } from "@tanstack/table-core";
|
|
4
|
-
import { shallow,
|
|
4
|
+
import { shallow, useSelector } from "@tanstack/preact-store";
|
|
5
5
|
import { useMemo, useState } from "preact/hooks";
|
|
6
6
|
|
|
7
7
|
//#region src/useTable.ts
|
|
@@ -26,7 +26,7 @@ function useTable(tableOptions, selector = () => ({})) {
|
|
|
26
26
|
data: tableOptions.data,
|
|
27
27
|
...selector(state)
|
|
28
28
|
});
|
|
29
|
-
const state =
|
|
29
|
+
const state = useSelector(table.store, selectorWithDataAndColumns, { compare: shallow });
|
|
30
30
|
return useMemo(() => ({
|
|
31
31
|
...table,
|
|
32
32
|
state
|
package/dist/useTable.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useTable.js","names":[],"sources":["../src/useTable.ts"],"sourcesContent":["import { useMemo, useState } from 'preact/hooks'\nimport { constructTable } from '@tanstack/table-core'\nimport { shallow,
|
|
1
|
+
{"version":3,"file":"useTable.js","names":[],"sources":["../src/useTable.ts"],"sourcesContent":["import { useMemo, useState } from 'preact/hooks'\nimport { constructTable } from '@tanstack/table-core'\nimport { shallow, useSelector } 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 = useSelector(table.store, selectorWithDataAndColumns, {\n compare: shallow,\n })\n\n return useMemo(\n () => ({\n ...table,\n state,\n }),\n [state, table],\n ) as PreactTable<TFeatures, TData, TSelected>\n}\n"],"mappings":";;;;;;;AA4EA,SAAgB,SAKd,cACA,kBACG,EAAE,GACqC;CAC1C,MAAM,CAAC,SAAS,eAAe;EAC7B,MAAM,gBAAgB,eAAe,aAAa;AAMlD,gBAAc,YAAY,SAAS,eACjC,OACA;AACA,UAAO,UAAU;IAAE,GAAG;IAAO,OAAO;IAAe,CAAC;;AAGtD,gBAAc,aAAa;AAE3B,SAAO;GACP;AAGF,OAAM,YAAY,UAAU;EAC1B,GAAG;EACH,GAAG;EACJ,EAAE;CAEH,MAAM,8BAA8B,WAAkC;EACpE,SAAS,aAAa;EACtB,MAAM,aAAa;EACnB,GAAG,SAAS,MAAM;EACnB;CAED,MAAM,QAAQ,YAAY,MAAM,OAAO,4BAA4B,EACjE,SAAS,SACV,CAAC;AAEF,QAAO,eACE;EACL,GAAG;EACH;EACD,GACD,CAAC,OAAO,MAAM,CACf"}
|
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.33",
|
|
4
4
|
"description": "Headless UI for building powerful tables & datagrids for Preact.",
|
|
5
5
|
"author": "Tanner Linsley",
|
|
6
6
|
"license": "MIT",
|
|
@@ -40,8 +40,8 @@
|
|
|
40
40
|
"src"
|
|
41
41
|
],
|
|
42
42
|
"dependencies": {
|
|
43
|
-
"@tanstack/preact-store": "^0.
|
|
44
|
-
"@tanstack/table-core": "9.0.0-alpha.
|
|
43
|
+
"@tanstack/preact-store": "^0.13.0",
|
|
44
|
+
"@tanstack/table-core": "9.0.0-alpha.33"
|
|
45
45
|
},
|
|
46
46
|
"devDependencies": {
|
|
47
47
|
"@preact/preset-vite": "^2.10.5",
|
package/src/Subscribe.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { useSelector } from '@tanstack/preact-store'
|
|
2
2
|
import type {
|
|
3
3
|
NoInfer,
|
|
4
4
|
RowData,
|
|
@@ -59,7 +59,7 @@ export function Subscribe<
|
|
|
59
59
|
TData extends RowData,
|
|
60
60
|
TSelected = {},
|
|
61
61
|
>(props: SubscribeProps<TFeatures, TData, TSelected>): ComponentChildren {
|
|
62
|
-
const selected =
|
|
62
|
+
const selected = useSelector(props.table.store, props.selector)
|
|
63
63
|
|
|
64
64
|
return typeof props.children === 'function'
|
|
65
65
|
? props.children(selected)
|
package/src/useTable.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { useMemo, useState } from 'preact/hooks'
|
|
2
2
|
import { constructTable } from '@tanstack/table-core'
|
|
3
|
-
import { shallow,
|
|
3
|
+
import { shallow, useSelector } from '@tanstack/preact-store'
|
|
4
4
|
import { FlexRender } from './FlexRender'
|
|
5
5
|
import { Subscribe } from './Subscribe'
|
|
6
6
|
import type {
|
|
@@ -113,8 +113,8 @@ export function useTable<
|
|
|
113
113
|
...selector(state),
|
|
114
114
|
})
|
|
115
115
|
|
|
116
|
-
const state =
|
|
117
|
-
|
|
116
|
+
const state = useSelector(table.store, selectorWithDataAndColumns, {
|
|
117
|
+
compare: shallow,
|
|
118
118
|
})
|
|
119
119
|
|
|
120
120
|
return useMemo(
|