import { TableFeatures, TableState } from "@tanstack/table-core"; import { FunctionComponent, ReactNode } from "react"; import { Atom, ReadonlyAtom, ReadonlyStore, Store } from "@tanstack/react-store"; //#region src/Subscribe.d.ts type SubscribeSource = Atom | ReadonlyAtom | Store | ReadonlyStore; /** * Subscribe to `table.store` (full table state). The selector receives the full * {@link TableState}. */ type SubscribePropsWithStore = { source: SubscribeSource>; /** * 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) => TSelected; children: ((state: TSelected) => ReactNode) | ReactNode; }; /** * Subscribe to the full value of a source (e.g. `table.atoms.rowSelection` or * `table.optionsStore`). Omitting `selector` is equivalent to the identity * selector — children receive `TSourceValue`. */ type SubscribePropsWithSourceIdentity = { source: SubscribeSource; selector?: undefined; children: ((state: TSourceValue) => ReactNode) | ReactNode; }; /** * Subscribe to a projected value from a source (atom or store). The selector * receives the source value; children receive the projected `TSelected`. */ type SubscribePropsWithSourceWithSelector = { source: SubscribeSource; selector: (state: TSourceValue) => TSelected; children: ((state: TSelected) => ReactNode) | ReactNode; }; /** * Subscribe to a single source — atom or store (identity or projected). Prefer * {@link SubscribePropsWithSourceIdentity} or {@link SubscribePropsWithSourceWithSelector} * for clearer inference when `selector` is omitted. */ type SubscribePropsWithSource = SubscribePropsWithSourceIdentity | SubscribePropsWithSourceWithSelector; type SubscribeProps = SubscribePropsWithStore | SubscribePropsWithSourceIdentity | SubscribePropsWithSourceWithSelector; /** * 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 — full store * ({ rowSelection: state.rowSelection })}> * {({ rowSelection }) => ( *
Selected rows: {Object.keys(rowSelection).length}
* )} *
* ``` * * @example * ```tsx * // Entire source (atom or store) — no selector * * {(rowSelection) =>
...
} *
* ``` * * @example * ```tsx * // Project source value (e.g. one row’s selection) * rowSelection?.[row.id]} * > * {(selected) => ...} * * ``` * * @example * ```tsx * // As table.Subscribe (table instance method) * ({ rowSelection: state.rowSelection })}> * {({ rowSelection }) => ( *
Selected rows: {Object.keys(rowSelection).length}
* )} *
* ``` */ declare function Subscribe(props: SubscribePropsWithSourceIdentity): ReturnType; declare function Subscribe(props: SubscribePropsWithSourceWithSelector): ReturnType; declare function Subscribe(props: SubscribePropsWithStore): ReturnType; //#endregion export { Subscribe, SubscribeProps, SubscribePropsWithSource, SubscribePropsWithSourceIdentity, SubscribePropsWithSourceWithSelector, SubscribePropsWithStore, SubscribeSource };