@tanstack/preact-table 9.0.0-alpha.14 → 9.0.0-alpha.20

package/dist/esm/useTable.js

@@ -1,6 +1,6 @@
 import { useState, useLayoutEffect, useEffect, useMemo } from "preact/hooks";
 import { constructTable } from "@tanstack/table-core";
-import { useStore } from "@tanstack/preact-store";
+import { useStore, shallow } from "@tanstack/preact-store";
 import { FlexRender } from "./FlexRender.js";
 import { Subscribe } from "./Subscribe.js";
 const useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
@@ -31,7 +31,7 @@ function useTable(tableOptions, selector = () => ({})) {
     table.options.state
     // sync preact state to the table store
   ]);
-  const state = useStore(table.store, selector);
+  const state = useStore(table.store, selector, { equal: shallow });
   return useMemo(
     () => ({
       ...table,

package/dist/esm/useTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"useTable.js","sources":["../../src/useTable.ts"],"sourcesContent":["import { useEffect, useLayoutEffect, useMemo, useState } from 'preact/hooks'\nimport { constructTable } from '@tanstack/table-core'\nimport { 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\nconst useIsomorphicLayoutEffect =\n  typeof window !== 'undefined' ? useLayoutEffect : useEffect\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}\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  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 preact 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":";;;;;AAkBA,MAAM,4BACJ,OAAO,WAAW,cAAc,kBAAkB;AAyD7C,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,4BAA0B,MAAM;AAE9B,mBAAe,MAAM;AACnB,YAAM,UAAU,SAAS,CAAC,UAAU;AAAA,QAClC,GAAG;AAAA,MAAA,EACH;AAAA,IACJ,CAAC;AAAA,EACH,GAAG;AAAA,IACD,MAAM,QAAQ;AAAA;AAAA,IACd,MAAM,QAAQ;AAAA;AAAA,IACd,MAAM,QAAQ;AAAA;AAAA,EAAA,CACf;AAED,QAAM,QAAQ,SAAS,MAAM,OAAO,QAAQ;AAE5C,SAAO;AAAA,IACL,OAAO;AAAA,MACL,GAAG;AAAA,MACH;AAAA,IAAA;AAAA,IAEF,CAAC,OAAO,KAAK;AAAA,EAAA;AAEjB;"}
+{"version":3,"file":"useTable.js","sources":["../../src/useTable.ts"],"sourcesContent":["import { useEffect, useLayoutEffect, 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\nconst useIsomorphicLayoutEffect =\n  typeof window !== 'undefined' ? useLayoutEffect : useEffect\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}\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  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 preact state to the table store\n  ])\n\n  const state = useStore(table.store, selector, { equal: shallow })\n\n  return useMemo(\n    () => ({\n      ...table,\n      state,\n    }),\n    [state, table],\n  )\n}\n"],"names":[],"mappings":";;;;;AAkBA,MAAM,4BACJ,OAAO,WAAW,cAAc,kBAAkB;AAyD7C,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,4BAA0B,MAAM;AAE9B,mBAAe,MAAM;AACnB,YAAM,UAAU,SAAS,CAAC,UAAU;AAAA,QAClC,GAAG;AAAA,MAAA,EACH;AAAA,IACJ,CAAC;AAAA,EACH,GAAG;AAAA,IACD,MAAM,QAAQ;AAAA;AAAA,IACd,MAAM,QAAQ;AAAA;AAAA,IACd,MAAM,QAAQ;AAAA;AAAA,EAAA,CACf;AAED,QAAM,QAAQ,SAAS,MAAM,OAAO,UAAU,EAAE,OAAO,SAAS;AAEhE,SAAO;AAAA,IACL,OAAO;AAAA,MACL,GAAG;AAAA,MACH;AAAA,IAAA;AAAA,IAEF,CAAC,OAAO,KAAK;AAAA,EAAA;AAEjB;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/preact-table",
-  "version": "9.0.0-alpha.14",
+  "version": "9.0.0-alpha.20",
   "description": "Headless UI for building powerful tables & datagrids for Preact.",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -43,7 +43,7 @@
   ],
   "dependencies": {
     "@tanstack/preact-store": "^0.11.1",
-    "@tanstack/table-core": "9.0.0-alpha.13"
+    "@tanstack/table-core": "9.0.0-alpha.16"
   },
   "devDependencies": {
     "@preact/preset-vite": "^2.10.3",

package/src/useTable.ts

@@ -1,6 +1,6 @@
 import { useEffect, useLayoutEffect, useMemo, useState } from 'preact/hooks'
 import { constructTable } from '@tanstack/table-core'
-import { useStore } from '@tanstack/preact-store'
+import { shallow, useStore } from '@tanstack/preact-store'
 import { FlexRender } from './FlexRender'
 import { Subscribe } from './Subscribe'
 import type {
@@ -120,7 +120,7 @@ export function useTable<
     table.options.state, // sync preact state to the table store
   ])
 
-  const state = useStore(table.store, selector)
+  const state = useStore(table.store, selector, { equal: shallow })
 
   return useMemo(
     () => ({