@tanstack/react-table 9.0.0-alpha.33 → 9.0.0-alpha.34

package/src/useLegacyTable.ts

@@ -15,18 +15,21 @@ import {
   sortFns,
   stockFeatures,
 } from '@tanstack/table-core'
-import { useMemo } from 'react'
+import { useCallback, useMemo } from 'react'
 import { useTable } from './useTable'
 import type {
+  AggregationFns,
   Cell,
   Column,
   ColumnDef,
   CreateRowModels_All,
+  FilterFns,
   Header,
   HeaderGroup,
   Row,
   RowData,
   RowModel,
+  SortFns,
   StockFeatures,
   Table,
   TableOptions,
@@ -233,6 +236,21 @@ export interface LegacyRowModelOptions<TData extends RowData> {
    * @deprecated Use `_rowModels.facetedUniqueValues` with `createFacetedUniqueValues()` instead.
    */
   getFacetedUniqueValues?: FacetedUniqueValuesFactory<TData>
+  /**
+   * Additional filter functions to apply to the table.
+   * @deprecated Use `_rowModels.filteredRowModel` with `createFilteredRowModel(filterFns)` instead.
+   */
+  filterFns?: FilterFns
+  /**
+   * Additional sort functions to apply to the table.
+   * @deprecated Use `_rowModels.sortedRowModel` with `createSortedRowModel(sortFns)` instead.
+   */
+  sortFns?: SortFns
+  /**
+   * Additional aggregation functions to apply to the table.
+   * @deprecated Use `_rowModels.groupedRowModel` with `createGroupedRowModel(aggregationFns)` instead.
+   */
+  aggregationFns?: AggregationFns
 }
 
 /**
@@ -264,6 +282,11 @@ export type LegacyReactTable<TData extends RowData> = ReactTable<
    * @deprecated In v9, access state directly via `table.state` or use `table.store.state` for the full state.
    */
   getState: () => TableState<StockFeatures>
+  /**
+   * Sets the current table state.
+   * @deprecated In v9, access state directly via `table.baseAtoms`
+   */
+  setState: (state: TableState<StockFeatures>) => void
 }
 
 // =============================================================================
@@ -386,11 +409,17 @@ export function useLegacyTable<TData extends RowData>(
   // Note: getCoreRowModel is handled automatically in v9, so we ignore it
 
   if (getFilteredRowModel) {
-    _rowModels.filteredRowModel = createFilteredRowModel(filterFns)
+    _rowModels.filteredRowModel = createFilteredRowModel({
+      ...filterFns,
+      ...options.filterFns,
+    })
   }
 
   if (getSortedRowModel) {
-    _rowModels.sortedRowModel = createSortedRowModel(sortFns)
+    _rowModels.sortedRowModel = createSortedRowModel({
+      ...sortFns,
+      ...options.sortFns,
+    })
   }
 
   if (getPaginationRowModel) {
@@ -402,7 +431,10 @@ export function useLegacyTable<TData extends RowData>(
   }
 
   if (getGroupedRowModel) {
-    _rowModels.groupedRowModel = createGroupedRowModel(aggregationFns)
+    _rowModels.groupedRowModel = createGroupedRowModel({
+      ...aggregationFns,
+      ...options.aggregationFns,
+    })
   }
 
   if (getFacetedRowModel) {
@@ -427,12 +459,32 @@ export function useLegacyTable<TData extends RowData>(
     (state) => state,
   )
 
+  const getState = useCallback(() => {
+    // all state except for columns and data
+    return {
+      ...table.state,
+      columns: undefined,
+      data: undefined,
+    }
+  }, [table])
+
+  const setState = useCallback(
+    (state: TableState<StockFeatures>) => {
+      Object.entries(state).forEach(([key, value]) => {
+        // @ts-expect-error - baseAtoms is indexed by dynamic string keys
+        table.baseAtoms[key].set(value)
+      })
+    },
+    [table],
+  )
+
   return useMemo(
     () =>
       ({
         ...table,
-        getState: () => table.state,
+        getState,
+        setState,
       }) as LegacyReactTable<TData>,
-    [table],
+    [table, getState, setState],
   )
 }

package/src/useTable.ts

@@ -7,16 +7,16 @@ import { FlexRender } from './FlexRender'
 import { Subscribe } from './Subscribe'
 import type {
   CellData,
-  NoInfer,
   RowData,
   Table,
   TableFeatures,
   TableOptions,
   TableState,
 } from '@tanstack/table-core'
+import type { Atom, ReadonlyAtom } from '@tanstack/react-store'
 import type { FunctionComponent, ReactNode } from 'react'
 import type { FlexRenderProps } from './FlexRender'
-import type { SubscribeProps } from './Subscribe'
+import type { SubscribePropsWithStore } from './Subscribe'
 
 export type ReactTable<
   TFeatures extends TableFeatures,
@@ -28,19 +28,53 @@ export type ReactTable<
    *
    * This is useful for opting into state re-renders for specific parts of the table state.
    *
+   * Pass `atom` to subscribe to a single slice atom instead of the full `table.store`.
+   *
    * @example
    * <table.Subscribe selector={(state) => ({ rowSelection: state.rowSelection })}>
-   *   {({ rowSelection }) => ( // important to include `{() => {()}}` syntax
-   *     <tr key={row.id}>
-            // render the row
-   *     </tr>
-   *   ))}
+   *   {({ rowSelection }) => (
+   *     <tr key={row.id}>...</tr>
+   *   )}
+   * </table.Subscribe>
+   *
+   * @example
+   * <table.Subscribe atom={table.atoms.rowSelection}>
+   *   {(rowSelection) => <div>...</div>}
+   * </table.Subscribe>
+   *
+   * @example
+   * <table.Subscribe atom={table.atoms.rowSelection} selector={(s) => s?.[row.id]}>
+   *   {() => <tr key={row.id}>...</tr>}
    * </table.Subscribe>
    */
-  Subscribe: <TSelected>(props: {
-    selector: (state: NoInfer<TableState<TFeatures>>) => TSelected
-    children: ((state: TSelected) => ReactNode) | ReactNode
-  }) => ReturnType<FunctionComponent>
+  /**
+   * Overloads (not a single union) so `selector` callbacks get correct contextual
+   * types in JSX; a union of two `selector` signatures degrades to implicit `any`.
+   *
+   * Atom **without** `selector` is a separate overload so children receive `TAtomValue`
+   * (identity projection). If `selector` were optional on one overload, `TSubSelected`
+   * would default to `unknown` instead of inferring from the atom.
+   *
+   * The **atom** overloads are listed first so `TAtomValue` is inferred from `atom`.
+   */
+  Subscribe: {
+    <TAtomValue>(props: {
+      atom: Atom<TAtomValue> | ReadonlyAtom<TAtomValue>
+      selector?: undefined
+      children: ((state: TAtomValue) => ReactNode) | ReactNode
+    }): ReturnType<FunctionComponent>
+    <TAtomValue, TSubSelected>(props: {
+      atom: Atom<TAtomValue> | ReadonlyAtom<TAtomValue>
+      selector: (state: TAtomValue) => TSubSelected
+      children: ((state: TSubSelected) => ReactNode) | ReactNode
+    }): ReturnType<FunctionComponent>
+    <TSubSelected>(
+      props: Omit<
+        SubscribePropsWithStore<TFeatures, TData, TSubSelected>,
+        'table'
+      >,
+    ): ReturnType<FunctionComponent>
+  }
   /**
    * A React component that renders headers, cells, or footers with custom markup.
    * Use this utility component instead of manually calling flexRender.
@@ -92,11 +126,12 @@ export function useTable<
       TSelected
     >
 
-    tableInstance.Subscribe = function SubscribeBound<TSelected>(
-      props: Omit<SubscribeProps<TFeatures, TData, TSelected>, 'table'>,
-    ) {
-      return Subscribe({ ...props, table: tableInstance })
-    }
+    tableInstance.Subscribe = ((props: any) => {
+      return Subscribe({
+        ...props,
+        table: tableInstance,
+      })
+    }) as ReactTable<TFeatures, TData, TSelected>['Subscribe']
 
     tableInstance.FlexRender = FlexRender