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

package/src/Subscribe.ts

@@ -1,8 +1,8 @@
 'use client'
 
-import { shallow, useStore } from '@tanstack/react-store'
+import { shallow, useSelector } from '@tanstack/react-store'
+import type { Atom, ReadonlyAtom } from '@tanstack/react-store'
 import type {
-  NoInfer,
   RowData,
   Table,
   TableFeatures,
@@ -10,35 +10,94 @@ import type {
 } from '@tanstack/table-core'
 import type { FunctionComponent, ReactNode } from 'react'
 
-export type SubscribeProps<
+/**
+ * Subscribe to `table.store` (full table state). The selector receives the full
+ * {@link TableState}.
+ */
+export type SubscribePropsWithStore<
   TFeatures extends TableFeatures,
   TData extends RowData,
-  TSelected = {},
+  TSelected,
 > = {
-  /**
-   * The table instance to subscribe to. Required when using as a standalone component.
-   * Not needed when using as `table.Subscribe`.
-   */
   table: Table<TFeatures, TData>
   /**
-   * A selector function that selects the part of the table state to subscribe to.
-   * This allows for fine-grained reactivity by only re-rendering when the selected state changes.
-   */
-  selector: (state: NoInfer<TableState<TFeatures>>) => TSelected
-  /**
-   * The children to render. Can be a function that receives the selected state, or a React node.
+   * Select from full table state. Re-renders when the selected value changes
+   * (shallow compare).
+   *
+   * Required in store mode so you never accidentally subscribe to the whole
+   * store without an explicit projection.
    */
+  selector: (state: TableState<TFeatures>) => TSelected
   children: ((state: TSelected) => ReactNode) | ReactNode
 }
 
+/**
+ * Subscribe to the full value of a slice atom (e.g. `table.atoms.rowSelection`).
+ * Omitting `selector` is equivalent to the identity selector — children receive
+ * `TAtomValue`.
+ */
+export type SubscribePropsWithAtomIdentity<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+  TAtomValue,
+> = {
+  table: Table<TFeatures, TData>
+  atom: Atom<TAtomValue> | ReadonlyAtom<TAtomValue>
+  selector?: undefined
+  children: ((state: TAtomValue) => ReactNode) | ReactNode
+}
+
+/**
+ * Subscribe to a projected value from a slice atom. The selector receives the
+ * atom value; children receive the projected `TSelected`.
+ */
+export type SubscribePropsWithAtomWithSelector<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+  TAtomValue,
+  TSelected,
+> = {
+  table: Table<TFeatures, TData>
+  atom: Atom<TAtomValue> | ReadonlyAtom<TAtomValue>
+  selector: (state: TAtomValue) => TSelected
+  children: ((state: TSelected) => ReactNode) | ReactNode
+}
+
+/**
+ * Subscribe to a single slice atom (identity or projected). Prefer
+ * {@link SubscribePropsWithAtomIdentity} or {@link SubscribePropsWithAtomWithSelector}
+ * for clearer inference when `selector` is omitted.
+ */
+export type SubscribePropsWithAtom<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+  TAtomValue,
+  TSelected = TAtomValue,
+> =
+  | SubscribePropsWithAtomIdentity<TFeatures, TData, TAtomValue>
+  | SubscribePropsWithAtomWithSelector<TFeatures, TData, TAtomValue, TSelected>
+
+export type SubscribeProps<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+  TSelected = unknown,
+  TAtomValue = unknown,
+> =
+  | SubscribePropsWithStore<TFeatures, TData, TSelected>
+  | SubscribePropsWithAtomIdentity<TFeatures, TData, TAtomValue>
+  | SubscribePropsWithAtomWithSelector<TFeatures, TData, TAtomValue, TSelected>
+
 /**
  * A React component that allows you to subscribe to the table state.
  *
  * This is useful for opting into state re-renders for specific parts of the table state.
  *
+ * For `table.Subscribe` from `useTable`, prefer that API — it uses overloads so JSX
+ * contextual typing works. This standalone component uses a union `props` type.
+ *
  * @example
  * ```tsx
- * // As a standalone component
+ * // As a standalone component — full store
  * <Subscribe table={table} selector={(state) => ({ rowSelection: state.rowSelection })}>
  *   {({ rowSelection }) => (
  *     <div>Selected rows: {Object.keys(rowSelection).length}</div>
@@ -48,6 +107,26 @@ export type SubscribeProps<
  *
  * @example
  * ```tsx
+ * // Entire slice atom (no selector)
+ * <Subscribe table={table} atom={table.atoms.rowSelection}>
+ *   {(rowSelection) => <div>...</div>}
+ * </Subscribe>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Project atom value (e.g. one row’s selection)
+ * <Subscribe
+ *   table={table}
+ *   atom={table.atoms.rowSelection}
+ *   selector={(rowSelection) => rowSelection?.[row.id]}
+ * >
+ *   {(selected) => <tr data-selected={!!selected}>...</tr>}
+ * </Subscribe>
+ * ```
+ *
+ * @example
+ * ```tsx
  * // As table.Subscribe (table instance method)
  * <table.Subscribe selector={(state) => ({ rowSelection: state.rowSelection })}>
  *   {({ rowSelection }) => (
@@ -59,13 +138,52 @@ export type SubscribeProps<
 export function Subscribe<
   TFeatures extends TableFeatures,
   TData extends RowData,
-  TSelected = {},
+  TAtomValue,
+>(
+  props: SubscribePropsWithAtomIdentity<TFeatures, TData, TAtomValue>,
+): ReturnType<FunctionComponent>
+export function Subscribe<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+  TAtomValue,
+  TSelected,
+>(
+  props: SubscribePropsWithAtomWithSelector<
+    TFeatures,
+    TData,
+    TAtomValue,
+    TSelected
+  >,
+): ReturnType<FunctionComponent>
+export function Subscribe<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+  TSelected,
 >(
-  props: SubscribeProps<TFeatures, TData, TSelected>,
+  props: SubscribePropsWithStore<TFeatures, TData, TSelected>,
+): ReturnType<FunctionComponent>
+export function Subscribe<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+  TSelected,
+  TAtomValue,
+>(
+  props: SubscribeProps<TFeatures, TData, TSelected, TAtomValue>,
 ): ReturnType<FunctionComponent> {
-  const selected = useStore(props.table.store, props.selector, shallow)
+  const source = 'atom' in props ? props.atom : props.table.store
+  const selectFn =
+    'atom' in props ? (props.selector ?? ((x: unknown) => x)) : props.selector
+
+  const selected = useSelector(
+    // Atom and store share the same selection protocol; union args need a widen for TS.
+    source,
+    selectFn as Parameters<typeof useSelector>[1],
+    {
+      compare: shallow,
+    },
+  ) as TSelected
 
   return typeof props.children === 'function'
-    ? props.children(selected)
+    ? (props.children as (state: TSelected) => ReactNode)(selected)
     : props.children
 }

package/src/static-functions.ts

@@ -0,0 +1 @@
+export * from '@tanstack/table-core/static-functions'

package/src/useLegacyTable.ts

@@ -16,18 +16,20 @@ import {
   stockFeatures,
 } from '@tanstack/table-core'
 import { useCallback, useMemo } from 'react'
-import { shallow, useStore } from '@tanstack/react-store'
 import { useTable } from './useTable'
 import type {
+  AggregationFns,
   Cell,
   Column,
   ColumnDef,
   CreateRowModels_All,
+  FilterFns,
   Header,
   HeaderGroup,
   Row,
   RowData,
   RowModel,
+  SortFns,
   StockFeatures,
   Table,
   TableOptions,
@@ -234,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
 }
 
 /**
@@ -265,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
 }
 
 // =============================================================================
@@ -387,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) {
@@ -403,7 +431,10 @@ export function useLegacyTable<TData extends RowData>(
   }
 
   if (getGroupedRowModel) {
-    _rowModels.groupedRowModel = createGroupedRowModel(aggregationFns)
+    _rowModels.groupedRowModel = createGroupedRowModel({
+      ...aggregationFns,
+      ...options.aggregationFns,
+    })
   }
 
   if (getFacetedRowModel) {
@@ -428,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

@@ -2,21 +2,21 @@
 
 import { useMemo, useState } from 'react'
 import { constructTable } from '@tanstack/table-core'
-import { shallow, useStore } from '@tanstack/react-store'
+import { shallow, useSelector } from '@tanstack/react-store'
 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
 
@@ -115,7 +150,9 @@ export function useTable<
     ...selector(state),
   })
 
-  const state = useStore(table.store, selectorWithDataAndColumns, shallow)
+  const state = useSelector(table.store, selectorWithDataAndColumns, {
+    compare: shallow,
+  })
 
   return useMemo(
     () => ({