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

package/dist/FlexRender.d.cts

@@ -1,5 +1,5 @@
-import { Cell, CellData, Header, RowData, TableFeatures } from "@tanstack/table-core";
 import React, { ComponentType, JSX, ReactNode } from "react";
+import { Cell, CellData, Header, RowData, TableFeatures } from "@tanstack/table-core";
 
 //#region src/FlexRender.d.ts
 type Renderable<TProps> = ReactNode | ComponentType<TProps>;

package/dist/Subscribe.cjs

@@ -5,7 +5,7 @@ let _tanstack_react_store = require("@tanstack/react-store");
 
 //#region src/Subscribe.ts
 function Subscribe(props) {
-	const selected = (0, _tanstack_react_store.useSelector)("atom" in props ? props.atom : props.table.store, "atom" in props ? props.selector ?? ((x) => x) : props.selector, { compare: _tanstack_react_store.shallow });
+	const selected = (0, _tanstack_react_store.useSelector)("source" in props ? props.source : props.table.store, "source" in props ? props.selector ?? ((x) => x) : props.selector, { compare: _tanstack_react_store.shallow });
 	return typeof props.children === "function" ? props.children(selected) : props.children;
 }
 

package/dist/Subscribe.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Subscribe.cjs","names":["shallow"],"sources":["../src/Subscribe.ts"],"sourcesContent":["'use client'\n\nimport { shallow, useSelector } from '@tanstack/react-store'\nimport type { Atom, ReadonlyAtom } from '@tanstack/react-store'\nimport type {\n  RowData,\n  Table,\n  TableFeatures,\n  TableState,\n} from '@tanstack/table-core'\nimport type { FunctionComponent, ReactNode } from 'react'\n\n/**\n * Subscribe to `table.store` (full table state). The selector receives the full\n * {@link TableState}.\n */\nexport type SubscribePropsWithStore<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TSelected,\n> = {\n  table: Table<TFeatures, TData>\n  /**\n   * Select from full table state. Re-renders when the selected value changes\n   * (shallow compare).\n   *\n   * Required in store mode so you never accidentally subscribe to the whole\n   * store without an explicit projection.\n   */\n  selector: (state: TableState<TFeatures>) => TSelected\n  children: ((state: TSelected) => ReactNode) | ReactNode\n}\n\n/**\n * Subscribe to the full value of a slice atom (e.g. `table.atoms.rowSelection`).\n * Omitting `selector` is equivalent to the identity selector — children receive\n * `TAtomValue`.\n */\nexport type SubscribePropsWithAtomIdentity<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TAtomValue,\n> = {\n  table: Table<TFeatures, TData>\n  atom: Atom<TAtomValue> | ReadonlyAtom<TAtomValue>\n  selector?: undefined\n  children: ((state: TAtomValue) => ReactNode) | ReactNode\n}\n\n/**\n * Subscribe to a projected value from a slice atom. The selector receives the\n * atom value; children receive the projected `TSelected`.\n */\nexport type SubscribePropsWithAtomWithSelector<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TAtomValue,\n  TSelected,\n> = {\n  table: Table<TFeatures, TData>\n  atom: Atom<TAtomValue> | ReadonlyAtom<TAtomValue>\n  selector: (state: TAtomValue) => TSelected\n  children: ((state: TSelected) => ReactNode) | ReactNode\n}\n\n/**\n * Subscribe to a single slice atom (identity or projected). Prefer\n * {@link SubscribePropsWithAtomIdentity} or {@link SubscribePropsWithAtomWithSelector}\n * for clearer inference when `selector` is omitted.\n */\nexport type SubscribePropsWithAtom<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TAtomValue,\n  TSelected = TAtomValue,\n> =\n  | SubscribePropsWithAtomIdentity<TFeatures, TData, TAtomValue>\n  | SubscribePropsWithAtomWithSelector<TFeatures, TData, TAtomValue, TSelected>\n\nexport type SubscribeProps<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TSelected = unknown,\n  TAtomValue = unknown,\n> =\n  | SubscribePropsWithStore<TFeatures, TData, TSelected>\n  | SubscribePropsWithAtomIdentity<TFeatures, TData, TAtomValue>\n  | SubscribePropsWithAtomWithSelector<TFeatures, TData, TAtomValue, TSelected>\n\n/**\n * A React 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 * For `table.Subscribe` from `useTable`, prefer that API — it uses overloads so JSX\n * contextual typing works. This standalone component uses a union `props` type.\n *\n * @example\n * ```tsx\n * // As a standalone component — full store\n * <Subscribe table={table} selector={(state) => ({ rowSelection: state.rowSelection })}>\n *   {({ rowSelection }) => (\n *     <div>Selected rows: {Object.keys(rowSelection).length}</div>\n *   )}\n * </Subscribe>\n * ```\n *\n * @example\n * ```tsx\n * // Entire slice atom (no selector)\n * <Subscribe table={table} atom={table.atoms.rowSelection}>\n *   {(rowSelection) => <div>...</div>}\n * </Subscribe>\n * ```\n *\n * @example\n * ```tsx\n * // Project atom value (e.g. one row’s selection)\n * <Subscribe\n *   table={table}\n *   atom={table.atoms.rowSelection}\n *   selector={(rowSelection) => rowSelection?.[row.id]}\n * >\n *   {(selected) => <tr data-selected={!!selected}>...</tr>}\n * </Subscribe>\n * ```\n *\n * @example\n * ```tsx\n * // As table.Subscribe (table instance method)\n * <table.Subscribe selector={(state) => ({ rowSelection: state.rowSelection })}>\n *   {({ rowSelection }) => (\n *     <div>Selected rows: {Object.keys(rowSelection).length}</div>\n *   )}\n * </table.Subscribe>\n * ```\n */\nexport function Subscribe<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TAtomValue,\n>(\n  props: SubscribePropsWithAtomIdentity<TFeatures, TData, TAtomValue>,\n): ReturnType<FunctionComponent>\nexport function Subscribe<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TAtomValue,\n  TSelected,\n>(\n  props: SubscribePropsWithAtomWithSelector<\n    TFeatures,\n    TData,\n    TAtomValue,\n    TSelected\n  >,\n): ReturnType<FunctionComponent>\nexport function Subscribe<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TSelected,\n>(\n  props: SubscribePropsWithStore<TFeatures, TData, TSelected>,\n): ReturnType<FunctionComponent>\nexport function Subscribe<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TSelected,\n  TAtomValue,\n>(\n  props: SubscribeProps<TFeatures, TData, TSelected, TAtomValue>,\n): ReturnType<FunctionComponent> {\n  const source = 'atom' in props ? props.atom : props.table.store\n  const selectFn =\n    'atom' in props ? (props.selector ?? ((x: unknown) => x)) : props.selector\n\n  const selected = useSelector(\n    // Atom and store share the same selection protocol; union args need a widen for TS.\n    source,\n    selectFn as Parameters<typeof useSelector>[1],\n    {\n      compare: shallow,\n    },\n  ) as TSelected\n\n  return typeof props.children === 'function'\n    ? (props.children as (state: TSelected) => ReactNode)(selected)\n    : props.children\n}\n"],"mappings":";;;;;;AAoKA,SAAgB,UAMd,OAC+B;CAK/B,MAAM,kDAJS,UAAU,QAAQ,MAAM,OAAO,MAAM,MAAM,OAExD,UAAU,QAAS,MAAM,cAAc,MAAe,KAAM,MAAM,UAMlE,EACE,SAASA,+BACV,CACF;AAED,QAAO,OAAO,MAAM,aAAa,aAC5B,MAAM,SAA6C,SAAS,GAC7D,MAAM"}
+{"version":3,"file":"Subscribe.cjs","names":["shallow"],"sources":["../src/Subscribe.ts"],"sourcesContent":["'use client'\n\nimport { shallow, useSelector } from '@tanstack/react-store'\nimport type { Atom, ReadonlyAtom } from '@tanstack/react-store'\nimport type {\n  RowData,\n  Table,\n  TableFeatures,\n  TableState,\n} from '@tanstack/table-core'\nimport type { FunctionComponent, ReactNode } from 'react'\n\n/**\n * Subscribe to `table.store` (full table state). The selector receives the full\n * {@link TableState}.\n */\nexport type SubscribePropsWithStore<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TSelected,\n> = {\n  table: Table<TFeatures, TData>\n  /**\n   * Select from full table state. Re-renders when the selected value changes\n   * (shallow compare).\n   *\n   * Required in store mode so you never accidentally subscribe to the whole\n   * store without an explicit projection.\n   */\n  selector: (state: TableState<TFeatures>) => TSelected\n  children: ((state: TSelected) => ReactNode) | ReactNode\n}\n\n/**\n * Subscribe to the full value of a source (e.g. `table.atoms.rowSelection` or\n * `table.optionsStore`). Omitting `selector` is equivalent to the identity\n * selector — children receive `TSourceValue`.\n */\nexport type SubscribePropsWithSourceIdentity<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TSourceValue,\n> = {\n  table: Table<TFeatures, TData>\n  source: Atom<TSourceValue> | ReadonlyAtom<TSourceValue>\n  selector?: undefined\n  children: ((state: TSourceValue) => ReactNode) | ReactNode\n}\n\n/**\n * Subscribe to a projected value from a source (atom or store). The selector\n * receives the source value; children receive the projected `TSelected`.\n */\nexport type SubscribePropsWithSourceWithSelector<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TSourceValue,\n  TSelected,\n> = {\n  table: Table<TFeatures, TData>\n  source: Atom<TSourceValue> | ReadonlyAtom<TSourceValue>\n  selector: (state: TSourceValue) => TSelected\n  children: ((state: TSelected) => ReactNode) | ReactNode\n}\n\n/**\n * Subscribe to a single source — atom or store (identity or projected). Prefer\n * {@link SubscribePropsWithSourceIdentity} or {@link SubscribePropsWithSourceWithSelector}\n * for clearer inference when `selector` is omitted.\n */\nexport type SubscribePropsWithSource<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TSourceValue,\n  TSelected = TSourceValue,\n> =\n  | SubscribePropsWithSourceIdentity<TFeatures, TData, TSourceValue>\n  | SubscribePropsWithSourceWithSelector<\n      TFeatures,\n      TData,\n      TSourceValue,\n      TSelected\n    >\n\nexport type SubscribeProps<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TSelected = unknown,\n  TSourceValue = unknown,\n> =\n  | SubscribePropsWithStore<TFeatures, TData, TSelected>\n  | SubscribePropsWithSourceIdentity<TFeatures, TData, TSourceValue>\n  | SubscribePropsWithSourceWithSelector<\n      TFeatures,\n      TData,\n      TSourceValue,\n      TSelected\n    >\n\n/**\n * A React 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 * For `table.Subscribe` from `useTable`, prefer that API — it uses overloads so JSX\n * contextual typing works. This standalone component uses a union `props` type.\n *\n * @example\n * ```tsx\n * // As a standalone component — full store\n * <Subscribe table={table} selector={(state) => ({ rowSelection: state.rowSelection })}>\n *   {({ rowSelection }) => (\n *     <div>Selected rows: {Object.keys(rowSelection).length}</div>\n *   )}\n * </Subscribe>\n * ```\n *\n * @example\n * ```tsx\n * // Entire source (atom or store) — no selector\n * <Subscribe table={table} source={table.atoms.rowSelection}>\n *   {(rowSelection) => <div>...</div>}\n * </Subscribe>\n * ```\n *\n * @example\n * ```tsx\n * // Project source value (e.g. one row’s selection)\n * <Subscribe\n *   table={table}\n *   source={table.atoms.rowSelection}\n *   selector={(rowSelection) => rowSelection?.[row.id]}\n * >\n *   {(selected) => <tr data-selected={!!selected}>...</tr>}\n * </Subscribe>\n * ```\n *\n * @example\n * ```tsx\n * // As table.Subscribe (table instance method)\n * <table.Subscribe selector={(state) => ({ rowSelection: state.rowSelection })}>\n *   {({ rowSelection }) => (\n *     <div>Selected rows: {Object.keys(rowSelection).length}</div>\n *   )}\n * </table.Subscribe>\n * ```\n */\nexport function Subscribe<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TSourceValue,\n>(\n  props: SubscribePropsWithSourceIdentity<TFeatures, TData, TSourceValue>,\n): ReturnType<FunctionComponent>\nexport function Subscribe<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TSourceValue,\n  TSelected,\n>(\n  props: SubscribePropsWithSourceWithSelector<\n    TFeatures,\n    TData,\n    TSourceValue,\n    TSelected\n  >,\n): ReturnType<FunctionComponent>\nexport function Subscribe<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TSelected,\n>(\n  props: SubscribePropsWithStore<TFeatures, TData, TSelected>,\n): ReturnType<FunctionComponent>\nexport function Subscribe<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TSelected,\n  TSourceValue,\n>(\n  props: SubscribeProps<TFeatures, TData, TSelected, TSourceValue>,\n): ReturnType<FunctionComponent> {\n  const source = 'source' in props ? props.source : props.table.store\n  const selectFn =\n    'source' in props ? (props.selector ?? ((x: unknown) => x)) : props.selector\n\n  const selected = useSelector(\n    // Atom and store share the same selection protocol; union args need a widen for TS.\n    source,\n    selectFn as Parameters<typeof useSelector>[1],\n    {\n      compare: shallow,\n    },\n  ) as TSelected\n\n  return typeof props.children === 'function'\n    ? (props.children as (state: TSelected) => ReactNode)(selected)\n    : props.children\n}\n"],"mappings":";;;;;;AA8KA,SAAgB,UAMd,OAC+B;CAK/B,MAAM,kDAJS,YAAY,QAAQ,MAAM,SAAS,MAAM,MAAM,OAE5D,YAAY,QAAS,MAAM,cAAc,MAAe,KAAM,MAAM,UAMpE,EACE,SAASA,+BACV,CACF;AAED,QAAO,OAAO,MAAM,aAAa,aAC5B,MAAM,SAA6C,SAAS,GAC7D,MAAM"}

package/dist/Subscribe.d.cts

@@ -1,5 +1,5 @@
-import { RowData, Table, TableFeatures, TableState } from "@tanstack/table-core";
 import { FunctionComponent, ReactNode } from "react";
+import { RowData, Table, TableFeatures, TableState } from "@tanstack/table-core";
 import { Atom, ReadonlyAtom } from "@tanstack/react-store";
 
 //#region src/Subscribe.d.ts
@@ -20,33 +20,33 @@ type SubscribePropsWithStore<TFeatures extends TableFeatures, TData extends RowD
   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`.
+ * 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 SubscribePropsWithAtomIdentity<TFeatures extends TableFeatures, TData extends RowData, TAtomValue> = {
+type SubscribePropsWithSourceIdentity<TFeatures extends TableFeatures, TData extends RowData, TSourceValue> = {
   table: Table<TFeatures, TData>;
-  atom: Atom<TAtomValue> | ReadonlyAtom<TAtomValue>;
+  source: Atom<TSourceValue> | ReadonlyAtom<TSourceValue>;
   selector?: undefined;
-  children: ((state: TAtomValue) => ReactNode) | ReactNode;
+  children: ((state: TSourceValue) => ReactNode) | ReactNode;
 };
 /**
- * Subscribe to a projected value from a slice atom. The selector receives the
- * atom value; children receive the projected `TSelected`.
+ * Subscribe to a projected value from a source (atom or store). The selector
+ * receives the source value; children receive the projected `TSelected`.
  */
-type SubscribePropsWithAtomWithSelector<TFeatures extends TableFeatures, TData extends RowData, TAtomValue, TSelected> = {
+type SubscribePropsWithSourceWithSelector<TFeatures extends TableFeatures, TData extends RowData, TSourceValue, TSelected> = {
   table: Table<TFeatures, TData>;
-  atom: Atom<TAtomValue> | ReadonlyAtom<TAtomValue>;
-  selector: (state: TAtomValue) => TSelected;
+  source: Atom<TSourceValue> | ReadonlyAtom<TSourceValue>;
+  selector: (state: TSourceValue) => TSelected;
   children: ((state: TSelected) => ReactNode) | ReactNode;
 };
 /**
- * Subscribe to a single slice atom (identity or projected). Prefer
- * {@link SubscribePropsWithAtomIdentity} or {@link SubscribePropsWithAtomWithSelector}
+ * 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 SubscribePropsWithAtom<TFeatures extends TableFeatures, TData extends RowData, TAtomValue, TSelected = TAtomValue> = SubscribePropsWithAtomIdentity<TFeatures, TData, TAtomValue> | SubscribePropsWithAtomWithSelector<TFeatures, TData, TAtomValue, TSelected>;
-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>;
+type SubscribePropsWithSource<TFeatures extends TableFeatures, TData extends RowData, TSourceValue, TSelected = TSourceValue> = SubscribePropsWithSourceIdentity<TFeatures, TData, TSourceValue> | SubscribePropsWithSourceWithSelector<TFeatures, TData, TSourceValue, TSelected>;
+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>;
 /**
  * A React component that allows you to subscribe to the table state.
  *
@@ -67,18 +67,18 @@ type SubscribeProps<TFeatures extends TableFeatures, TData extends RowData, TSel
  *
  * @example
  * ```tsx
- * // Entire slice atom (no selector)
- * <Subscribe table={table} atom={table.atoms.rowSelection}>
+ * // Entire source (atom or store) — no selector
+ * <Subscribe table={table} source={table.atoms.rowSelection}>
  *   {(rowSelection) => <div>...</div>}
  * </Subscribe>
  * ```
  *
  * @example
  * ```tsx
- * // Project atom value (e.g. one row’s selection)
+ * // Project source value (e.g. one row’s selection)
  * <Subscribe
  *   table={table}
- *   atom={table.atoms.rowSelection}
+ *   source={table.atoms.rowSelection}
  *   selector={(rowSelection) => rowSelection?.[row.id]}
  * >
  *   {(selected) => <tr data-selected={!!selected}>...</tr>}
@@ -95,9 +95,9 @@ type SubscribeProps<TFeatures extends TableFeatures, TData extends RowData, TSel
  * </table.Subscribe>
  * ```
  */
-declare function Subscribe<TFeatures extends TableFeatures, TData extends RowData, TAtomValue>(props: SubscribePropsWithAtomIdentity<TFeatures, TData, TAtomValue>): ReturnType<FunctionComponent>;
-declare function Subscribe<TFeatures extends TableFeatures, TData extends RowData, TAtomValue, TSelected>(props: SubscribePropsWithAtomWithSelector<TFeatures, TData, TAtomValue, TSelected>): ReturnType<FunctionComponent>;
+declare function Subscribe<TFeatures extends TableFeatures, TData extends RowData, TSourceValue>(props: SubscribePropsWithSourceIdentity<TFeatures, TData, TSourceValue>): ReturnType<FunctionComponent>;
+declare function Subscribe<TFeatures extends TableFeatures, TData extends RowData, TSourceValue, TSelected>(props: SubscribePropsWithSourceWithSelector<TFeatures, TData, TSourceValue, TSelected>): ReturnType<FunctionComponent>;
 declare function Subscribe<TFeatures extends TableFeatures, TData extends RowData, TSelected>(props: SubscribePropsWithStore<TFeatures, TData, TSelected>): ReturnType<FunctionComponent>;
 //#endregion
-export { Subscribe, SubscribeProps, SubscribePropsWithAtom, SubscribePropsWithAtomIdentity, SubscribePropsWithAtomWithSelector, SubscribePropsWithStore };
+export { Subscribe, SubscribeProps, SubscribePropsWithSource, SubscribePropsWithSourceIdentity, SubscribePropsWithSourceWithSelector, SubscribePropsWithStore };
 //# sourceMappingURL=Subscribe.d.cts.map

package/dist/Subscribe.d.ts

@@ -20,33 +20,33 @@ type SubscribePropsWithStore<TFeatures extends TableFeatures, TData extends RowD
   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`.
+ * 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 SubscribePropsWithAtomIdentity<TFeatures extends TableFeatures, TData extends RowData, TAtomValue> = {
+type SubscribePropsWithSourceIdentity<TFeatures extends TableFeatures, TData extends RowData, TSourceValue> = {
   table: Table<TFeatures, TData>;
-  atom: Atom<TAtomValue> | ReadonlyAtom<TAtomValue>;
+  source: Atom<TSourceValue> | ReadonlyAtom<TSourceValue>;
   selector?: undefined;
-  children: ((state: TAtomValue) => ReactNode) | ReactNode;
+  children: ((state: TSourceValue) => ReactNode) | ReactNode;
 };
 /**
- * Subscribe to a projected value from a slice atom. The selector receives the
- * atom value; children receive the projected `TSelected`.
+ * Subscribe to a projected value from a source (atom or store). The selector
+ * receives the source value; children receive the projected `TSelected`.
  */
-type SubscribePropsWithAtomWithSelector<TFeatures extends TableFeatures, TData extends RowData, TAtomValue, TSelected> = {
+type SubscribePropsWithSourceWithSelector<TFeatures extends TableFeatures, TData extends RowData, TSourceValue, TSelected> = {
   table: Table<TFeatures, TData>;
-  atom: Atom<TAtomValue> | ReadonlyAtom<TAtomValue>;
-  selector: (state: TAtomValue) => TSelected;
+  source: Atom<TSourceValue> | ReadonlyAtom<TSourceValue>;
+  selector: (state: TSourceValue) => TSelected;
   children: ((state: TSelected) => ReactNode) | ReactNode;
 };
 /**
- * Subscribe to a single slice atom (identity or projected). Prefer
- * {@link SubscribePropsWithAtomIdentity} or {@link SubscribePropsWithAtomWithSelector}
+ * 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 SubscribePropsWithAtom<TFeatures extends TableFeatures, TData extends RowData, TAtomValue, TSelected = TAtomValue> = SubscribePropsWithAtomIdentity<TFeatures, TData, TAtomValue> | SubscribePropsWithAtomWithSelector<TFeatures, TData, TAtomValue, TSelected>;
-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>;
+type SubscribePropsWithSource<TFeatures extends TableFeatures, TData extends RowData, TSourceValue, TSelected = TSourceValue> = SubscribePropsWithSourceIdentity<TFeatures, TData, TSourceValue> | SubscribePropsWithSourceWithSelector<TFeatures, TData, TSourceValue, TSelected>;
+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>;
 /**
  * A React component that allows you to subscribe to the table state.
  *
@@ -67,18 +67,18 @@ type SubscribeProps<TFeatures extends TableFeatures, TData extends RowData, TSel
  *
  * @example
  * ```tsx
- * // Entire slice atom (no selector)
- * <Subscribe table={table} atom={table.atoms.rowSelection}>
+ * // Entire source (atom or store) — no selector
+ * <Subscribe table={table} source={table.atoms.rowSelection}>
  *   {(rowSelection) => <div>...</div>}
  * </Subscribe>
  * ```
  *
  * @example
  * ```tsx
- * // Project atom value (e.g. one row’s selection)
+ * // Project source value (e.g. one row’s selection)
  * <Subscribe
  *   table={table}
- *   atom={table.atoms.rowSelection}
+ *   source={table.atoms.rowSelection}
  *   selector={(rowSelection) => rowSelection?.[row.id]}
  * >
  *   {(selected) => <tr data-selected={!!selected}>...</tr>}
@@ -95,9 +95,9 @@ type SubscribeProps<TFeatures extends TableFeatures, TData extends RowData, TSel
  * </table.Subscribe>
  * ```
  */
-declare function Subscribe<TFeatures extends TableFeatures, TData extends RowData, TAtomValue>(props: SubscribePropsWithAtomIdentity<TFeatures, TData, TAtomValue>): ReturnType<FunctionComponent>;
-declare function Subscribe<TFeatures extends TableFeatures, TData extends RowData, TAtomValue, TSelected>(props: SubscribePropsWithAtomWithSelector<TFeatures, TData, TAtomValue, TSelected>): ReturnType<FunctionComponent>;
+declare function Subscribe<TFeatures extends TableFeatures, TData extends RowData, TSourceValue>(props: SubscribePropsWithSourceIdentity<TFeatures, TData, TSourceValue>): ReturnType<FunctionComponent>;
+declare function Subscribe<TFeatures extends TableFeatures, TData extends RowData, TSourceValue, TSelected>(props: SubscribePropsWithSourceWithSelector<TFeatures, TData, TSourceValue, TSelected>): ReturnType<FunctionComponent>;
 declare function Subscribe<TFeatures extends TableFeatures, TData extends RowData, TSelected>(props: SubscribePropsWithStore<TFeatures, TData, TSelected>): ReturnType<FunctionComponent>;
 //#endregion
-export { Subscribe, SubscribeProps, SubscribePropsWithAtom, SubscribePropsWithAtomIdentity, SubscribePropsWithAtomWithSelector, SubscribePropsWithStore };
+export { Subscribe, SubscribeProps, SubscribePropsWithSource, SubscribePropsWithSourceIdentity, SubscribePropsWithSourceWithSelector, SubscribePropsWithStore };
 //# sourceMappingURL=Subscribe.d.ts.map

package/dist/Subscribe.js

@@ -4,7 +4,7 @@ import { shallow, useSelector } from "@tanstack/react-store";
 
 //#region src/Subscribe.ts
 function Subscribe(props) {
-	const selected = useSelector("atom" in props ? props.atom : props.table.store, "atom" in props ? props.selector ?? ((x) => x) : props.selector, { compare: shallow });
+	const selected = useSelector("source" in props ? props.source : props.table.store, "source" in props ? props.selector ?? ((x) => x) : props.selector, { compare: shallow });
 	return typeof props.children === "function" ? props.children(selected) : props.children;
 }
 

package/dist/Subscribe.js.map

@@ -1 +1 @@
-{"version":3,"file":"Subscribe.js","names":[],"sources":["../src/Subscribe.ts"],"sourcesContent":["'use client'\n\nimport { shallow, useSelector } from '@tanstack/react-store'\nimport type { Atom, ReadonlyAtom } from '@tanstack/react-store'\nimport type {\n  RowData,\n  Table,\n  TableFeatures,\n  TableState,\n} from '@tanstack/table-core'\nimport type { FunctionComponent, ReactNode } from 'react'\n\n/**\n * Subscribe to `table.store` (full table state). The selector receives the full\n * {@link TableState}.\n */\nexport type SubscribePropsWithStore<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TSelected,\n> = {\n  table: Table<TFeatures, TData>\n  /**\n   * Select from full table state. Re-renders when the selected value changes\n   * (shallow compare).\n   *\n   * Required in store mode so you never accidentally subscribe to the whole\n   * store without an explicit projection.\n   */\n  selector: (state: TableState<TFeatures>) => TSelected\n  children: ((state: TSelected) => ReactNode) | ReactNode\n}\n\n/**\n * Subscribe to the full value of a slice atom (e.g. `table.atoms.rowSelection`).\n * Omitting `selector` is equivalent to the identity selector — children receive\n * `TAtomValue`.\n */\nexport type SubscribePropsWithAtomIdentity<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TAtomValue,\n> = {\n  table: Table<TFeatures, TData>\n  atom: Atom<TAtomValue> | ReadonlyAtom<TAtomValue>\n  selector?: undefined\n  children: ((state: TAtomValue) => ReactNode) | ReactNode\n}\n\n/**\n * Subscribe to a projected value from a slice atom. The selector receives the\n * atom value; children receive the projected `TSelected`.\n */\nexport type SubscribePropsWithAtomWithSelector<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TAtomValue,\n  TSelected,\n> = {\n  table: Table<TFeatures, TData>\n  atom: Atom<TAtomValue> | ReadonlyAtom<TAtomValue>\n  selector: (state: TAtomValue) => TSelected\n  children: ((state: TSelected) => ReactNode) | ReactNode\n}\n\n/**\n * Subscribe to a single slice atom (identity or projected). Prefer\n * {@link SubscribePropsWithAtomIdentity} or {@link SubscribePropsWithAtomWithSelector}\n * for clearer inference when `selector` is omitted.\n */\nexport type SubscribePropsWithAtom<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TAtomValue,\n  TSelected = TAtomValue,\n> =\n  | SubscribePropsWithAtomIdentity<TFeatures, TData, TAtomValue>\n  | SubscribePropsWithAtomWithSelector<TFeatures, TData, TAtomValue, TSelected>\n\nexport type SubscribeProps<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TSelected = unknown,\n  TAtomValue = unknown,\n> =\n  | SubscribePropsWithStore<TFeatures, TData, TSelected>\n  | SubscribePropsWithAtomIdentity<TFeatures, TData, TAtomValue>\n  | SubscribePropsWithAtomWithSelector<TFeatures, TData, TAtomValue, TSelected>\n\n/**\n * A React 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 * For `table.Subscribe` from `useTable`, prefer that API — it uses overloads so JSX\n * contextual typing works. This standalone component uses a union `props` type.\n *\n * @example\n * ```tsx\n * // As a standalone component — full store\n * <Subscribe table={table} selector={(state) => ({ rowSelection: state.rowSelection })}>\n *   {({ rowSelection }) => (\n *     <div>Selected rows: {Object.keys(rowSelection).length}</div>\n *   )}\n * </Subscribe>\n * ```\n *\n * @example\n * ```tsx\n * // Entire slice atom (no selector)\n * <Subscribe table={table} atom={table.atoms.rowSelection}>\n *   {(rowSelection) => <div>...</div>}\n * </Subscribe>\n * ```\n *\n * @example\n * ```tsx\n * // Project atom value (e.g. one row’s selection)\n * <Subscribe\n *   table={table}\n *   atom={table.atoms.rowSelection}\n *   selector={(rowSelection) => rowSelection?.[row.id]}\n * >\n *   {(selected) => <tr data-selected={!!selected}>...</tr>}\n * </Subscribe>\n * ```\n *\n * @example\n * ```tsx\n * // As table.Subscribe (table instance method)\n * <table.Subscribe selector={(state) => ({ rowSelection: state.rowSelection })}>\n *   {({ rowSelection }) => (\n *     <div>Selected rows: {Object.keys(rowSelection).length}</div>\n *   )}\n * </table.Subscribe>\n * ```\n */\nexport function Subscribe<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TAtomValue,\n>(\n  props: SubscribePropsWithAtomIdentity<TFeatures, TData, TAtomValue>,\n): ReturnType<FunctionComponent>\nexport function Subscribe<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TAtomValue,\n  TSelected,\n>(\n  props: SubscribePropsWithAtomWithSelector<\n    TFeatures,\n    TData,\n    TAtomValue,\n    TSelected\n  >,\n): ReturnType<FunctionComponent>\nexport function Subscribe<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TSelected,\n>(\n  props: SubscribePropsWithStore<TFeatures, TData, TSelected>,\n): ReturnType<FunctionComponent>\nexport function Subscribe<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TSelected,\n  TAtomValue,\n>(\n  props: SubscribeProps<TFeatures, TData, TSelected, TAtomValue>,\n): ReturnType<FunctionComponent> {\n  const source = 'atom' in props ? props.atom : props.table.store\n  const selectFn =\n    'atom' in props ? (props.selector ?? ((x: unknown) => x)) : props.selector\n\n  const selected = useSelector(\n    // Atom and store share the same selection protocol; union args need a widen for TS.\n    source,\n    selectFn as Parameters<typeof useSelector>[1],\n    {\n      compare: shallow,\n    },\n  ) as TSelected\n\n  return typeof props.children === 'function'\n    ? (props.children as (state: TSelected) => ReactNode)(selected)\n    : props.children\n}\n"],"mappings":";;;;;AAoKA,SAAgB,UAMd,OAC+B;CAK/B,MAAM,WAAW,YAJF,UAAU,QAAQ,MAAM,OAAO,MAAM,MAAM,OAExD,UAAU,QAAS,MAAM,cAAc,MAAe,KAAM,MAAM,UAMlE,EACE,SAAS,SACV,CACF;AAED,QAAO,OAAO,MAAM,aAAa,aAC5B,MAAM,SAA6C,SAAS,GAC7D,MAAM"}
+{"version":3,"file":"Subscribe.js","names":[],"sources":["../src/Subscribe.ts"],"sourcesContent":["'use client'\n\nimport { shallow, useSelector } from '@tanstack/react-store'\nimport type { Atom, ReadonlyAtom } from '@tanstack/react-store'\nimport type {\n  RowData,\n  Table,\n  TableFeatures,\n  TableState,\n} from '@tanstack/table-core'\nimport type { FunctionComponent, ReactNode } from 'react'\n\n/**\n * Subscribe to `table.store` (full table state). The selector receives the full\n * {@link TableState}.\n */\nexport type SubscribePropsWithStore<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TSelected,\n> = {\n  table: Table<TFeatures, TData>\n  /**\n   * Select from full table state. Re-renders when the selected value changes\n   * (shallow compare).\n   *\n   * Required in store mode so you never accidentally subscribe to the whole\n   * store without an explicit projection.\n   */\n  selector: (state: TableState<TFeatures>) => TSelected\n  children: ((state: TSelected) => ReactNode) | ReactNode\n}\n\n/**\n * Subscribe to the full value of a source (e.g. `table.atoms.rowSelection` or\n * `table.optionsStore`). Omitting `selector` is equivalent to the identity\n * selector — children receive `TSourceValue`.\n */\nexport type SubscribePropsWithSourceIdentity<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TSourceValue,\n> = {\n  table: Table<TFeatures, TData>\n  source: Atom<TSourceValue> | ReadonlyAtom<TSourceValue>\n  selector?: undefined\n  children: ((state: TSourceValue) => ReactNode) | ReactNode\n}\n\n/**\n * Subscribe to a projected value from a source (atom or store). The selector\n * receives the source value; children receive the projected `TSelected`.\n */\nexport type SubscribePropsWithSourceWithSelector<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TSourceValue,\n  TSelected,\n> = {\n  table: Table<TFeatures, TData>\n  source: Atom<TSourceValue> | ReadonlyAtom<TSourceValue>\n  selector: (state: TSourceValue) => TSelected\n  children: ((state: TSelected) => ReactNode) | ReactNode\n}\n\n/**\n * Subscribe to a single source — atom or store (identity or projected). Prefer\n * {@link SubscribePropsWithSourceIdentity} or {@link SubscribePropsWithSourceWithSelector}\n * for clearer inference when `selector` is omitted.\n */\nexport type SubscribePropsWithSource<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TSourceValue,\n  TSelected = TSourceValue,\n> =\n  | SubscribePropsWithSourceIdentity<TFeatures, TData, TSourceValue>\n  | SubscribePropsWithSourceWithSelector<\n      TFeatures,\n      TData,\n      TSourceValue,\n      TSelected\n    >\n\nexport type SubscribeProps<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TSelected = unknown,\n  TSourceValue = unknown,\n> =\n  | SubscribePropsWithStore<TFeatures, TData, TSelected>\n  | SubscribePropsWithSourceIdentity<TFeatures, TData, TSourceValue>\n  | SubscribePropsWithSourceWithSelector<\n      TFeatures,\n      TData,\n      TSourceValue,\n      TSelected\n    >\n\n/**\n * A React 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 * For `table.Subscribe` from `useTable`, prefer that API — it uses overloads so JSX\n * contextual typing works. This standalone component uses a union `props` type.\n *\n * @example\n * ```tsx\n * // As a standalone component — full store\n * <Subscribe table={table} selector={(state) => ({ rowSelection: state.rowSelection })}>\n *   {({ rowSelection }) => (\n *     <div>Selected rows: {Object.keys(rowSelection).length}</div>\n *   )}\n * </Subscribe>\n * ```\n *\n * @example\n * ```tsx\n * // Entire source (atom or store) — no selector\n * <Subscribe table={table} source={table.atoms.rowSelection}>\n *   {(rowSelection) => <div>...</div>}\n * </Subscribe>\n * ```\n *\n * @example\n * ```tsx\n * // Project source value (e.g. one row’s selection)\n * <Subscribe\n *   table={table}\n *   source={table.atoms.rowSelection}\n *   selector={(rowSelection) => rowSelection?.[row.id]}\n * >\n *   {(selected) => <tr data-selected={!!selected}>...</tr>}\n * </Subscribe>\n * ```\n *\n * @example\n * ```tsx\n * // As table.Subscribe (table instance method)\n * <table.Subscribe selector={(state) => ({ rowSelection: state.rowSelection })}>\n *   {({ rowSelection }) => (\n *     <div>Selected rows: {Object.keys(rowSelection).length}</div>\n *   )}\n * </table.Subscribe>\n * ```\n */\nexport function Subscribe<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TSourceValue,\n>(\n  props: SubscribePropsWithSourceIdentity<TFeatures, TData, TSourceValue>,\n): ReturnType<FunctionComponent>\nexport function Subscribe<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TSourceValue,\n  TSelected,\n>(\n  props: SubscribePropsWithSourceWithSelector<\n    TFeatures,\n    TData,\n    TSourceValue,\n    TSelected\n  >,\n): ReturnType<FunctionComponent>\nexport function Subscribe<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TSelected,\n>(\n  props: SubscribePropsWithStore<TFeatures, TData, TSelected>,\n): ReturnType<FunctionComponent>\nexport function Subscribe<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TSelected,\n  TSourceValue,\n>(\n  props: SubscribeProps<TFeatures, TData, TSelected, TSourceValue>,\n): ReturnType<FunctionComponent> {\n  const source = 'source' in props ? props.source : props.table.store\n  const selectFn =\n    'source' in props ? (props.selector ?? ((x: unknown) => x)) : props.selector\n\n  const selected = useSelector(\n    // Atom and store share the same selection protocol; union args need a widen for TS.\n    source,\n    selectFn as Parameters<typeof useSelector>[1],\n    {\n      compare: shallow,\n    },\n  ) as TSelected\n\n  return typeof props.children === 'function'\n    ? (props.children as (state: TSelected) => ReactNode)(selected)\n    : props.children\n}\n"],"mappings":";;;;;AA8KA,SAAgB,UAMd,OAC+B;CAK/B,MAAM,WAAW,YAJF,YAAY,QAAQ,MAAM,SAAS,MAAM,MAAM,OAE5D,YAAY,QAAS,MAAM,cAAc,MAAe,KAAM,MAAM,UAMpE,EACE,SAAS,SACV,CACF;AAED,QAAO,OAAO,MAAM,aAAa,aAC5B,MAAM,SAA6C,SAAS,GAC7D,MAAM"}

package/dist/createTableHook.d.cts

@@ -1,6 +1,6 @@
 import { ReactTable } from "./useTable.cjs";
-import { AccessorFn, AccessorFnColumnDef, AccessorKeyColumnDef, Cell, CellContext, CellData, Column, ColumnDef, DeepKeys, DeepValue, DisplayColumnDef, GroupColumnDef, Header, IdentifiedColumnDef, NoInfer, Row, RowData, Table, TableFeatures, TableOptions, TableState } from "@tanstack/table-core";
 import { ComponentType, ReactNode } from "react";
+import { AccessorFn, AccessorFnColumnDef, AccessorKeyColumnDef, Cell, CellContext, CellData, Column, ColumnDef, DeepKeys, DeepValue, DisplayColumnDef, GroupColumnDef, Header, IdentifiedColumnDef, NoInfer, Row, RowData, Table, TableFeatures, TableOptions, TableState } from "@tanstack/table-core";
 
 //#region src/createTableHook.d.ts
 /**

package/dist/flex-render.cjs

@@ -0,0 +1,5 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+const require_FlexRender = require('./FlexRender.cjs');
+
+exports.FlexRender = require_FlexRender.FlexRender;
+exports.flexRender = require_FlexRender.flexRender;

package/dist/flex-render.d.cts

@@ -0,0 +1,2 @@
+import { FlexRender, FlexRenderProps, Renderable, flexRender } from "./FlexRender.cjs";
+export { FlexRender, FlexRenderProps, Renderable, flexRender };

package/dist/flex-render.d.ts

@@ -0,0 +1,2 @@
+import { FlexRender, FlexRenderProps, Renderable, flexRender } from "./FlexRender.js";
+export { FlexRender, FlexRenderProps, Renderable, flexRender };

package/dist/flex-render.js

@@ -0,0 +1,3 @@
+import { FlexRender, flexRender } from "./FlexRender.js";
+
+export { FlexRender, flexRender };

package/dist/index.d.cts

@@ -1,6 +1,6 @@
 import { FlexRender, FlexRenderProps, Renderable, flexRender } from "./FlexRender.cjs";
-import { Subscribe, SubscribeProps, SubscribePropsWithAtom, SubscribePropsWithAtomIdentity, SubscribePropsWithAtomWithSelector, SubscribePropsWithStore } from "./Subscribe.cjs";
+import { Subscribe, SubscribeProps, SubscribePropsWithSource, SubscribePropsWithSourceIdentity, SubscribePropsWithSourceWithSelector, SubscribePropsWithStore } from "./Subscribe.cjs";
 import { ReactTable, useTable } from "./useTable.cjs";
 import { AppCellComponent, AppCellContext, AppCellPropsWithSelector, AppCellPropsWithoutSelector, AppColumnHelper, AppHeaderComponent, AppHeaderContext, AppHeaderPropsWithSelector, AppHeaderPropsWithoutSelector, AppReactTable, AppTableComponent, AppTablePropsWithSelector, AppTablePropsWithoutSelector, CreateTableHookOptions, createTableHook } from "./createTableHook.cjs";
 export * from "@tanstack/table-core";
-export { AppCellComponent, AppCellContext, AppCellPropsWithSelector, AppCellPropsWithoutSelector, AppColumnHelper, AppHeaderComponent, AppHeaderContext, AppHeaderPropsWithSelector, AppHeaderPropsWithoutSelector, AppReactTable, AppTableComponent, AppTablePropsWithSelector, AppTablePropsWithoutSelector, CreateTableHookOptions, FlexRender, FlexRenderProps, ReactTable, Renderable, Subscribe, SubscribeProps, SubscribePropsWithAtom, SubscribePropsWithAtomIdentity, SubscribePropsWithAtomWithSelector, SubscribePropsWithStore, createTableHook, flexRender, useTable };
+export { AppCellComponent, AppCellContext, AppCellPropsWithSelector, AppCellPropsWithoutSelector, AppColumnHelper, AppHeaderComponent, AppHeaderContext, AppHeaderPropsWithSelector, AppHeaderPropsWithoutSelector, AppReactTable, AppTableComponent, AppTablePropsWithSelector, AppTablePropsWithoutSelector, CreateTableHookOptions, FlexRender, FlexRenderProps, ReactTable, Renderable, Subscribe, SubscribeProps, SubscribePropsWithSource, SubscribePropsWithSourceIdentity, SubscribePropsWithSourceWithSelector, SubscribePropsWithStore, createTableHook, flexRender, useTable };

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import { FlexRender, FlexRenderProps, Renderable, flexRender } from "./FlexRender.js";
-import { Subscribe, SubscribeProps, SubscribePropsWithAtom, SubscribePropsWithAtomIdentity, SubscribePropsWithAtomWithSelector, SubscribePropsWithStore } from "./Subscribe.js";
+import { Subscribe, SubscribeProps, SubscribePropsWithSource, SubscribePropsWithSourceIdentity, SubscribePropsWithSourceWithSelector, SubscribePropsWithStore } from "./Subscribe.js";
 import { ReactTable, useTable } from "./useTable.js";
 import { AppCellComponent, AppCellContext, AppCellPropsWithSelector, AppCellPropsWithoutSelector, AppColumnHelper, AppHeaderComponent, AppHeaderContext, AppHeaderPropsWithSelector, AppHeaderPropsWithoutSelector, AppReactTable, AppTableComponent, AppTablePropsWithSelector, AppTablePropsWithoutSelector, CreateTableHookOptions, createTableHook } from "./createTableHook.js";
 export * from "@tanstack/table-core";
-export { AppCellComponent, AppCellContext, AppCellPropsWithSelector, AppCellPropsWithoutSelector, AppColumnHelper, AppHeaderComponent, AppHeaderContext, AppHeaderPropsWithSelector, AppHeaderPropsWithoutSelector, AppReactTable, AppTableComponent, AppTablePropsWithSelector, AppTablePropsWithoutSelector, CreateTableHookOptions, FlexRender, FlexRenderProps, ReactTable, Renderable, Subscribe, SubscribeProps, SubscribePropsWithAtom, SubscribePropsWithAtomIdentity, SubscribePropsWithAtomWithSelector, SubscribePropsWithStore, createTableHook, flexRender, useTable };
+export { AppCellComponent, AppCellContext, AppCellPropsWithSelector, AppCellPropsWithoutSelector, AppColumnHelper, AppHeaderComponent, AppHeaderContext, AppHeaderPropsWithSelector, AppHeaderPropsWithoutSelector, AppReactTable, AppTableComponent, AppTablePropsWithSelector, AppTablePropsWithoutSelector, CreateTableHookOptions, FlexRender, FlexRenderProps, ReactTable, Renderable, Subscribe, SubscribeProps, SubscribePropsWithSource, SubscribePropsWithSourceIdentity, SubscribePropsWithSourceWithSelector, SubscribePropsWithStore, createTableHook, flexRender, useTable };

package/dist/useTable.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useTable.cjs","names":["Subscribe","FlexRender","shallow"],"sources":["../src/useTable.ts"],"sourcesContent":["'use client'\n\nimport { useMemo, useState } from 'react'\nimport { constructTable } from '@tanstack/table-core'\nimport { shallow, useSelector } from '@tanstack/react-store'\nimport { FlexRender } from './FlexRender'\nimport { Subscribe } from './Subscribe'\nimport type {\n  CellData,\n  RowData,\n  Table,\n  TableFeatures,\n  TableOptions,\n  TableState,\n} from '@tanstack/table-core'\nimport type { Atom, ReadonlyAtom } from '@tanstack/react-store'\nimport type { FunctionComponent, ReactNode } from 'react'\nimport type { FlexRenderProps } from './FlexRender'\nimport type { SubscribePropsWithStore } 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   * Pass `atom` to subscribe to a single slice atom instead of the full `table.store`.\n   *\n   * @example\n   * <table.Subscribe selector={(state) => ({ rowSelection: state.rowSelection })}>\n   *   {({ rowSelection }) => (\n   *     <tr key={row.id}>...</tr>\n   *   )}\n   * </table.Subscribe>\n   *\n   * @example\n   * <table.Subscribe atom={table.atoms.rowSelection}>\n   *   {(rowSelection) => <div>...</div>}\n   * </table.Subscribe>\n   *\n   * @example\n   * <table.Subscribe atom={table.atoms.rowSelection} selector={(s) => s?.[row.id]}>\n   *   {() => <tr key={row.id}>...</tr>}\n   * </table.Subscribe>\n   */\n  /**\n   * Overloads (not a single union) so `selector` callbacks get correct contextual\n   * types in JSX; a union of two `selector` signatures degrades to implicit `any`.\n   *\n   * Atom **without** `selector` is a separate overload so children receive `TAtomValue`\n   * (identity projection). If `selector` were optional on one overload, `TSubSelected`\n   * would default to `unknown` instead of inferring from the atom.\n   *\n   * The **atom** overloads are listed first so `TAtomValue` is inferred from `atom`.\n   */\n  Subscribe: {\n    <TAtomValue>(props: {\n      atom: Atom<TAtomValue> | ReadonlyAtom<TAtomValue>\n      selector?: undefined\n      children: ((state: TAtomValue) => ReactNode) | ReactNode\n    }): ReturnType<FunctionComponent>\n    <TAtomValue, TSubSelected>(props: {\n      atom: Atom<TAtomValue> | ReadonlyAtom<TAtomValue>\n      selector: (state: TAtomValue) => TSubSelected\n      children: ((state: TSubSelected) => ReactNode) | ReactNode\n    }): ReturnType<FunctionComponent>\n    <TSubSelected>(\n      props: Omit<\n        SubscribePropsWithStore<TFeatures, TData, TSubSelected>,\n        'table'\n      >,\n    ): ReturnType<FunctionComponent>\n  }\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 = ((props: any) => {\n      return Subscribe({\n        ...props,\n        table: tableInstance,\n      })\n    }) as ReactTable<TFeatures, TData, TSelected>['Subscribe']\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 = useSelector(table.store, selectorWithDataAndColumns, {\n    compare: shallow,\n  })\n\n  return useMemo(\n    () => ({\n      ...table,\n      state,\n    }),\n    [state, table],\n  ) as ReactTable<TFeatures, TData, TSelected>\n}\n"],"mappings":";;;;;;;;;;AAgHA,SAAgB,SAKd,cACA,kBACG,EAAE,GACoC;CACzC,MAAM,CAAC,mCAAwB;EAC7B,MAAM,yDAA+B,aAAa;AAMlD,gBAAc,cAAc,UAAe;AACzC,UAAOA,4BAAU;IACf,GAAG;IACH,OAAO;IACR,CAAC;;AAGJ,gBAAc,aAAaC;AAE3B,SAAO;GACP;AAGF,OAAM,YAAY,UAAU;EAC1B,GAAG;EACH,GAAG;EACJ,EAAE;CAEH,MAAM,8BAA8B,WAAkC;EACpE,SAAS,aAAa;EACtB,MAAM,aAAa;EACnB,GAAG,SAAS,MAAM;EACnB;CAED,MAAM,+CAAoB,MAAM,OAAO,4BAA4B,EACjE,SAASC,+BACV,CAAC;AAEF,kCACS;EACL,GAAG;EACH;EACD,GACD,CAAC,OAAO,MAAM,CACf"}
+{"version":3,"file":"useTable.cjs","names":["Subscribe","FlexRender","shallow"],"sources":["../src/useTable.ts"],"sourcesContent":["'use client'\n\nimport { useMemo, useState } from 'react'\nimport { constructTable } from '@tanstack/table-core'\nimport { shallow, useSelector } from '@tanstack/react-store'\nimport { FlexRender } from './FlexRender'\nimport { Subscribe } from './Subscribe'\nimport type {\n  CellData,\n  RowData,\n  Table,\n  TableFeatures,\n  TableOptions,\n  TableState,\n} from '@tanstack/table-core'\nimport type { Atom, ReadonlyAtom } from '@tanstack/react-store'\nimport type { FunctionComponent, ReactNode } from 'react'\nimport type { FlexRenderProps } from './FlexRender'\nimport type { SubscribePropsWithStore } 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   * Pass `source` to subscribe to a single atom or store (e.g. `table.atoms.rowSelection`\n   * or `table.optionsStore`) instead of the full `table.store`.\n   *\n   * @example\n   * <table.Subscribe selector={(state) => ({ rowSelection: state.rowSelection })}>\n   *   {({ rowSelection }) => (\n   *     <tr key={row.id}>...</tr>\n   *   )}\n   * </table.Subscribe>\n   *\n   * @example\n   * <table.Subscribe source={table.atoms.rowSelection}>\n   *   {(rowSelection) => <div>...</div>}\n   * </table.Subscribe>\n   *\n   * @example\n   * <table.Subscribe source={table.atoms.rowSelection} selector={(s) => s?.[row.id]}>\n   *   {() => <tr key={row.id}>...</tr>}\n   * </table.Subscribe>\n   */\n  /**\n   * Overloads (not a single union) so `selector` callbacks get correct contextual\n   * types in JSX; a union of two `selector` signatures degrades to implicit `any`.\n   *\n   * Source **without** `selector` is a separate overload so children receive `TSourceValue`\n   * (identity projection). If `selector` were optional on one overload, `TSubSelected`\n   * would default to `unknown` instead of inferring from the source.\n   *\n   * The **source** overloads are listed first so `TSourceValue` is inferred from `source`.\n   */\n  Subscribe: {\n    <TSourceValue>(props: {\n      source: Atom<TSourceValue> | ReadonlyAtom<TSourceValue>\n      selector?: undefined\n      children: ((state: TSourceValue) => ReactNode) | ReactNode\n    }): ReturnType<FunctionComponent>\n    <TSourceValue, TSubSelected>(props: {\n      source: Atom<TSourceValue> | ReadonlyAtom<TSourceValue>\n      selector: (state: TSourceValue) => TSubSelected\n      children: ((state: TSubSelected) => ReactNode) | ReactNode\n    }): ReturnType<FunctionComponent>\n    <TSubSelected>(\n      props: Omit<\n        SubscribePropsWithStore<TFeatures, TData, TSubSelected>,\n        'table'\n      >,\n    ): ReturnType<FunctionComponent>\n  }\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 = ((props: any) => {\n      return Subscribe({\n        ...props,\n        table: tableInstance,\n      })\n    }) as ReactTable<TFeatures, TData, TSelected>['Subscribe']\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 = useSelector(table.store, selectorWithDataAndColumns, {\n    compare: shallow,\n  })\n\n  return useMemo(\n    () => ({\n      ...table,\n      state,\n    }),\n    [state, table],\n  ) as ReactTable<TFeatures, TData, TSelected>\n}\n"],"mappings":";;;;;;;;;;AAiHA,SAAgB,SAKd,cACA,kBACG,EAAE,GACoC;CACzC,MAAM,CAAC,mCAAwB;EAC7B,MAAM,yDAA+B,aAAa;AAMlD,gBAAc,cAAc,UAAe;AACzC,UAAOA,4BAAU;IACf,GAAG;IACH,OAAO;IACR,CAAC;;AAGJ,gBAAc,aAAaC;AAE3B,SAAO;GACP;AAGF,OAAM,YAAY,UAAU;EAC1B,GAAG;EACH,GAAG;EACJ,EAAE;CAEH,MAAM,8BAA8B,WAAkC;EACpE,SAAS,aAAa;EACtB,MAAM,aAAa;EACnB,GAAG,SAAS,MAAM;EACnB;CAED,MAAM,+CAAoB,MAAM,OAAO,4BAA4B,EACjE,SAASC,+BACV,CAAC;AAEF,kCACS;EACL,GAAG;EACH;EACD,GACD,CAAC,OAAO,MAAM,CACf"}

package/dist/useTable.d.cts

@@ -1,7 +1,7 @@
 import { FlexRenderProps } from "./FlexRender.cjs";
 import { SubscribePropsWithStore } from "./Subscribe.cjs";
-import { CellData, RowData, Table, TableFeatures, TableOptions, TableState } from "@tanstack/table-core";
 import { FunctionComponent, ReactNode } from "react";
+import { CellData, RowData, Table, TableFeatures, TableOptions, TableState } from "@tanstack/table-core";
 import { Atom, ReadonlyAtom } from "@tanstack/react-store";
 
 //#region src/useTable.d.ts
@@ -11,7 +11,8 @@ type ReactTable<TFeatures extends TableFeatures, TData extends RowData, TSelecte
    *
    * 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`.
+   * Pass `source` to subscribe to a single atom or store (e.g. `table.atoms.rowSelection`
+   * or `table.optionsStore`) instead of the full `table.store`.
    *
    * @example
    * <table.Subscribe selector={(state) => ({ rowSelection: state.rowSelection })}>
@@ -21,12 +22,12 @@ type ReactTable<TFeatures extends TableFeatures, TData extends RowData, TSelecte
    * </table.Subscribe>
    *
    * @example
-   * <table.Subscribe atom={table.atoms.rowSelection}>
+   * <table.Subscribe source={table.atoms.rowSelection}>
    *   {(rowSelection) => <div>...</div>}
    * </table.Subscribe>
    *
    * @example
-   * <table.Subscribe atom={table.atoms.rowSelection} selector={(s) => s?.[row.id]}>
+   * <table.Subscribe source={table.atoms.rowSelection} selector={(s) => s?.[row.id]}>
    *   {() => <tr key={row.id}>...</tr>}
    * </table.Subscribe>
    */
@@ -34,21 +35,21 @@ type ReactTable<TFeatures extends TableFeatures, TData extends RowData, TSelecte
    * 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`
+   * Source **without** `selector` is a separate overload so children receive `TSourceValue`
    * (identity projection). If `selector` were optional on one overload, `TSubSelected`
-   * would default to `unknown` instead of inferring from the atom.
+   * would default to `unknown` instead of inferring from the source.
    *
-   * The **atom** overloads are listed first so `TAtomValue` is inferred from `atom`.
+   * The **source** overloads are listed first so `TSourceValue` is inferred from `source`.
    */
   Subscribe: {
-    <TAtomValue>(props: {
-      atom: Atom<TAtomValue> | ReadonlyAtom<TAtomValue>;
+    <TSourceValue>(props: {
+      source: Atom<TSourceValue> | ReadonlyAtom<TSourceValue>;
       selector?: undefined;
-      children: ((state: TAtomValue) => ReactNode) | ReactNode;
+      children: ((state: TSourceValue) => ReactNode) | ReactNode;
     }): ReturnType<FunctionComponent>;
-    <TAtomValue, TSubSelected>(props: {
-      atom: Atom<TAtomValue> | ReadonlyAtom<TAtomValue>;
-      selector: (state: TAtomValue) => TSubSelected;
+    <TSourceValue, TSubSelected>(props: {
+      source: Atom<TSourceValue> | ReadonlyAtom<TSourceValue>;
+      selector: (state: TSourceValue) => TSubSelected;
       children: ((state: TSubSelected) => ReactNode) | ReactNode;
     }): ReturnType<FunctionComponent>;
     <TSubSelected>(props: Omit<SubscribePropsWithStore<TFeatures, TData, TSubSelected>, 'table'>): ReturnType<FunctionComponent>;

package/dist/useTable.d.ts

@@ -11,7 +11,8 @@ type ReactTable<TFeatures extends TableFeatures, TData extends RowData, TSelecte
    *
    * 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`.
+   * Pass `source` to subscribe to a single atom or store (e.g. `table.atoms.rowSelection`
+   * or `table.optionsStore`) instead of the full `table.store`.
    *
    * @example
    * <table.Subscribe selector={(state) => ({ rowSelection: state.rowSelection })}>
@@ -21,12 +22,12 @@ type ReactTable<TFeatures extends TableFeatures, TData extends RowData, TSelecte
    * </table.Subscribe>
    *
    * @example
-   * <table.Subscribe atom={table.atoms.rowSelection}>
+   * <table.Subscribe source={table.atoms.rowSelection}>
    *   {(rowSelection) => <div>...</div>}
    * </table.Subscribe>
    *
    * @example
-   * <table.Subscribe atom={table.atoms.rowSelection} selector={(s) => s?.[row.id]}>
+   * <table.Subscribe source={table.atoms.rowSelection} selector={(s) => s?.[row.id]}>
    *   {() => <tr key={row.id}>...</tr>}
    * </table.Subscribe>
    */
@@ -34,21 +35,21 @@ type ReactTable<TFeatures extends TableFeatures, TData extends RowData, TSelecte
    * 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`
+   * Source **without** `selector` is a separate overload so children receive `TSourceValue`
    * (identity projection). If `selector` were optional on one overload, `TSubSelected`
-   * would default to `unknown` instead of inferring from the atom.
+   * would default to `unknown` instead of inferring from the source.
    *
-   * The **atom** overloads are listed first so `TAtomValue` is inferred from `atom`.
+   * The **source** overloads are listed first so `TSourceValue` is inferred from `source`.
    */
   Subscribe: {
-    <TAtomValue>(props: {
-      atom: Atom<TAtomValue> | ReadonlyAtom<TAtomValue>;
+    <TSourceValue>(props: {
+      source: Atom<TSourceValue> | ReadonlyAtom<TSourceValue>;
       selector?: undefined;
-      children: ((state: TAtomValue) => ReactNode) | ReactNode;
+      children: ((state: TSourceValue) => ReactNode) | ReactNode;
     }): ReturnType<FunctionComponent>;
-    <TAtomValue, TSubSelected>(props: {
-      atom: Atom<TAtomValue> | ReadonlyAtom<TAtomValue>;
-      selector: (state: TAtomValue) => TSubSelected;
+    <TSourceValue, TSubSelected>(props: {
+      source: Atom<TSourceValue> | ReadonlyAtom<TSourceValue>;
+      selector: (state: TSourceValue) => TSubSelected;
       children: ((state: TSubSelected) => ReactNode) | ReactNode;
     }): ReturnType<FunctionComponent>;
     <TSubSelected>(props: Omit<SubscribePropsWithStore<TFeatures, TData, TSubSelected>, 'table'>): ReturnType<FunctionComponent>;

package/dist/useTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"useTable.js","names":[],"sources":["../src/useTable.ts"],"sourcesContent":["'use client'\n\nimport { useMemo, useState } from 'react'\nimport { constructTable } from '@tanstack/table-core'\nimport { shallow, useSelector } from '@tanstack/react-store'\nimport { FlexRender } from './FlexRender'\nimport { Subscribe } from './Subscribe'\nimport type {\n  CellData,\n  RowData,\n  Table,\n  TableFeatures,\n  TableOptions,\n  TableState,\n} from '@tanstack/table-core'\nimport type { Atom, ReadonlyAtom } from '@tanstack/react-store'\nimport type { FunctionComponent, ReactNode } from 'react'\nimport type { FlexRenderProps } from './FlexRender'\nimport type { SubscribePropsWithStore } 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   * Pass `atom` to subscribe to a single slice atom instead of the full `table.store`.\n   *\n   * @example\n   * <table.Subscribe selector={(state) => ({ rowSelection: state.rowSelection })}>\n   *   {({ rowSelection }) => (\n   *     <tr key={row.id}>...</tr>\n   *   )}\n   * </table.Subscribe>\n   *\n   * @example\n   * <table.Subscribe atom={table.atoms.rowSelection}>\n   *   {(rowSelection) => <div>...</div>}\n   * </table.Subscribe>\n   *\n   * @example\n   * <table.Subscribe atom={table.atoms.rowSelection} selector={(s) => s?.[row.id]}>\n   *   {() => <tr key={row.id}>...</tr>}\n   * </table.Subscribe>\n   */\n  /**\n   * Overloads (not a single union) so `selector` callbacks get correct contextual\n   * types in JSX; a union of two `selector` signatures degrades to implicit `any`.\n   *\n   * Atom **without** `selector` is a separate overload so children receive `TAtomValue`\n   * (identity projection). If `selector` were optional on one overload, `TSubSelected`\n   * would default to `unknown` instead of inferring from the atom.\n   *\n   * The **atom** overloads are listed first so `TAtomValue` is inferred from `atom`.\n   */\n  Subscribe: {\n    <TAtomValue>(props: {\n      atom: Atom<TAtomValue> | ReadonlyAtom<TAtomValue>\n      selector?: undefined\n      children: ((state: TAtomValue) => ReactNode) | ReactNode\n    }): ReturnType<FunctionComponent>\n    <TAtomValue, TSubSelected>(props: {\n      atom: Atom<TAtomValue> | ReadonlyAtom<TAtomValue>\n      selector: (state: TAtomValue) => TSubSelected\n      children: ((state: TSubSelected) => ReactNode) | ReactNode\n    }): ReturnType<FunctionComponent>\n    <TSubSelected>(\n      props: Omit<\n        SubscribePropsWithStore<TFeatures, TData, TSubSelected>,\n        'table'\n      >,\n    ): ReturnType<FunctionComponent>\n  }\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 = ((props: any) => {\n      return Subscribe({\n        ...props,\n        table: tableInstance,\n      })\n    }) as ReactTable<TFeatures, TData, TSelected>['Subscribe']\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 = useSelector(table.store, selectorWithDataAndColumns, {\n    compare: shallow,\n  })\n\n  return useMemo(\n    () => ({\n      ...table,\n      state,\n    }),\n    [state, table],\n  ) as ReactTable<TFeatures, TData, TSelected>\n}\n"],"mappings":";;;;;;;;;AAgHA,SAAgB,SAKd,cACA,kBACG,EAAE,GACoC;CACzC,MAAM,CAAC,SAAS,eAAe;EAC7B,MAAM,gBAAgB,eAAe,aAAa;AAMlD,gBAAc,cAAc,UAAe;AACzC,UAAO,UAAU;IACf,GAAG;IACH,OAAO;IACR,CAAC;;AAGJ,gBAAc,aAAa;AAE3B,SAAO;GACP;AAGF,OAAM,YAAY,UAAU;EAC1B,GAAG;EACH,GAAG;EACJ,EAAE;CAEH,MAAM,8BAA8B,WAAkC;EACpE,SAAS,aAAa;EACtB,MAAM,aAAa;EACnB,GAAG,SAAS,MAAM;EACnB;CAED,MAAM,QAAQ,YAAY,MAAM,OAAO,4BAA4B,EACjE,SAAS,SACV,CAAC;AAEF,QAAO,eACE;EACL,GAAG;EACH;EACD,GACD,CAAC,OAAO,MAAM,CACf"}
+{"version":3,"file":"useTable.js","names":[],"sources":["../src/useTable.ts"],"sourcesContent":["'use client'\n\nimport { useMemo, useState } from 'react'\nimport { constructTable } from '@tanstack/table-core'\nimport { shallow, useSelector } from '@tanstack/react-store'\nimport { FlexRender } from './FlexRender'\nimport { Subscribe } from './Subscribe'\nimport type {\n  CellData,\n  RowData,\n  Table,\n  TableFeatures,\n  TableOptions,\n  TableState,\n} from '@tanstack/table-core'\nimport type { Atom, ReadonlyAtom } from '@tanstack/react-store'\nimport type { FunctionComponent, ReactNode } from 'react'\nimport type { FlexRenderProps } from './FlexRender'\nimport type { SubscribePropsWithStore } 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   * Pass `source` to subscribe to a single atom or store (e.g. `table.atoms.rowSelection`\n   * or `table.optionsStore`) instead of the full `table.store`.\n   *\n   * @example\n   * <table.Subscribe selector={(state) => ({ rowSelection: state.rowSelection })}>\n   *   {({ rowSelection }) => (\n   *     <tr key={row.id}>...</tr>\n   *   )}\n   * </table.Subscribe>\n   *\n   * @example\n   * <table.Subscribe source={table.atoms.rowSelection}>\n   *   {(rowSelection) => <div>...</div>}\n   * </table.Subscribe>\n   *\n   * @example\n   * <table.Subscribe source={table.atoms.rowSelection} selector={(s) => s?.[row.id]}>\n   *   {() => <tr key={row.id}>...</tr>}\n   * </table.Subscribe>\n   */\n  /**\n   * Overloads (not a single union) so `selector` callbacks get correct contextual\n   * types in JSX; a union of two `selector` signatures degrades to implicit `any`.\n   *\n   * Source **without** `selector` is a separate overload so children receive `TSourceValue`\n   * (identity projection). If `selector` were optional on one overload, `TSubSelected`\n   * would default to `unknown` instead of inferring from the source.\n   *\n   * The **source** overloads are listed first so `TSourceValue` is inferred from `source`.\n   */\n  Subscribe: {\n    <TSourceValue>(props: {\n      source: Atom<TSourceValue> | ReadonlyAtom<TSourceValue>\n      selector?: undefined\n      children: ((state: TSourceValue) => ReactNode) | ReactNode\n    }): ReturnType<FunctionComponent>\n    <TSourceValue, TSubSelected>(props: {\n      source: Atom<TSourceValue> | ReadonlyAtom<TSourceValue>\n      selector: (state: TSourceValue) => TSubSelected\n      children: ((state: TSubSelected) => ReactNode) | ReactNode\n    }): ReturnType<FunctionComponent>\n    <TSubSelected>(\n      props: Omit<\n        SubscribePropsWithStore<TFeatures, TData, TSubSelected>,\n        'table'\n      >,\n    ): ReturnType<FunctionComponent>\n  }\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 = ((props: any) => {\n      return Subscribe({\n        ...props,\n        table: tableInstance,\n      })\n    }) as ReactTable<TFeatures, TData, TSelected>['Subscribe']\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 = useSelector(table.store, selectorWithDataAndColumns, {\n    compare: shallow,\n  })\n\n  return useMemo(\n    () => ({\n      ...table,\n      state,\n    }),\n    [state, table],\n  ) as ReactTable<TFeatures, TData, TSelected>\n}\n"],"mappings":";;;;;;;;;AAiHA,SAAgB,SAKd,cACA,kBACG,EAAE,GACoC;CACzC,MAAM,CAAC,SAAS,eAAe;EAC7B,MAAM,gBAAgB,eAAe,aAAa;AAMlD,gBAAc,cAAc,UAAe;AACzC,UAAO,UAAU;IACf,GAAG;IACH,OAAO;IACR,CAAC;;AAGJ,gBAAc,aAAa;AAE3B,SAAO;GACP;AAGF,OAAM,YAAY,UAAU;EAC1B,GAAG;EACH,GAAG;EACJ,EAAE;CAEH,MAAM,8BAA8B,WAAkC;EACpE,SAAS,aAAa;EACtB,MAAM,aAAa;EACnB,GAAG,SAAS,MAAM;EACnB;CAED,MAAM,QAAQ,YAAY,MAAM,OAAO,4BAA4B,EACjE,SAAS,SACV,CAAC;AAEF,QAAO,eACE;EACL,GAAG;EACH;EACD,GACD,CAAC,OAAO,MAAM,CACf"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/react-table",
-  "version": "9.0.0-alpha.34",
+  "version": "9.0.0-alpha.36",
   "description": "Headless UI for building powerful tables & datagrids for React.",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -29,6 +29,10 @@
       "import": "./dist/index.js",
       "require": "./dist/index.cjs"
     },
+    "./flex-render": {
+      "import": "./dist/flex-render.js",
+      "require": "./dist/flex-render.cjs"
+    },
     "./legacy": {
       "import": "./dist/legacy.js",
       "require": "./dist/legacy.cjs"
@@ -49,7 +53,7 @@
   ],
   "dependencies": {
     "@tanstack/react-store": "^0.11.0",
-    "@tanstack/table-core": "9.0.0-alpha.34"
+    "@tanstack/table-core": "9.0.0-alpha.36"
   },
   "devDependencies": {
     "@eslint-react/eslint-plugin": "^4.2.3",

package/src/Subscribe.ts

@@ -32,60 +32,70 @@ export type SubscribePropsWithStore<
 }
 
 /**
- * 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`.
+ * 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`.
  */
-export type SubscribePropsWithAtomIdentity<
+export type SubscribePropsWithSourceIdentity<
   TFeatures extends TableFeatures,
   TData extends RowData,
-  TAtomValue,
+  TSourceValue,
 > = {
   table: Table<TFeatures, TData>
-  atom: Atom<TAtomValue> | ReadonlyAtom<TAtomValue>
+  source: Atom<TSourceValue> | ReadonlyAtom<TSourceValue>
   selector?: undefined
-  children: ((state: TAtomValue) => ReactNode) | ReactNode
+  children: ((state: TSourceValue) => ReactNode) | ReactNode
 }
 
 /**
- * Subscribe to a projected value from a slice atom. The selector receives the
- * atom value; children receive the projected `TSelected`.
+ * Subscribe to a projected value from a source (atom or store). The selector
+ * receives the source value; children receive the projected `TSelected`.
  */
-export type SubscribePropsWithAtomWithSelector<
+export type SubscribePropsWithSourceWithSelector<
   TFeatures extends TableFeatures,
   TData extends RowData,
-  TAtomValue,
+  TSourceValue,
   TSelected,
 > = {
   table: Table<TFeatures, TData>
-  atom: Atom<TAtomValue> | ReadonlyAtom<TAtomValue>
-  selector: (state: TAtomValue) => TSelected
+  source: Atom<TSourceValue> | ReadonlyAtom<TSourceValue>
+  selector: (state: TSourceValue) => TSelected
   children: ((state: TSelected) => ReactNode) | ReactNode
 }
 
 /**
- * Subscribe to a single slice atom (identity or projected). Prefer
- * {@link SubscribePropsWithAtomIdentity} or {@link SubscribePropsWithAtomWithSelector}
+ * Subscribe to a single source — atom or store (identity or projected). Prefer
+ * {@link SubscribePropsWithSourceIdentity} or {@link SubscribePropsWithSourceWithSelector}
  * for clearer inference when `selector` is omitted.
  */
-export type SubscribePropsWithAtom<
+export type SubscribePropsWithSource<
   TFeatures extends TableFeatures,
   TData extends RowData,
-  TAtomValue,
-  TSelected = TAtomValue,
+  TSourceValue,
+  TSelected = TSourceValue,
 > =
-  | SubscribePropsWithAtomIdentity<TFeatures, TData, TAtomValue>
-  | SubscribePropsWithAtomWithSelector<TFeatures, TData, TAtomValue, TSelected>
+  | SubscribePropsWithSourceIdentity<TFeatures, TData, TSourceValue>
+  | SubscribePropsWithSourceWithSelector<
+      TFeatures,
+      TData,
+      TSourceValue,
+      TSelected
+    >
 
 export type SubscribeProps<
   TFeatures extends TableFeatures,
   TData extends RowData,
   TSelected = unknown,
-  TAtomValue = unknown,
+  TSourceValue = unknown,
 > =
   | SubscribePropsWithStore<TFeatures, TData, TSelected>
-  | SubscribePropsWithAtomIdentity<TFeatures, TData, TAtomValue>
-  | SubscribePropsWithAtomWithSelector<TFeatures, TData, TAtomValue, TSelected>
+  | SubscribePropsWithSourceIdentity<TFeatures, TData, TSourceValue>
+  | SubscribePropsWithSourceWithSelector<
+      TFeatures,
+      TData,
+      TSourceValue,
+      TSelected
+    >
 
 /**
  * A React component that allows you to subscribe to the table state.
@@ -107,18 +117,18 @@ export type SubscribeProps<
  *
  * @example
  * ```tsx
- * // Entire slice atom (no selector)
- * <Subscribe table={table} atom={table.atoms.rowSelection}>
+ * // Entire source (atom or store) — no selector
+ * <Subscribe table={table} source={table.atoms.rowSelection}>
  *   {(rowSelection) => <div>...</div>}
  * </Subscribe>
  * ```
  *
  * @example
  * ```tsx
- * // Project atom value (e.g. one row’s selection)
+ * // Project source value (e.g. one row’s selection)
  * <Subscribe
  *   table={table}
- *   atom={table.atoms.rowSelection}
+ *   source={table.atoms.rowSelection}
  *   selector={(rowSelection) => rowSelection?.[row.id]}
  * >
  *   {(selected) => <tr data-selected={!!selected}>...</tr>}
@@ -138,20 +148,20 @@ export type SubscribeProps<
 export function Subscribe<
   TFeatures extends TableFeatures,
   TData extends RowData,
-  TAtomValue,
+  TSourceValue,
 >(
-  props: SubscribePropsWithAtomIdentity<TFeatures, TData, TAtomValue>,
+  props: SubscribePropsWithSourceIdentity<TFeatures, TData, TSourceValue>,
 ): ReturnType<FunctionComponent>
 export function Subscribe<
   TFeatures extends TableFeatures,
   TData extends RowData,
-  TAtomValue,
+  TSourceValue,
   TSelected,
 >(
-  props: SubscribePropsWithAtomWithSelector<
+  props: SubscribePropsWithSourceWithSelector<
     TFeatures,
     TData,
-    TAtomValue,
+    TSourceValue,
     TSelected
   >,
 ): ReturnType<FunctionComponent>
@@ -166,13 +176,13 @@ export function Subscribe<
   TFeatures extends TableFeatures,
   TData extends RowData,
   TSelected,
-  TAtomValue,
+  TSourceValue,
 >(
-  props: SubscribeProps<TFeatures, TData, TSelected, TAtomValue>,
+  props: SubscribeProps<TFeatures, TData, TSelected, TSourceValue>,
 ): ReturnType<FunctionComponent> {
-  const source = 'atom' in props ? props.atom : props.table.store
+  const source = 'source' in props ? props.source : props.table.store
   const selectFn =
-    'atom' in props ? (props.selector ?? ((x: unknown) => x)) : props.selector
+    '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.

package/src/flex-render.ts

@@ -0,0 +1 @@
+export * from './FlexRender'

package/src/useTable.ts

@@ -28,7 +28,8 @@ 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`.
+   * Pass `source` to subscribe to a single atom or store (e.g. `table.atoms.rowSelection`
+   * or `table.optionsStore`) instead of the full `table.store`.
    *
    * @example
    * <table.Subscribe selector={(state) => ({ rowSelection: state.rowSelection })}>
@@ -38,12 +39,12 @@ export type ReactTable<
    * </table.Subscribe>
    *
    * @example
-   * <table.Subscribe atom={table.atoms.rowSelection}>
+   * <table.Subscribe source={table.atoms.rowSelection}>
    *   {(rowSelection) => <div>...</div>}
    * </table.Subscribe>
    *
    * @example
-   * <table.Subscribe atom={table.atoms.rowSelection} selector={(s) => s?.[row.id]}>
+   * <table.Subscribe source={table.atoms.rowSelection} selector={(s) => s?.[row.id]}>
    *   {() => <tr key={row.id}>...</tr>}
    * </table.Subscribe>
    */
@@ -51,21 +52,21 @@ export type ReactTable<
    * 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`
+   * Source **without** `selector` is a separate overload so children receive `TSourceValue`
    * (identity projection). If `selector` were optional on one overload, `TSubSelected`
-   * would default to `unknown` instead of inferring from the atom.
+   * would default to `unknown` instead of inferring from the source.
    *
-   * The **atom** overloads are listed first so `TAtomValue` is inferred from `atom`.
+   * The **source** overloads are listed first so `TSourceValue` is inferred from `source`.
    */
   Subscribe: {
-    <TAtomValue>(props: {
-      atom: Atom<TAtomValue> | ReadonlyAtom<TAtomValue>
+    <TSourceValue>(props: {
+      source: Atom<TSourceValue> | ReadonlyAtom<TSourceValue>
       selector?: undefined
-      children: ((state: TAtomValue) => ReactNode) | ReactNode
+      children: ((state: TSourceValue) => ReactNode) | ReactNode
     }): ReturnType<FunctionComponent>
-    <TAtomValue, TSubSelected>(props: {
-      atom: Atom<TAtomValue> | ReadonlyAtom<TAtomValue>
-      selector: (state: TAtomValue) => TSubSelected
+    <TSourceValue, TSubSelected>(props: {
+      source: Atom<TSourceValue> | ReadonlyAtom<TSourceValue>
+      selector: (state: TSourceValue) => TSubSelected
       children: ((state: TSubSelected) => ReactNode) | ReactNode
     }): ReturnType<FunctionComponent>
     <TSubSelected>(