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

package/dist/esm/useTable.d.ts

@@ -47,6 +47,9 @@ export type ReactTable<TFeatures extends TableFeatures, TData extends RowData, T
      *
      * console.log(table.state.globalFilter)
      */
-    readonly state: Readonly<TSelected>;
+    readonly state: Readonly<TSelected> & {
+        columns: TableOptions<TFeatures, TData>['columns'];
+        data: TableOptions<TFeatures, TData>['data'];
+    };
 };
 export declare function useTable<TFeatures extends TableFeatures, TData extends RowData, TSelected = {}>(tableOptions: TableOptions<TFeatures, TData>, selector?: (state: TableState<TFeatures>) => TSelected): ReactTable<TFeatures, TData, TSelected>;

package/dist/esm/useTable.js

@@ -1,10 +1,9 @@
 "use client";
-import { useState, useLayoutEffect, useEffect, useMemo } from "react";
+import { useState, 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);
@@ -18,21 +17,12 @@ function useTable(tableOptions, selector = () => ({})) {
     ...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);
+  const selectorWithDataAndColumns = (state2) => ({
+    columns: tableOptions.columns,
+    data: tableOptions.data,
+    ...selector(state2)
+  });
+  const state = useStore(table.store, selectorWithDataAndColumns, shallow);
   return useMemo(
     () => ({
       ...table,

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  // 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;;;;"}
+{"version":3,"file":"useTable.js","sources":["../../src/useTable.ts"],"sourcesContent":["'use client'\n\nimport { 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\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    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): 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  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, shallow)\n\n  return useMemo(\n    () => ({\n      ...table,\n      state,\n    }),\n    [state, table],\n  ) as ReactTable<TFeatures, TData, TSelected>\n}\n"],"names":[],"mappings":";;;;;;AA8EO;AASL;AACE;AAMA;AAGE;AAAmD;AAGrD;AAEA;AAAO;AAIT;AAA4B;AACvB;AACA;AAGL;AAAsE;AAC9C;AACH;AACF;AAGnB;AAEA;AAAO;AACE;AACF;AACH;AAAA;AAEW;AAEjB;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/react-table",
-  "version": "9.0.0-alpha.20",
+  "version": "9.0.0-alpha.22",
   "description": "Headless UI for building powerful tables & datagrids for React.",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -49,7 +49,7 @@
   ],
   "dependencies": {
     "@tanstack/react-store": "^0.9.2",
-    "@tanstack/table-core": "9.0.0-alpha.16"
+    "@tanstack/table-core": "9.0.0-alpha.21"
   },
   "devDependencies": {
     "@eslint-react/eslint-plugin": "^2.13.0",

package/src/useTable.ts

@@ -1,6 +1,6 @@
 'use client'
 
-import { useEffect, useLayoutEffect, useMemo, useState } from 'react'
+import { useMemo, useState } from 'react'
 import { constructTable } from '@tanstack/table-core'
 import { shallow, useStore } from '@tanstack/react-store'
 import { FlexRender } from './FlexRender'
@@ -18,9 +18,6 @@ import type { FunctionComponent, ReactNode } from 'react'
 import type { FlexRenderProps } from './FlexRender'
 import type { SubscribeProps } from './Subscribe'
 
-const useIsomorphicLayoutEffect =
-  typeof window !== 'undefined' ? useLayoutEffect : useEffect
-
 export type ReactTable<
   TFeatures extends TableFeatures,
   TData extends RowData,
@@ -73,7 +70,10 @@ export type ReactTable<
    *
    * console.log(table.state.globalFilter)
    */
-  readonly state: Readonly<TSelected>
+  readonly state: Readonly<TSelected> & {
+    columns: TableOptions<TFeatures, TData>['columns']
+    data: TableOptions<TFeatures, TData>['data']
+  }
 }
 
 export function useTable<
@@ -109,20 +109,13 @@ export function useTable<
     ...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 selectorWithDataAndColumns = (state: TableState<TFeatures>) => ({
+    columns: tableOptions.columns,
+    data: tableOptions.data,
+    ...selector(state),
+  })
 
-  const state = useStore(table.store, selector, shallow)
+  const state = useStore(table.store, selectorWithDataAndColumns, shallow)
 
   return useMemo(
     () => ({
@@ -130,5 +123,5 @@ export function useTable<
       state,
     }),
     [state, table],
-  )
+  ) as ReactTable<TFeatures, TData, TSelected>
 }