@tanstack/react-table 9.0.0-alpha.43 → 9.0.0-alpha.45

package/src/Subscribe.ts

@@ -1,25 +1,30 @@
 'use client'
 
 import { shallow, useSelector } from '@tanstack/react-store'
-import type { Atom, ReadonlyAtom } from '@tanstack/react-store'
 import type {
-  RowData,
-  Table,
-  TableFeatures,
-  TableState,
-} from '@tanstack/table-core'
+  Atom,
+  ReadonlyAtom,
+  ReadonlyStore,
+  Store,
+} from '@tanstack/react-store'
+import type { TableFeatures, TableState } from '@tanstack/table-core'
 import type { FunctionComponent, ReactNode } from 'react'
 
+export type SubscribeSource<TValue> =
+  | Atom<TValue>
+  | ReadonlyAtom<TValue>
+  | Store<TValue>
+  | ReadonlyStore<TValue>
+
 /**
  * Subscribe to `table.store` (full table state). The selector receives the full
  * {@link TableState}.
  */
 export type SubscribePropsWithStore<
   TFeatures extends TableFeatures,
-  TData extends RowData,
   TSelected,
 > = {
-  table: Table<TFeatures, TData>
+  source: SubscribeSource<TableState<TFeatures>>
   /**
    * Select from full table state. Re-renders when the selected value changes
    * (shallow compare).
@@ -36,13 +41,8 @@ export type SubscribePropsWithStore<
  * `table.optionsStore`). Omitting `selector` is equivalent to the identity
  * selector — children receive `TSourceValue`.
  */
-export type SubscribePropsWithSourceIdentity<
-  TFeatures extends TableFeatures,
-  TData extends RowData,
-  TSourceValue,
-> = {
-  table: Table<TFeatures, TData>
-  source: Atom<TSourceValue> | ReadonlyAtom<TSourceValue>
+export type SubscribePropsWithSourceIdentity<TSourceValue> = {
+  source: SubscribeSource<TSourceValue>
   selector?: undefined
   children: ((state: TSourceValue) => ReactNode) | ReactNode
 }
@@ -51,14 +51,8 @@ export type SubscribePropsWithSourceIdentity<
  * Subscribe to a projected value from a source (atom or store). The selector
  * receives the source value; children receive the projected `TSelected`.
  */
-export type SubscribePropsWithSourceWithSelector<
-  TFeatures extends TableFeatures,
-  TData extends RowData,
-  TSourceValue,
-  TSelected,
-> = {
-  table: Table<TFeatures, TData>
-  source: Atom<TSourceValue> | ReadonlyAtom<TSourceValue>
+export type SubscribePropsWithSourceWithSelector<TSourceValue, TSelected> = {
+  source: SubscribeSource<TSourceValue>
   selector: (state: TSourceValue) => TSelected
   children: ((state: TSelected) => ReactNode) | ReactNode
 }
@@ -68,34 +62,18 @@ export type SubscribePropsWithSourceWithSelector<
  * {@link SubscribePropsWithSourceIdentity} or {@link SubscribePropsWithSourceWithSelector}
  * for clearer inference when `selector` is omitted.
  */
-export type SubscribePropsWithSource<
-  TFeatures extends TableFeatures,
-  TData extends RowData,
-  TSourceValue,
-  TSelected = TSourceValue,
-> =
-  | SubscribePropsWithSourceIdentity<TFeatures, TData, TSourceValue>
-  | SubscribePropsWithSourceWithSelector<
-      TFeatures,
-      TData,
-      TSourceValue,
-      TSelected
-    >
+export type SubscribePropsWithSource<TSourceValue, TSelected = TSourceValue> =
+  | SubscribePropsWithSourceIdentity<TSourceValue>
+  | SubscribePropsWithSourceWithSelector<TSourceValue, TSelected>
 
 export type SubscribeProps<
   TFeatures extends TableFeatures,
-  TData extends RowData,
   TSelected = unknown,
   TSourceValue = unknown,
 > =
-  | SubscribePropsWithStore<TFeatures, TData, TSelected>
-  | SubscribePropsWithSourceIdentity<TFeatures, TData, TSourceValue>
-  | SubscribePropsWithSourceWithSelector<
-      TFeatures,
-      TData,
-      TSourceValue,
-      TSelected
-    >
+  | SubscribePropsWithStore<TFeatures, TSelected>
+  | SubscribePropsWithSourceIdentity<TSourceValue>
+  | SubscribePropsWithSourceWithSelector<TSourceValue, TSelected>
 
 /**
  * A React component that allows you to subscribe to the table state.
@@ -108,7 +86,7 @@ export type SubscribeProps<
  * @example
  * ```tsx
  * // As a standalone component — full store
- * <Subscribe table={table} selector={(state) => ({ rowSelection: state.rowSelection })}>
+ * <Subscribe source={table.store} selector={(state) => ({ rowSelection: state.rowSelection })}>
  *   {({ rowSelection }) => (
  *     <div>Selected rows: {Object.keys(rowSelection).length}</div>
  *   )}
@@ -118,7 +96,7 @@ export type SubscribeProps<
  * @example
  * ```tsx
  * // Entire source (atom or store) — no selector
- * <Subscribe table={table} source={table.atoms.rowSelection}>
+ * <Subscribe source={table.atoms.rowSelection}>
  *   {(rowSelection) => <div>...</div>}
  * </Subscribe>
  * ```
@@ -127,7 +105,6 @@ export type SubscribeProps<
  * ```tsx
  * // Project source value (e.g. one row’s selection)
  * <Subscribe
- *   table={table}
  *   source={table.atoms.rowSelection}
  *   selector={(rowSelection) => rowSelection?.[row.id]}
  * >
@@ -145,49 +122,26 @@ export type SubscribeProps<
  * </table.Subscribe>
  * ```
  */
-export function Subscribe<
-  TFeatures extends TableFeatures,
-  TData extends RowData,
-  TSourceValue,
->(
-  props: SubscribePropsWithSourceIdentity<TFeatures, TData, TSourceValue>,
+export function Subscribe<TSourceValue>(
+  props: SubscribePropsWithSourceIdentity<TSourceValue>,
 ): ReturnType<FunctionComponent>
-export function Subscribe<
-  TFeatures extends TableFeatures,
-  TData extends RowData,
-  TSourceValue,
-  TSelected,
->(
-  props: SubscribePropsWithSourceWithSelector<
-    TFeatures,
-    TData,
-    TSourceValue,
-    TSelected
-  >,
+export function Subscribe<TSourceValue, TSelected>(
+  props: SubscribePropsWithSourceWithSelector<TSourceValue, TSelected>,
 ): ReturnType<FunctionComponent>
-export function Subscribe<
-  TFeatures extends TableFeatures,
-  TData extends RowData,
-  TSelected,
->(
-  props: SubscribePropsWithStore<TFeatures, TData, TSelected>,
+export function Subscribe<TFeatures extends TableFeatures, TSelected>(
+  props: SubscribePropsWithStore<TFeatures, TSelected>,
 ): ReturnType<FunctionComponent>
 export function Subscribe<
   TFeatures extends TableFeatures,
-  TData extends RowData,
   TSelected,
   TSourceValue,
 >(
-  props: SubscribeProps<TFeatures, TData, TSelected, TSourceValue>,
+  props: SubscribeProps<TFeatures, TSelected, TSourceValue>,
 ): ReturnType<FunctionComponent> {
-  const source = 'source' in props ? props.source : props.table.store
-  const selectFn =
-    'source' 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],
+    props.source,
+    props.selector as Parameters<typeof useSelector>[1],
     {
       compare: shallow,
     },

package/src/createTableHook.tsx

@@ -800,7 +800,10 @@ export function createTableHook<
    *
    * TFeatures is already known from the createTableHook call; TData is inferred from the data prop.
    */
-  function useAppTable<TData extends RowData, TSelected = {}>(
+  function useAppTable<
+    TData extends RowData,
+    TSelected = TableState<TFeatures>,
+  >(
     tableOptions: Omit<
       TableOptions<TFeatures, TData>,
       '_features' | '_rowModels'

package/src/useTable.ts

@@ -6,9 +6,8 @@ import { shallow, useSelector } from '@tanstack/react-store'
 import { reactReactivity } from './reactivity'
 import { FlexRender } from './FlexRender'
 import { Subscribe } from './Subscribe'
-import type { Atom, ReadonlyAtom } from '@tanstack/react-store'
 import type { FlexRenderProps } from './FlexRender'
-import type { SubscribePropsWithStore } from './Subscribe'
+import type { SubscribePropsWithStore, SubscribeSource } from './Subscribe'
 import type {
   CellData,
   RowData,
@@ -22,7 +21,7 @@ import type { FunctionComponent, ReactNode } from 'react'
 export type ReactTable<
   TFeatures extends TableFeatures,
   TData extends RowData,
-  TSelected = {},
+  TSelected = TableState<TFeatures>,
 > = Table<TFeatures, TData> & {
   /**
    * A React HOC (Higher Order Component) that allows you to subscribe to the table state.
@@ -61,20 +60,17 @@ export type ReactTable<
    */
   Subscribe: {
     <TSourceValue>(props: {
-      source: Atom<TSourceValue> | ReadonlyAtom<TSourceValue>
+      source: SubscribeSource<TSourceValue>
       selector?: undefined
       children: ((state: TSourceValue) => ReactNode) | ReactNode
     }): ReturnType<FunctionComponent>
     <TSourceValue, TSubSelected>(props: {
-      source: Atom<TSourceValue> | ReadonlyAtom<TSourceValue>
+      source: SubscribeSource<TSourceValue>
       selector: (state: TSourceValue) => TSubSelected
       children: ((state: TSubSelected) => ReactNode) | ReactNode
     }): ReturnType<FunctionComponent>
     <TSubSelected>(
-      props: Omit<
-        SubscribePropsWithStore<TFeatures, TData, TSubSelected>,
-        'table'
-      >,
+      props: Omit<SubscribePropsWithStore<TFeatures, TSubSelected>, 'source'>,
     ): ReturnType<FunctionComponent>
   }
   /**
@@ -112,11 +108,10 @@ export type ReactTable<
 export function useTable<
   TFeatures extends TableFeatures,
   TData extends RowData,
-  TSelected = {},
+  TSelected = TableState<TFeatures>,
 >(
   tableOptions: TableOptions<TFeatures, TData>,
-  selector: (state: TableState<TFeatures>) => TSelected = () =>
-    ({}) as TSelected,
+  selector?: (state: TableState<TFeatures>) => TSelected,
 ): ReactTable<TFeatures, TData, TSelected> {
   const [table] = useState(() => {
     const tableInstance = constructTable({
@@ -128,9 +123,11 @@ export function useTable<
     }) as ReactTable<TFeatures, TData, TSelected>
 
     tableInstance.Subscribe = ((props: any) => {
+      const source = props.source ?? tableInstance.store
+
       return Subscribe({
         ...props,
-        table: tableInstance,
+        source,
       })
     }) as ReactTable<TFeatures, TData, TSelected>['Subscribe']