@tanstack/react-table 9.0.0-alpha.19 → 9.0.0-alpha.20

package/dist/esm/useTable.js

@@ -1,9 +1,10 @@
 "use client";
-import { useState, useEffect, useMemo } from "react";
+import { useState, useLayoutEffect, useEffect, useMemo } from "react";
 import { constructTable } from "@tanstack/table-core";
 import { useStore, shallow } from "@tanstack/react-store";
 import { FlexRender } from "./FlexRender.js";
 import { Subscribe } from "./Subscribe.js";
+const useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
 function useTable(tableOptions, selector = () => ({})) {
   const [table] = useState(() => {
     const tableInstance = constructTable(tableOptions);
@@ -13,12 +14,24 @@ function useTable(tableOptions, selector = () => ({})) {
     tableInstance.FlexRender = FlexRender;
     return tableInstance;
   });
-  useEffect(() => {
-    table.setOptions((prev) => ({
-      ...prev,
-      ...tableOptions
-    }));
-  }, [table, tableOptions]);
+  table.setOptions((prev) => ({
+    ...prev,
+    ...tableOptions
+  }));
+  useIsomorphicLayoutEffect(() => {
+    queueMicrotask(() => {
+      table.baseStore.setState((prev) => ({
+        ...prev
+      }));
+    });
+  }, [
+    table.options.columns,
+    // re-render when columns change
+    table.options.data,
+    // re-render when data changes
+    table.options.state
+    // sync react state to the table store
+  ]);
   const state = useStore(table.store, selector, shallow);
   return useMemo(
     () => ({

package/dist/esm/useTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"useTable.js","sources":["../../src/useTable.ts"],"sourcesContent":["'use client'\n\nimport { useEffect, useLayoutEffect, useMemo, useState } from 'react'\nimport { constructTable } from '@tanstack/table-core'\nimport { shallow, 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  useEffect(() => {\n    // sync table options on every render\n    table.setOptions((prev) => ({\n      ...prev,\n      ...tableOptions,\n    }))\n  }, [table, tableOptions])\n\n  const state = useStore(table.store, selector, shallow)\n\n  return useMemo(\n    () => ({\n      ...table,\n      state,\n    }),\n    [state, table],\n  )\n}\n"],"names":[],"mappings":";;;;;;AA8EO;AASL;AACE;AAMA;AAGE;AAAmD;AAGrD;AAEA;AAAO;AAGT;AAEE;AAA4B;AACvB;AACA;AACH;AAGJ;AAEA;AAAO;AACE;AACF;AACH;AAAA;AAEW;AAEjB;;;;"}
+{"version":3,"file":"useTable.js","sources":["../../src/useTable.ts"],"sourcesContent":["'use client'\n\nimport { useEffect, useLayoutEffect, useMemo, useState } from 'react'\nimport { constructTable } from '@tanstack/table-core'\nimport { shallow, 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, shallow)\n\n  return useMemo(\n    () => ({\n      ...table,\n      state,\n    }),\n    [state, table],\n  )\n}\n"],"names":[],"mappings":";;;;;;AAoBA;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

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/react-table",
-  "version": "9.0.0-alpha.19",
+  "version": "9.0.0-alpha.20",
   "description": "Headless UI for building powerful tables & datagrids for React.",
   "author": "Tanner Linsley",
   "license": "MIT",

package/src/useTable.ts

@@ -103,13 +103,24 @@ export function useTable<
     return tableInstance
   })
 
-  useEffect(() => {
-    // sync table options on every render
-    table.setOptions((prev) => ({
-      ...prev,
-      ...tableOptions,
-    }))
-  }, [table, tableOptions])
+  // sync table options on every render
+  table.setOptions((prev) => ({
+    ...prev,
+    ...tableOptions,
+  }))
+
+  useIsomorphicLayoutEffect(() => {
+    // prevent race condition between table.setOptions and table.baseStore.setState
+    queueMicrotask(() => {
+      table.baseStore.setState((prev) => ({
+        ...prev,
+      }))
+    })
+  }, [
+    table.options.columns, // re-render when columns change
+    table.options.data, // re-render when data changes
+    table.options.state, // sync react state to the table store
+  ])
 
   const state = useStore(table.store, selector, shallow)