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

package/dist/Subscribe.cjs

@@ -1,33 +1,8 @@
 let _tanstack_preact_store = require("@tanstack/preact-store");
 
 //#region src/Subscribe.ts
-/**
-* A Preact 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.
-*
-* @example
-* ```tsx
-* // As a standalone component
-* <Subscribe table={table} selector={(state) => ({ rowSelection: state.rowSelection })}>
-*   {({ rowSelection }) => (
-*     <div>Selected rows: {Object.keys(rowSelection).length}</div>
-*   )}
-* </Subscribe>
-* ```
-*
-* @example
-* ```tsx
-* // As table.Subscribe (table instance method)
-* <table.Subscribe selector={(state) => ({ rowSelection: state.rowSelection })}>
-*   {({ rowSelection }) => (
-*     <div>Selected rows: {Object.keys(rowSelection).length}</div>
-*   )}
-* </table.Subscribe>
-* ```
-*/
 function Subscribe(props) {
-	const selected = (0, _tanstack_preact_store.useStore)(props.table.store, props.selector);
+	const selected = (0, _tanstack_preact_store.useSelector)("atom" in props ? props.atom : props.table.store, "atom" in props ? props.selector ?? ((x) => x) : props.selector, { compare: _tanstack_preact_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":[],"sources":["../src/Subscribe.ts"],"sourcesContent":["import { useStore } from '@tanstack/preact-store'\nimport type {\n  NoInfer,\n  RowData,\n  Table,\n  TableFeatures,\n  TableState,\n} from '@tanstack/table-core'\nimport type { ComponentChildren } from 'preact'\n\nexport type SubscribeProps<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TSelected = {},\n> = {\n  /**\n   * The table instance to subscribe to. Required when using as a standalone component.\n   * Not needed when using as `table.Subscribe`.\n   */\n  table: Table<TFeatures, TData>\n  /**\n   * A selector function that selects the part of the table state to subscribe to.\n   * This allows for fine-grained reactivity by only re-rendering when the selected state changes.\n   */\n  selector: (state: NoInfer<TableState<TFeatures>>) => TSelected\n  /**\n   * The children to render. Can be a function that receives the selected state, or a Preact node.\n   */\n  children: ((state: TSelected) => ComponentChildren) | ComponentChildren\n}\n\n/**\n * A Preact 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 * @example\n * ```tsx\n * // As a standalone component\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 * // 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  TSelected = {},\n>(props: SubscribeProps<TFeatures, TData, TSelected>): ComponentChildren {\n  const selected = useStore(props.table.store, props.selector)\n\n  return typeof props.children === 'function'\n    ? props.children(selected)\n    : props.children\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwDA,SAAgB,UAId,OAAuE;CACvE,MAAM,gDAAoB,MAAM,MAAM,OAAO,MAAM,SAAS;AAE5D,QAAO,OAAO,MAAM,aAAa,aAC7B,MAAM,SAAS,SAAS,GACxB,MAAM"}
+{"version":3,"file":"Subscribe.cjs","names":["shallow"],"sources":["../src/Subscribe.ts"],"sourcesContent":["import { shallow, useSelector } from '@tanstack/preact-store'\nimport type { Atom, ReadonlyAtom } from '@tanstack/preact-store'\nimport type {\n  RowData,\n  Table,\n  TableFeatures,\n  TableState,\n} from '@tanstack/table-core'\nimport type { ComponentChildren } from 'preact'\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) => ComponentChildren) | ComponentChildren\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) => ComponentChildren) | ComponentChildren\n}\n\n/**\n * Subscribe to a projected value from a slice atom.\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) => ComponentChildren) | ComponentChildren\n}\n\n/**\n * Subscribe to a single slice atom (identity or projected).\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 Preact component that allows you to subscribe to the table state.\n *\n * For `table.Subscribe` from `useTable`, prefer that API — it uses overloads so\n * JSX contextual typing works. This standalone component uses a union `props` type.\n */\nexport function Subscribe<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TAtomValue,\n>(\n  props: SubscribePropsWithAtomIdentity<TFeatures, TData, TAtomValue>,\n): ComponentChildren\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): ComponentChildren\nexport function Subscribe<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TSelected,\n>(\n  props: SubscribePropsWithStore<TFeatures, TData, TSelected>,\n): ComponentChildren\nexport function Subscribe<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TSelected,\n  TAtomValue,\n>(\n  props: SubscribeProps<TFeatures, TData, TSelected, TAtomValue>,\n): ComponentChildren {\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    source as never,\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) => ComponentChildren)(selected)\n    : props.children\n}\n"],"mappings":";;;AAqHA,SAAgB,UAMd,OACmB;CAKnB,MAAM,mDAJS,UAAU,QAAQ,MAAM,OAAO,MAAM,MAAM,OAExD,UAAU,QAAS,MAAM,cAAc,MAAe,KAAM,MAAM,UAKlE,EACE,SAASA,gCACV,CACF;AAED,QAAO,OAAO,MAAM,aAAa,aAC5B,MAAM,SAAqD,SAAS,GACrE,MAAM"}

package/dist/Subscribe.d.cts

@@ -1,49 +1,58 @@
-import { NoInfer, RowData, Table, TableFeatures, TableState } from "@tanstack/table-core";
+import { RowData, Table, TableFeatures, TableState } from "@tanstack/table-core";
 import { ComponentChildren } from "preact";
+import { Atom, ReadonlyAtom } from "@tanstack/preact-store";
 
 //#region src/Subscribe.d.ts
-type SubscribeProps<TFeatures extends TableFeatures, TData extends RowData, TSelected = {}> = {
-  /**
-   * The table instance to subscribe to. Required when using as a standalone component.
-   * Not needed when using as `table.Subscribe`.
-   */
+/**
+ * Subscribe to `table.store` (full table state). The selector receives the full
+ * {@link TableState}.
+ */
+type SubscribePropsWithStore<TFeatures extends TableFeatures, TData extends RowData, TSelected> = {
   table: Table<TFeatures, TData>;
   /**
-   * A selector function that selects the part of the table state to subscribe to.
-   * This allows for fine-grained reactivity by only re-rendering when the selected state changes.
-   */
-  selector: (state: NoInfer<TableState<TFeatures>>) => TSelected;
-  /**
-   * The children to render. Can be a function that receives the selected state, or a Preact node.
+   * Select from full table state. Re-renders when the selected value changes
+   * (shallow compare).
+   *
+   * Required in store mode so you never accidentally subscribe to the whole
+   * store without an explicit projection.
    */
+  selector: (state: TableState<TFeatures>) => TSelected;
   children: ((state: TSelected) => ComponentChildren) | ComponentChildren;
 };
+/**
+ * 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`.
+ */
+type SubscribePropsWithAtomIdentity<TFeatures extends TableFeatures, TData extends RowData, TAtomValue> = {
+  table: Table<TFeatures, TData>;
+  atom: Atom<TAtomValue> | ReadonlyAtom<TAtomValue>;
+  selector?: undefined;
+  children: ((state: TAtomValue) => ComponentChildren) | ComponentChildren;
+};
+/**
+ * Subscribe to a projected value from a slice atom.
+ */
+type SubscribePropsWithAtomWithSelector<TFeatures extends TableFeatures, TData extends RowData, TAtomValue, TSelected> = {
+  table: Table<TFeatures, TData>;
+  atom: Atom<TAtomValue> | ReadonlyAtom<TAtomValue>;
+  selector: (state: TAtomValue) => TSelected;
+  children: ((state: TSelected) => ComponentChildren) | ComponentChildren;
+};
+/**
+ * Subscribe to a single slice atom (identity or projected).
+ */
+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>;
 /**
  * A Preact 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.
- *
- * @example
- * ```tsx
- * // As a standalone component
- * <Subscribe table={table} selector={(state) => ({ rowSelection: state.rowSelection })}>
- *   {({ rowSelection }) => (
- *     <div>Selected rows: {Object.keys(rowSelection).length}</div>
- *   )}
- * </Subscribe>
- * ```
- *
- * @example
- * ```tsx
- * // As table.Subscribe (table instance method)
- * <table.Subscribe selector={(state) => ({ rowSelection: state.rowSelection })}>
- *   {({ rowSelection }) => (
- *     <div>Selected rows: {Object.keys(rowSelection).length}</div>
- *   )}
- * </table.Subscribe>
- * ```
+ * For `table.Subscribe` from `useTable`, prefer that API — it uses overloads so
+ * JSX contextual typing works. This standalone component uses a union `props` type.
  */
-declare function Subscribe<TFeatures extends TableFeatures, TData extends RowData, TSelected = {}>(props: SubscribeProps<TFeatures, TData, TSelected>): ComponentChildren;
+declare function Subscribe<TFeatures extends TableFeatures, TData extends RowData, TAtomValue>(props: SubscribePropsWithAtomIdentity<TFeatures, TData, TAtomValue>): ComponentChildren;
+declare function Subscribe<TFeatures extends TableFeatures, TData extends RowData, TAtomValue, TSelected>(props: SubscribePropsWithAtomWithSelector<TFeatures, TData, TAtomValue, TSelected>): ComponentChildren;
+declare function Subscribe<TFeatures extends TableFeatures, TData extends RowData, TSelected>(props: SubscribePropsWithStore<TFeatures, TData, TSelected>): ComponentChildren;
 //#endregion
-export { Subscribe, SubscribeProps };
+export { Subscribe, SubscribeProps, SubscribePropsWithAtom, SubscribePropsWithAtomIdentity, SubscribePropsWithAtomWithSelector, SubscribePropsWithStore };
 //# sourceMappingURL=Subscribe.d.cts.map

package/dist/Subscribe.d.ts

@@ -1,49 +1,58 @@
-import { NoInfer, RowData, Table, TableFeatures, TableState } from "@tanstack/table-core";
+import { RowData, Table, TableFeatures, TableState } from "@tanstack/table-core";
+import { Atom, ReadonlyAtom } from "@tanstack/preact-store";
 import { ComponentChildren } from "preact";
 
 //#region src/Subscribe.d.ts
-type SubscribeProps<TFeatures extends TableFeatures, TData extends RowData, TSelected = {}> = {
-  /**
-   * The table instance to subscribe to. Required when using as a standalone component.
-   * Not needed when using as `table.Subscribe`.
-   */
+/**
+ * Subscribe to `table.store` (full table state). The selector receives the full
+ * {@link TableState}.
+ */
+type SubscribePropsWithStore<TFeatures extends TableFeatures, TData extends RowData, TSelected> = {
   table: Table<TFeatures, TData>;
   /**
-   * A selector function that selects the part of the table state to subscribe to.
-   * This allows for fine-grained reactivity by only re-rendering when the selected state changes.
-   */
-  selector: (state: NoInfer<TableState<TFeatures>>) => TSelected;
-  /**
-   * The children to render. Can be a function that receives the selected state, or a Preact node.
+   * Select from full table state. Re-renders when the selected value changes
+   * (shallow compare).
+   *
+   * Required in store mode so you never accidentally subscribe to the whole
+   * store without an explicit projection.
    */
+  selector: (state: TableState<TFeatures>) => TSelected;
   children: ((state: TSelected) => ComponentChildren) | ComponentChildren;
 };
+/**
+ * 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`.
+ */
+type SubscribePropsWithAtomIdentity<TFeatures extends TableFeatures, TData extends RowData, TAtomValue> = {
+  table: Table<TFeatures, TData>;
+  atom: Atom<TAtomValue> | ReadonlyAtom<TAtomValue>;
+  selector?: undefined;
+  children: ((state: TAtomValue) => ComponentChildren) | ComponentChildren;
+};
+/**
+ * Subscribe to a projected value from a slice atom.
+ */
+type SubscribePropsWithAtomWithSelector<TFeatures extends TableFeatures, TData extends RowData, TAtomValue, TSelected> = {
+  table: Table<TFeatures, TData>;
+  atom: Atom<TAtomValue> | ReadonlyAtom<TAtomValue>;
+  selector: (state: TAtomValue) => TSelected;
+  children: ((state: TSelected) => ComponentChildren) | ComponentChildren;
+};
+/**
+ * Subscribe to a single slice atom (identity or projected).
+ */
+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>;
 /**
  * A Preact 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.
- *
- * @example
- * ```tsx
- * // As a standalone component
- * <Subscribe table={table} selector={(state) => ({ rowSelection: state.rowSelection })}>
- *   {({ rowSelection }) => (
- *     <div>Selected rows: {Object.keys(rowSelection).length}</div>
- *   )}
- * </Subscribe>
- * ```
- *
- * @example
- * ```tsx
- * // As table.Subscribe (table instance method)
- * <table.Subscribe selector={(state) => ({ rowSelection: state.rowSelection })}>
- *   {({ rowSelection }) => (
- *     <div>Selected rows: {Object.keys(rowSelection).length}</div>
- *   )}
- * </table.Subscribe>
- * ```
+ * For `table.Subscribe` from `useTable`, prefer that API — it uses overloads so
+ * JSX contextual typing works. This standalone component uses a union `props` type.
  */
-declare function Subscribe<TFeatures extends TableFeatures, TData extends RowData, TSelected = {}>(props: SubscribeProps<TFeatures, TData, TSelected>): ComponentChildren;
+declare function Subscribe<TFeatures extends TableFeatures, TData extends RowData, TAtomValue>(props: SubscribePropsWithAtomIdentity<TFeatures, TData, TAtomValue>): ComponentChildren;
+declare function Subscribe<TFeatures extends TableFeatures, TData extends RowData, TAtomValue, TSelected>(props: SubscribePropsWithAtomWithSelector<TFeatures, TData, TAtomValue, TSelected>): ComponentChildren;
+declare function Subscribe<TFeatures extends TableFeatures, TData extends RowData, TSelected>(props: SubscribePropsWithStore<TFeatures, TData, TSelected>): ComponentChildren;
 //#endregion
-export { Subscribe, SubscribeProps };
+export { Subscribe, SubscribeProps, SubscribePropsWithAtom, SubscribePropsWithAtomIdentity, SubscribePropsWithAtomWithSelector, SubscribePropsWithStore };
 //# sourceMappingURL=Subscribe.d.ts.map

package/dist/Subscribe.js

@@ -1,33 +1,8 @@
-import { useStore } from "@tanstack/preact-store";
+import { shallow, useSelector } from "@tanstack/preact-store";
 
 //#region src/Subscribe.ts
-/**
-* A Preact 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.
-*
-* @example
-* ```tsx
-* // As a standalone component
-* <Subscribe table={table} selector={(state) => ({ rowSelection: state.rowSelection })}>
-*   {({ rowSelection }) => (
-*     <div>Selected rows: {Object.keys(rowSelection).length}</div>
-*   )}
-* </Subscribe>
-* ```
-*
-* @example
-* ```tsx
-* // As table.Subscribe (table instance method)
-* <table.Subscribe selector={(state) => ({ rowSelection: state.rowSelection })}>
-*   {({ rowSelection }) => (
-*     <div>Selected rows: {Object.keys(rowSelection).length}</div>
-*   )}
-* </table.Subscribe>
-* ```
-*/
 function Subscribe(props) {
-	const selected = useStore(props.table.store, props.selector);
+	const selected = useSelector("atom" in props ? props.atom : props.table.store, "atom" 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":["import { useStore } from '@tanstack/preact-store'\nimport type {\n  NoInfer,\n  RowData,\n  Table,\n  TableFeatures,\n  TableState,\n} from '@tanstack/table-core'\nimport type { ComponentChildren } from 'preact'\n\nexport type SubscribeProps<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TSelected = {},\n> = {\n  /**\n   * The table instance to subscribe to. Required when using as a standalone component.\n   * Not needed when using as `table.Subscribe`.\n   */\n  table: Table<TFeatures, TData>\n  /**\n   * A selector function that selects the part of the table state to subscribe to.\n   * This allows for fine-grained reactivity by only re-rendering when the selected state changes.\n   */\n  selector: (state: NoInfer<TableState<TFeatures>>) => TSelected\n  /**\n   * The children to render. Can be a function that receives the selected state, or a Preact node.\n   */\n  children: ((state: TSelected) => ComponentChildren) | ComponentChildren\n}\n\n/**\n * A Preact 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 * @example\n * ```tsx\n * // As a standalone component\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 * // 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  TSelected = {},\n>(props: SubscribeProps<TFeatures, TData, TSelected>): ComponentChildren {\n  const selected = useStore(props.table.store, props.selector)\n\n  return typeof props.children === 'function'\n    ? props.children(selected)\n    : props.children\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwDA,SAAgB,UAId,OAAuE;CACvE,MAAM,WAAW,SAAS,MAAM,MAAM,OAAO,MAAM,SAAS;AAE5D,QAAO,OAAO,MAAM,aAAa,aAC7B,MAAM,SAAS,SAAS,GACxB,MAAM"}
+{"version":3,"file":"Subscribe.js","names":[],"sources":["../src/Subscribe.ts"],"sourcesContent":["import { shallow, useSelector } from '@tanstack/preact-store'\nimport type { Atom, ReadonlyAtom } from '@tanstack/preact-store'\nimport type {\n  RowData,\n  Table,\n  TableFeatures,\n  TableState,\n} from '@tanstack/table-core'\nimport type { ComponentChildren } from 'preact'\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) => ComponentChildren) | ComponentChildren\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) => ComponentChildren) | ComponentChildren\n}\n\n/**\n * Subscribe to a projected value from a slice atom.\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) => ComponentChildren) | ComponentChildren\n}\n\n/**\n * Subscribe to a single slice atom (identity or projected).\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 Preact component that allows you to subscribe to the table state.\n *\n * For `table.Subscribe` from `useTable`, prefer that API — it uses overloads so\n * JSX contextual typing works. This standalone component uses a union `props` type.\n */\nexport function Subscribe<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TAtomValue,\n>(\n  props: SubscribePropsWithAtomIdentity<TFeatures, TData, TAtomValue>,\n): ComponentChildren\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): ComponentChildren\nexport function Subscribe<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TSelected,\n>(\n  props: SubscribePropsWithStore<TFeatures, TData, TSelected>,\n): ComponentChildren\nexport function Subscribe<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TSelected,\n  TAtomValue,\n>(\n  props: SubscribeProps<TFeatures, TData, TSelected, TAtomValue>,\n): ComponentChildren {\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    source as never,\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) => ComponentChildren)(selected)\n    : props.children\n}\n"],"mappings":";;;AAqHA,SAAgB,UAMd,OACmB;CAKnB,MAAM,WAAW,YAJF,UAAU,QAAQ,MAAM,OAAO,MAAM,MAAM,OAExD,UAAU,QAAS,MAAM,cAAc,MAAe,KAAM,MAAM,UAKlE,EACE,SAAS,SACV,CACF;AAED,QAAO,OAAO,MAAM,aAAa,aAC5B,MAAM,SAAqD,SAAS,GACrE,MAAM"}

package/dist/index.d.cts

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

package/dist/index.d.ts

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

package/dist/static-functions.cjs

@@ -0,0 +1,9 @@
+
+
+var _tanstack_table_core_static_functions = require("@tanstack/table-core/static-functions");
+Object.keys(_tanstack_table_core_static_functions).forEach(function (k) {
+  if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+    enumerable: true,
+    get: function () { return _tanstack_table_core_static_functions[k]; }
+  });
+});

package/dist/static-functions.d.cts

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

package/dist/static-functions.d.ts

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

package/dist/static-functions.js

@@ -0,0 +1,3 @@
+export * from "@tanstack/table-core/static-functions"
+
+export {  };

package/dist/useTable.cjs

@@ -8,12 +8,12 @@ let preact_hooks = require("preact/hooks");
 function useTable(tableOptions, selector = () => ({})) {
 	const [table] = (0, preact_hooks.useState)(() => {
 		const tableInstance = (0, _tanstack_table_core.constructTable)(tableOptions);
-		tableInstance.Subscribe = function SubscribeBound(props) {
+		tableInstance.Subscribe = ((props) => {
 			return require_Subscribe.Subscribe({
 				...props,
 				table: tableInstance
 			});
-		};
+		});
 		tableInstance.FlexRender = require_FlexRender.FlexRender;
 		return tableInstance;
 	});
@@ -26,7 +26,7 @@ function useTable(tableOptions, selector = () => ({})) {
 		data: tableOptions.data,
 		...selector(state)
 	});
-	const state = (0, _tanstack_preact_store.useStore)(table.store, selectorWithDataAndColumns, { equal: _tanstack_preact_store.shallow });
+	const state = (0, _tanstack_preact_store.useSelector)(table.store, selectorWithDataAndColumns, { compare: _tanstack_preact_store.shallow });
 	return (0, preact_hooks.useMemo)(() => ({
 		...table,
 		state

package/dist/useTable.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useTable.cjs","names":["Subscribe","FlexRender","shallow"],"sources":["../src/useTable.ts"],"sourcesContent":["import { useMemo, useState } from 'preact/hooks'\nimport { constructTable } from '@tanstack/table-core'\nimport { shallow, useStore } from '@tanstack/preact-store'\nimport { FlexRender } from './FlexRender'\nimport { Subscribe } from './Subscribe'\nimport type {\n  CellData,\n  NoInfer,\n  RowData,\n  Table,\n  TableFeatures,\n  TableOptions,\n  TableState,\n} from '@tanstack/table-core'\nimport type { ComponentChildren } from 'preact'\nimport type { FlexRenderProps } from './FlexRender'\nimport type { SubscribeProps } from './Subscribe'\n\nexport type PreactTable<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TSelected = {},\n> = Table<TFeatures, TData> & {\n  /**\n   * A Preact 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   * @example\n   * <table.Subscribe selector={(state) => ({ rowSelection: state.rowSelection })}>\n   *   {({ rowSelection }) => ( // important to include `{() => {()}}` syntax\n   *     <tr key={row.id}>\n   *       // render the row\n   *     </tr>\n   *   )}\n   * </table.Subscribe>\n   */\n  Subscribe: <TSelected>(props: {\n    selector: (state: NoInfer<TableState<TFeatures>>) => TSelected\n    children: ((state: TSelected) => ComponentChildren) | ComponentChildren\n  }) => ComponentChildren\n  /**\n   * A Preact 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  ) => ComponentChildren\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): PreactTable<TFeatures, TData, TSelected> {\n  const [table] = useState(() => {\n    const tableInstance = constructTable(tableOptions) as PreactTable<\n      TFeatures,\n      TData,\n      TSelected\n    >\n\n    tableInstance.Subscribe = function SubscribeBound<TSelected>(\n      props: Omit<SubscribeProps<TFeatures, TData, TSelected>, 'table'>,\n    ) {\n      return Subscribe({ ...props, table: tableInstance })\n    }\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 = useStore(table.store, selectorWithDataAndColumns, {\n    equal: shallow,\n  })\n\n  return useMemo(\n    () => ({\n      ...table,\n      state,\n    }),\n    [state, table],\n  ) as PreactTable<TFeatures, TData, TSelected>\n}\n"],"mappings":";;;;;;;AA4EA,SAAgB,SAKd,cACA,kBACG,EAAE,GACqC;CAC1C,MAAM,CAAC,0CAAwB;EAC7B,MAAM,yDAA+B,aAAa;AAMlD,gBAAc,YAAY,SAAS,eACjC,OACA;AACA,UAAOA,4BAAU;IAAE,GAAG;IAAO,OAAO;IAAe,CAAC;;AAGtD,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,6CAAiB,MAAM,OAAO,4BAA4B,EAC9D,OAAOC,gCACR,CAAC;AAEF,yCACS;EACL,GAAG;EACH;EACD,GACD,CAAC,OAAO,MAAM,CACf"}
+{"version":3,"file":"useTable.cjs","names":["Subscribe","FlexRender","shallow"],"sources":["../src/useTable.ts"],"sourcesContent":["import { useMemo, useState } from 'preact/hooks'\nimport { constructTable } from '@tanstack/table-core'\nimport { shallow, useSelector } from '@tanstack/preact-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/preact-store'\nimport type { ComponentChildren } from 'preact'\nimport type { FlexRenderProps } from './FlexRender'\nimport type { SubscribePropsWithStore } from './Subscribe'\n\nexport type PreactTable<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TSelected = {},\n> = Table<TFeatures, TData> & {\n  /**\n   * A Preact HOC (Higher Order Component) that allows you to subscribe to 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 (atom first, then store) so JSX contextual typing works for both modes.\n   * Atom without `selector` is separate so children infer `TAtomValue` (identity projection).\n   */\n  Subscribe: {\n    <TAtomValue>(props: {\n      atom: Atom<TAtomValue> | ReadonlyAtom<TAtomValue>\n      selector?: undefined\n      children: ((state: TAtomValue) => ComponentChildren) | ComponentChildren\n    }): ComponentChildren\n    <TAtomValue, TSubSelected>(props: {\n      atom: Atom<TAtomValue> | ReadonlyAtom<TAtomValue>\n      selector: (state: TAtomValue) => TSubSelected\n      children: ((state: TSubSelected) => ComponentChildren) | ComponentChildren\n    }): ComponentChildren\n    <TSubSelected>(\n      props: Omit<\n        SubscribePropsWithStore<TFeatures, TData, TSubSelected>,\n        'table'\n      >,\n    ): ComponentChildren\n  }\n  /**\n   * A Preact component that renders headers, cells, or footers with custom markup.\n   * Use this utility component instead of manually calling flexRender.\n   */\n  FlexRender: <TValue extends CellData = CellData>(\n    props: FlexRenderProps<TFeatures, TData, TValue>,\n  ) => ComponentChildren\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  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): PreactTable<TFeatures, TData, TSelected> {\n  const [table] = useState(() => {\n    const tableInstance = constructTable(tableOptions) as PreactTable<\n      TFeatures,\n      TData,\n      TSelected\n    >\n\n    tableInstance.Subscribe = ((props: any) => {\n      return Subscribe({\n        ...props,\n        table: tableInstance,\n      })\n    }) as PreactTable<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 PreactTable<TFeatures, TData, TSelected>\n}\n"],"mappings":";;;;;;;AAmFA,SAAgB,SAKd,cACA,kBACG,EAAE,GACqC;CAC1C,MAAM,CAAC,0CAAwB;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,gDAAoB,MAAM,OAAO,4BAA4B,EACjE,SAASC,gCACV,CAAC;AAEF,yCACS;EACL,GAAG;EACH;EACD,GACD,CAAC,OAAO,MAAM,CACf"}

package/dist/useTable.d.cts

@@ -1,53 +1,57 @@
 import { FlexRenderProps } from "./FlexRender.cjs";
-import { CellData, NoInfer, RowData, Table, TableFeatures, TableOptions, TableState } from "@tanstack/table-core";
+import { SubscribePropsWithStore } from "./Subscribe.cjs";
+import { CellData, RowData, Table, TableFeatures, TableOptions, TableState } from "@tanstack/table-core";
 import { ComponentChildren } from "preact";
+import { Atom, ReadonlyAtom } from "@tanstack/preact-store";
 
 //#region src/useTable.d.ts
 type PreactTable<TFeatures extends TableFeatures, TData extends RowData, TSelected = {}> = Table<TFeatures, TData> & {
   /**
    * A Preact HOC (Higher Order 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.
+   * Pass `atom` to subscribe to a single slice atom instead of the full `table.store`.
    *
    * @example
    * <table.Subscribe selector={(state) => ({ rowSelection: state.rowSelection })}>
-   *   {({ rowSelection }) => ( // important to include `{() => {()}}` syntax
-   *     <tr key={row.id}>
-   *       // render the row
-   *     </tr>
+   *   {({ rowSelection }) => (
+   *     <tr key={row.id}>...</tr>
    *   )}
    * </table.Subscribe>
+   *
+   * @example
+   * <table.Subscribe atom={table.atoms.rowSelection}>
+   *   {(rowSelection) => <div>...</div>}
+   * </table.Subscribe>
+   *
+   * @example
+   * <table.Subscribe atom={table.atoms.rowSelection} selector={(s) => s?.[row.id]}>
+   *   {() => <tr key={row.id}>...</tr>}
+   * </table.Subscribe>
    */
-  Subscribe: <TSelected>(props: {
-    selector: (state: NoInfer<TableState<TFeatures>>) => TSelected;
-    children: ((state: TSelected) => ComponentChildren) | ComponentChildren;
-  }) => ComponentChildren;
+  /**
+   * Overloads (atom first, then store) so JSX contextual typing works for both modes.
+   * Atom without `selector` is separate so children infer `TAtomValue` (identity projection).
+   */
+  Subscribe: {
+    <TAtomValue>(props: {
+      atom: Atom<TAtomValue> | ReadonlyAtom<TAtomValue>;
+      selector?: undefined;
+      children: ((state: TAtomValue) => ComponentChildren) | ComponentChildren;
+    }): ComponentChildren;
+    <TAtomValue, TSubSelected>(props: {
+      atom: Atom<TAtomValue> | ReadonlyAtom<TAtomValue>;
+      selector: (state: TAtomValue) => TSubSelected;
+      children: ((state: TSubSelected) => ComponentChildren) | ComponentChildren;
+    }): ComponentChildren;
+    <TSubSelected>(props: Omit<SubscribePropsWithStore<TFeatures, TData, TSubSelected>, 'table'>): ComponentChildren;
+  };
   /**
    * A Preact component that renders headers, cells, or footers with custom markup.
    * Use this utility component instead of manually calling flexRender.
-   *
-   * @example
-   * ```tsx
-   * <table.FlexRender cell={cell} />
-   * <table.FlexRender header={header} />
-   * <table.FlexRender footer={footer} />
-   * ```
-   *
-   * This replaces calling `flexRender` directly like this:
-   * ```tsx
-   * flexRender(cell.column.columnDef.cell, cell.getContext())
-   * flexRender(header.column.columnDef.header, header.getContext())
-   * flexRender(footer.column.columnDef.footer, footer.getContext())
-   * ```
    */
   FlexRender: <TValue extends CellData = CellData>(props: FlexRenderProps<TFeatures, TData, TValue>) => ComponentChildren;
   /**
    * 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`.
-   *
-   * @example
-   * const table = useTable(options, (state) => ({ globalFilter: state.globalFilter })) // only globalFilter is part of the selected state
-   *
-   * console.log(table.state.globalFilter)
    */
   readonly state: Readonly<TSelected> & {
     columns: TableOptions<TFeatures, TData>['columns'];

package/dist/useTable.d.ts

@@ -1,5 +1,7 @@
 import { FlexRenderProps } from "./FlexRender.js";
-import { CellData, NoInfer, RowData, Table, TableFeatures, TableOptions, TableState } from "@tanstack/table-core";
+import { SubscribePropsWithStore } from "./Subscribe.js";
+import { CellData, RowData, Table, TableFeatures, TableOptions, TableState } from "@tanstack/table-core";
+import { Atom, ReadonlyAtom } from "@tanstack/preact-store";
 import { ComponentChildren } from "preact";
 
 //#region src/useTable.d.ts
@@ -7,47 +9,49 @@ type PreactTable<TFeatures extends TableFeatures, TData extends RowData, TSelect
   /**
    * A Preact HOC (Higher Order 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.
+   * Pass `atom` to subscribe to a single slice atom instead of the full `table.store`.
    *
    * @example
    * <table.Subscribe selector={(state) => ({ rowSelection: state.rowSelection })}>
-   *   {({ rowSelection }) => ( // important to include `{() => {()}}` syntax
-   *     <tr key={row.id}>
-   *       // render the row
-   *     </tr>
+   *   {({ rowSelection }) => (
+   *     <tr key={row.id}>...</tr>
    *   )}
    * </table.Subscribe>
+   *
+   * @example
+   * <table.Subscribe atom={table.atoms.rowSelection}>
+   *   {(rowSelection) => <div>...</div>}
+   * </table.Subscribe>
+   *
+   * @example
+   * <table.Subscribe atom={table.atoms.rowSelection} selector={(s) => s?.[row.id]}>
+   *   {() => <tr key={row.id}>...</tr>}
+   * </table.Subscribe>
    */
-  Subscribe: <TSelected>(props: {
-    selector: (state: NoInfer<TableState<TFeatures>>) => TSelected;
-    children: ((state: TSelected) => ComponentChildren) | ComponentChildren;
-  }) => ComponentChildren;
+  /**
+   * Overloads (atom first, then store) so JSX contextual typing works for both modes.
+   * Atom without `selector` is separate so children infer `TAtomValue` (identity projection).
+   */
+  Subscribe: {
+    <TAtomValue>(props: {
+      atom: Atom<TAtomValue> | ReadonlyAtom<TAtomValue>;
+      selector?: undefined;
+      children: ((state: TAtomValue) => ComponentChildren) | ComponentChildren;
+    }): ComponentChildren;
+    <TAtomValue, TSubSelected>(props: {
+      atom: Atom<TAtomValue> | ReadonlyAtom<TAtomValue>;
+      selector: (state: TAtomValue) => TSubSelected;
+      children: ((state: TSubSelected) => ComponentChildren) | ComponentChildren;
+    }): ComponentChildren;
+    <TSubSelected>(props: Omit<SubscribePropsWithStore<TFeatures, TData, TSubSelected>, 'table'>): ComponentChildren;
+  };
   /**
    * A Preact component that renders headers, cells, or footers with custom markup.
    * Use this utility component instead of manually calling flexRender.
-   *
-   * @example
-   * ```tsx
-   * <table.FlexRender cell={cell} />
-   * <table.FlexRender header={header} />
-   * <table.FlexRender footer={footer} />
-   * ```
-   *
-   * This replaces calling `flexRender` directly like this:
-   * ```tsx
-   * flexRender(cell.column.columnDef.cell, cell.getContext())
-   * flexRender(header.column.columnDef.header, header.getContext())
-   * flexRender(footer.column.columnDef.footer, footer.getContext())
-   * ```
    */
   FlexRender: <TValue extends CellData = CellData>(props: FlexRenderProps<TFeatures, TData, TValue>) => ComponentChildren;
   /**
    * 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`.
-   *
-   * @example
-   * const table = useTable(options, (state) => ({ globalFilter: state.globalFilter })) // only globalFilter is part of the selected state
-   *
-   * console.log(table.state.globalFilter)
    */
   readonly state: Readonly<TSelected> & {
     columns: TableOptions<TFeatures, TData>['columns'];

package/dist/useTable.js

@@ -1,19 +1,19 @@
 import { FlexRender } from "./FlexRender.js";
 import { Subscribe } from "./Subscribe.js";
 import { constructTable } from "@tanstack/table-core";
-import { shallow, useStore } from "@tanstack/preact-store";
+import { shallow, useSelector } from "@tanstack/preact-store";
 import { useMemo, useState } from "preact/hooks";
 
 //#region src/useTable.ts
 function useTable(tableOptions, selector = () => ({})) {
 	const [table] = useState(() => {
 		const tableInstance = constructTable(tableOptions);
-		tableInstance.Subscribe = function SubscribeBound(props) {
+		tableInstance.Subscribe = ((props) => {
 			return Subscribe({
 				...props,
 				table: tableInstance
 			});
-		};
+		});
 		tableInstance.FlexRender = FlexRender;
 		return tableInstance;
 	});
@@ -26,7 +26,7 @@ function useTable(tableOptions, selector = () => ({})) {
 		data: tableOptions.data,
 		...selector(state)
 	});
-	const state = useStore(table.store, selectorWithDataAndColumns, { equal: shallow });
+	const state = useSelector(table.store, selectorWithDataAndColumns, { compare: shallow });
 	return useMemo(() => ({
 		...table,
 		state

package/dist/useTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"useTable.js","names":[],"sources":["../src/useTable.ts"],"sourcesContent":["import { useMemo, useState } from 'preact/hooks'\nimport { constructTable } from '@tanstack/table-core'\nimport { shallow, useStore } from '@tanstack/preact-store'\nimport { FlexRender } from './FlexRender'\nimport { Subscribe } from './Subscribe'\nimport type {\n  CellData,\n  NoInfer,\n  RowData,\n  Table,\n  TableFeatures,\n  TableOptions,\n  TableState,\n} from '@tanstack/table-core'\nimport type { ComponentChildren } from 'preact'\nimport type { FlexRenderProps } from './FlexRender'\nimport type { SubscribeProps } from './Subscribe'\n\nexport type PreactTable<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TSelected = {},\n> = Table<TFeatures, TData> & {\n  /**\n   * A Preact 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   * @example\n   * <table.Subscribe selector={(state) => ({ rowSelection: state.rowSelection })}>\n   *   {({ rowSelection }) => ( // important to include `{() => {()}}` syntax\n   *     <tr key={row.id}>\n   *       // render the row\n   *     </tr>\n   *   )}\n   * </table.Subscribe>\n   */\n  Subscribe: <TSelected>(props: {\n    selector: (state: NoInfer<TableState<TFeatures>>) => TSelected\n    children: ((state: TSelected) => ComponentChildren) | ComponentChildren\n  }) => ComponentChildren\n  /**\n   * A Preact 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  ) => ComponentChildren\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): PreactTable<TFeatures, TData, TSelected> {\n  const [table] = useState(() => {\n    const tableInstance = constructTable(tableOptions) as PreactTable<\n      TFeatures,\n      TData,\n      TSelected\n    >\n\n    tableInstance.Subscribe = function SubscribeBound<TSelected>(\n      props: Omit<SubscribeProps<TFeatures, TData, TSelected>, 'table'>,\n    ) {\n      return Subscribe({ ...props, table: tableInstance })\n    }\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 = useStore(table.store, selectorWithDataAndColumns, {\n    equal: shallow,\n  })\n\n  return useMemo(\n    () => ({\n      ...table,\n      state,\n    }),\n    [state, table],\n  ) as PreactTable<TFeatures, TData, TSelected>\n}\n"],"mappings":";;;;;;;AA4EA,SAAgB,SAKd,cACA,kBACG,EAAE,GACqC;CAC1C,MAAM,CAAC,SAAS,eAAe;EAC7B,MAAM,gBAAgB,eAAe,aAAa;AAMlD,gBAAc,YAAY,SAAS,eACjC,OACA;AACA,UAAO,UAAU;IAAE,GAAG;IAAO,OAAO;IAAe,CAAC;;AAGtD,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,SAAS,MAAM,OAAO,4BAA4B,EAC9D,OAAO,SACR,CAAC;AAEF,QAAO,eACE;EACL,GAAG;EACH;EACD,GACD,CAAC,OAAO,MAAM,CACf"}
+{"version":3,"file":"useTable.js","names":[],"sources":["../src/useTable.ts"],"sourcesContent":["import { useMemo, useState } from 'preact/hooks'\nimport { constructTable } from '@tanstack/table-core'\nimport { shallow, useSelector } from '@tanstack/preact-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/preact-store'\nimport type { ComponentChildren } from 'preact'\nimport type { FlexRenderProps } from './FlexRender'\nimport type { SubscribePropsWithStore } from './Subscribe'\n\nexport type PreactTable<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TSelected = {},\n> = Table<TFeatures, TData> & {\n  /**\n   * A Preact HOC (Higher Order Component) that allows you to subscribe to 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 (atom first, then store) so JSX contextual typing works for both modes.\n   * Atom without `selector` is separate so children infer `TAtomValue` (identity projection).\n   */\n  Subscribe: {\n    <TAtomValue>(props: {\n      atom: Atom<TAtomValue> | ReadonlyAtom<TAtomValue>\n      selector?: undefined\n      children: ((state: TAtomValue) => ComponentChildren) | ComponentChildren\n    }): ComponentChildren\n    <TAtomValue, TSubSelected>(props: {\n      atom: Atom<TAtomValue> | ReadonlyAtom<TAtomValue>\n      selector: (state: TAtomValue) => TSubSelected\n      children: ((state: TSubSelected) => ComponentChildren) | ComponentChildren\n    }): ComponentChildren\n    <TSubSelected>(\n      props: Omit<\n        SubscribePropsWithStore<TFeatures, TData, TSubSelected>,\n        'table'\n      >,\n    ): ComponentChildren\n  }\n  /**\n   * A Preact component that renders headers, cells, or footers with custom markup.\n   * Use this utility component instead of manually calling flexRender.\n   */\n  FlexRender: <TValue extends CellData = CellData>(\n    props: FlexRenderProps<TFeatures, TData, TValue>,\n  ) => ComponentChildren\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  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): PreactTable<TFeatures, TData, TSelected> {\n  const [table] = useState(() => {\n    const tableInstance = constructTable(tableOptions) as PreactTable<\n      TFeatures,\n      TData,\n      TSelected\n    >\n\n    tableInstance.Subscribe = ((props: any) => {\n      return Subscribe({\n        ...props,\n        table: tableInstance,\n      })\n    }) as PreactTable<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 PreactTable<TFeatures, TData, TSelected>\n}\n"],"mappings":";;;;;;;AAmFA,SAAgB,SAKd,cACA,kBACG,EAAE,GACqC;CAC1C,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/preact-table",
-  "version": "9.0.0-alpha.32",
+  "version": "9.0.0-alpha.34",
   "description": "Headless UI for building powerful tables & datagrids for Preact.",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -29,6 +29,10 @@
       "import": "./dist/index.js",
       "require": "./dist/index.cjs"
     },
+    "./static-functions": {
+      "import": "./dist/static-functions.js",
+      "require": "./dist/static-functions.cjs"
+    },
     "./package.json": "./package.json"
   },
   "sideEffects": false,
@@ -40,8 +44,8 @@
     "src"
   ],
   "dependencies": {
-    "@tanstack/preact-store": "^0.11.3",
-    "@tanstack/table-core": "9.0.0-alpha.32"
+    "@tanstack/preact-store": "^0.13.0",
+    "@tanstack/table-core": "9.0.0-alpha.34"
   },
   "devDependencies": {
     "@preact/preset-vite": "^2.10.5",

package/src/Subscribe.ts

@@ -1,6 +1,6 @@
-import { useStore } from '@tanstack/preact-store'
+import { shallow, useSelector } from '@tanstack/preact-store'
+import type { Atom, ReadonlyAtom } from '@tanstack/preact-store'
 import type {
-  NoInfer,
   RowData,
   Table,
   TableFeatures,
@@ -8,60 +8,134 @@ import type {
 } from '@tanstack/table-core'
 import type { ComponentChildren } from 'preact'
 
-export type SubscribeProps<
+/**
+ * Subscribe to `table.store` (full table state). The selector receives the full
+ * {@link TableState}.
+ */
+export type SubscribePropsWithStore<
   TFeatures extends TableFeatures,
   TData extends RowData,
-  TSelected = {},
+  TSelected,
 > = {
-  /**
-   * The table instance to subscribe to. Required when using as a standalone component.
-   * Not needed when using as `table.Subscribe`.
-   */
   table: Table<TFeatures, TData>
   /**
-   * A selector function that selects the part of the table state to subscribe to.
-   * This allows for fine-grained reactivity by only re-rendering when the selected state changes.
-   */
-  selector: (state: NoInfer<TableState<TFeatures>>) => TSelected
-  /**
-   * The children to render. Can be a function that receives the selected state, or a Preact node.
+   * Select from full table state. Re-renders when the selected value changes
+   * (shallow compare).
+   *
+   * Required in store mode so you never accidentally subscribe to the whole
+   * store without an explicit projection.
    */
+  selector: (state: TableState<TFeatures>) => TSelected
   children: ((state: TSelected) => ComponentChildren) | ComponentChildren
 }
 
+/**
+ * Subscribe to the full value of a slice atom (e.g. `table.atoms.rowSelection`).
+ * Omitting `selector` is equivalent to the identity selector — children receive
+ * `TAtomValue`.
+ */
+export type SubscribePropsWithAtomIdentity<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+  TAtomValue,
+> = {
+  table: Table<TFeatures, TData>
+  atom: Atom<TAtomValue> | ReadonlyAtom<TAtomValue>
+  selector?: undefined
+  children: ((state: TAtomValue) => ComponentChildren) | ComponentChildren
+}
+
+/**
+ * Subscribe to a projected value from a slice atom.
+ */
+export type SubscribePropsWithAtomWithSelector<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+  TAtomValue,
+  TSelected,
+> = {
+  table: Table<TFeatures, TData>
+  atom: Atom<TAtomValue> | ReadonlyAtom<TAtomValue>
+  selector: (state: TAtomValue) => TSelected
+  children: ((state: TSelected) => ComponentChildren) | ComponentChildren
+}
+
+/**
+ * Subscribe to a single slice atom (identity or projected).
+ */
+export type SubscribePropsWithAtom<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+  TAtomValue,
+  TSelected = TAtomValue,
+> =
+  | SubscribePropsWithAtomIdentity<TFeatures, TData, TAtomValue>
+  | SubscribePropsWithAtomWithSelector<TFeatures, TData, TAtomValue, TSelected>
+
+export type SubscribeProps<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+  TSelected = unknown,
+  TAtomValue = unknown,
+> =
+  | SubscribePropsWithStore<TFeatures, TData, TSelected>
+  | SubscribePropsWithAtomIdentity<TFeatures, TData, TAtomValue>
+  | SubscribePropsWithAtomWithSelector<TFeatures, TData, TAtomValue, TSelected>
+
 /**
  * A Preact 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.
- *
- * @example
- * ```tsx
- * // As a standalone component
- * <Subscribe table={table} selector={(state) => ({ rowSelection: state.rowSelection })}>
- *   {({ rowSelection }) => (
- *     <div>Selected rows: {Object.keys(rowSelection).length}</div>
- *   )}
- * </Subscribe>
- * ```
- *
- * @example
- * ```tsx
- * // As table.Subscribe (table instance method)
- * <table.Subscribe selector={(state) => ({ rowSelection: state.rowSelection })}>
- *   {({ rowSelection }) => (
- *     <div>Selected rows: {Object.keys(rowSelection).length}</div>
- *   )}
- * </table.Subscribe>
- * ```
+ * For `table.Subscribe` from `useTable`, prefer that API — it uses overloads so
+ * JSX contextual typing works. This standalone component uses a union `props` type.
  */
 export function Subscribe<
   TFeatures extends TableFeatures,
   TData extends RowData,
-  TSelected = {},
->(props: SubscribeProps<TFeatures, TData, TSelected>): ComponentChildren {
-  const selected = useStore(props.table.store, props.selector)
+  TAtomValue,
+>(
+  props: SubscribePropsWithAtomIdentity<TFeatures, TData, TAtomValue>,
+): ComponentChildren
+export function Subscribe<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+  TAtomValue,
+  TSelected,
+>(
+  props: SubscribePropsWithAtomWithSelector<
+    TFeatures,
+    TData,
+    TAtomValue,
+    TSelected
+  >,
+): ComponentChildren
+export function Subscribe<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+  TSelected,
+>(
+  props: SubscribePropsWithStore<TFeatures, TData, TSelected>,
+): ComponentChildren
+export function Subscribe<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+  TSelected,
+  TAtomValue,
+>(
+  props: SubscribeProps<TFeatures, TData, TSelected, TAtomValue>,
+): ComponentChildren {
+  const source = 'atom' in props ? props.atom : props.table.store
+  const selectFn =
+    'atom' in props ? (props.selector ?? ((x: unknown) => x)) : props.selector
+
+  const selected = useSelector(
+    source as never,
+    selectFn as Parameters<typeof useSelector>[1],
+    {
+      compare: shallow,
+    },
+  ) as TSelected
 
   return typeof props.children === 'function'
-    ? props.children(selected)
+    ? (props.children as (state: TSelected) => ComponentChildren)(selected)
     : props.children
 }

package/src/static-functions.ts

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

package/src/useTable.ts

@@ -1,20 +1,20 @@
 import { useMemo, useState } from 'preact/hooks'
 import { constructTable } from '@tanstack/table-core'
-import { shallow, useStore } from '@tanstack/preact-store'
+import { shallow, useSelector } from '@tanstack/preact-store'
 import { FlexRender } from './FlexRender'
 import { Subscribe } from './Subscribe'
 import type {
   CellData,
-  NoInfer,
   RowData,
   Table,
   TableFeatures,
   TableOptions,
   TableState,
 } from '@tanstack/table-core'
+import type { Atom, ReadonlyAtom } from '@tanstack/preact-store'
 import type { ComponentChildren } from 'preact'
 import type { FlexRenderProps } from './FlexRender'
-import type { SubscribeProps } from './Subscribe'
+import type { SubscribePropsWithStore } from './Subscribe'
 
 export type PreactTable<
   TFeatures extends TableFeatures,
@@ -24,49 +24,56 @@ export type PreactTable<
   /**
    * A Preact HOC (Higher Order 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.
+   * Pass `atom` to subscribe to a single slice atom instead of the full `table.store`.
    *
    * @example
    * <table.Subscribe selector={(state) => ({ rowSelection: state.rowSelection })}>
-   *   {({ rowSelection }) => ( // important to include `{() => {()}}` syntax
-   *     <tr key={row.id}>
-   *       // render the row
-   *     </tr>
+   *   {({ rowSelection }) => (
+   *     <tr key={row.id}>...</tr>
    *   )}
    * </table.Subscribe>
+   *
+   * @example
+   * <table.Subscribe atom={table.atoms.rowSelection}>
+   *   {(rowSelection) => <div>...</div>}
+   * </table.Subscribe>
+   *
+   * @example
+   * <table.Subscribe atom={table.atoms.rowSelection} selector={(s) => s?.[row.id]}>
+   *   {() => <tr key={row.id}>...</tr>}
+   * </table.Subscribe>
    */
-  Subscribe: <TSelected>(props: {
-    selector: (state: NoInfer<TableState<TFeatures>>) => TSelected
-    children: ((state: TSelected) => ComponentChildren) | ComponentChildren
-  }) => ComponentChildren
+  /**
+   * Overloads (atom first, then store) so JSX contextual typing works for both modes.
+   * Atom without `selector` is separate so children infer `TAtomValue` (identity projection).
+   */
+  Subscribe: {
+    <TAtomValue>(props: {
+      atom: Atom<TAtomValue> | ReadonlyAtom<TAtomValue>
+      selector?: undefined
+      children: ((state: TAtomValue) => ComponentChildren) | ComponentChildren
+    }): ComponentChildren
+    <TAtomValue, TSubSelected>(props: {
+      atom: Atom<TAtomValue> | ReadonlyAtom<TAtomValue>
+      selector: (state: TAtomValue) => TSubSelected
+      children: ((state: TSubSelected) => ComponentChildren) | ComponentChildren
+    }): ComponentChildren
+    <TSubSelected>(
+      props: Omit<
+        SubscribePropsWithStore<TFeatures, TData, TSubSelected>,
+        'table'
+      >,
+    ): ComponentChildren
+  }
   /**
    * A Preact component that renders headers, cells, or footers with custom markup.
    * Use this utility component instead of manually calling flexRender.
-   *
-   * @example
-   * ```tsx
-   * <table.FlexRender cell={cell} />
-   * <table.FlexRender header={header} />
-   * <table.FlexRender footer={footer} />
-   * ```
-   *
-   * This replaces calling `flexRender` directly like this:
-   * ```tsx
-   * flexRender(cell.column.columnDef.cell, cell.getContext())
-   * flexRender(header.column.columnDef.header, header.getContext())
-   * flexRender(footer.column.columnDef.footer, footer.getContext())
-   * ```
    */
   FlexRender: <TValue extends CellData = CellData>(
     props: FlexRenderProps<TFeatures, TData, TValue>,
   ) => ComponentChildren
   /**
    * 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`.
-   *
-   * @example
-   * const table = useTable(options, (state) => ({ globalFilter: state.globalFilter })) // only globalFilter is part of the selected state
-   *
-   * console.log(table.state.globalFilter)
    */
   readonly state: Readonly<TSelected> & {
     columns: TableOptions<TFeatures, TData>['columns']
@@ -90,11 +97,12 @@ export function useTable<
       TSelected
     >
 
-    tableInstance.Subscribe = function SubscribeBound<TSelected>(
-      props: Omit<SubscribeProps<TFeatures, TData, TSelected>, 'table'>,
-    ) {
-      return Subscribe({ ...props, table: tableInstance })
-    }
+    tableInstance.Subscribe = ((props: any) => {
+      return Subscribe({
+        ...props,
+        table: tableInstance,
+      })
+    }) as PreactTable<TFeatures, TData, TSelected>['Subscribe']
 
     tableInstance.FlexRender = FlexRender
 
@@ -113,8 +121,8 @@ export function useTable<
     ...selector(state),
   })
 
-  const state = useStore(table.store, selectorWithDataAndColumns, {
-    equal: shallow,
+  const state = useSelector(table.store, selectorWithDataAndColumns, {
+    compare: shallow,
   })
 
   return useMemo(