@tanstack/react-table 9.0.0-alpha.4 → 9.0.0-alpha.40

package/README.md

@@ -0,0 +1,117 @@
+<div align="center">
+  <img src="./media/header_table.png" alt="TanStack Table">
+</div>
+
+<br />
+
+<div align="center">
+<a href="https://npmjs.com/package/@tanstack/react-table" target="\_parent">
+  <img alt="npm downloads" src="https://img.shields.io/npm/dm/@tanstack/react-table.svg" />
+</a>
+<a href="https://github.com/tanstack/table" target="\_parent">
+  <img alt="github stars" src="https://img.shields.io/github/stars/tanstack/react-table.svg?style=social&label=Star" />
+</a>
+<a href="https://bundlephobia.com/result?p=@tanstack/react-table@latest" target="\_parent">
+  <img alt="bundle size" src="https://badgen.net/bundlephobia/minzip/@tanstack/react-table@latest" />
+</a>
+</div>
+
+<div align="center">
+<a href="#badge">
+  <img alt="semantic-release" src="https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg">
+</a>
+<a href="https://bestofjs.org/projects/tanstack-table"><img alt="Best of JS" src="https://img.shields.io/endpoint?url=https://bestofjs-serverless.now.sh/api/project-badge?fullName=TanStack%2Ftable%26since=daily" /></a>
+  <a href="https://twitter.com/tan_stack"><img src="https://img.shields.io/twitter/follow/tan_stack.svg?style=social" alt="Follow @TanStack"/></a>
+</div>
+
+### [Become a Sponsor!](https://github.com/sponsors/tannerlinsley/)
+
+</div>
+
+# TanStack Table
+
+> [!NOTE]
+> You may know TanStack Table by the adapter names:
+>
+> - [Angular Table](https://tanstack.com/table/alpha/docs/framework/angular/angular-table)
+> - [Lit Table](https://tanstack.com/table/alpha/docs/framework/lit/lit-table)
+> - [React Table](https://tanstack.com/table/alpha/docs/framework/react/react-table)
+> - [Solid Table](https://tanstack.com/table/alpha/docs/framework/solid/solid-table)
+> - [Svelte Table](https://tanstack.com/table/alpha/docs/framework/svelte/svelte-table)
+> - [Vue Table](https://tanstack.com/table/alpha/docs/framework/vue/vue-table)
+
+A headless table library for building powerful datagrids with full control over markup, styles, and behavior.
+
+- Framework‑agnostic core with bindings for React, Vue & Solid
+- 100% customizable — bring your own UI, components, and styles
+- Sorting, filtering, grouping, aggregation & row selection
+- Lightweight, virtualizable & server‑side friendly
+
+### <a href="https://tanstack.com/table">Read the Docs →</a>
+
+## Get Involved
+
+- We welcome issues and pull requests!
+- Participate in [GitHub discussions](https://github.com/TanStack/table/discussions)
+- Chat with the community on [Discord](https://discord.com/invite/WrRKjPJ)
+- See [CONTRIBUTING.md](./CONTRIBUTING.md) for setup instructions
+
+## Partners
+
+<table align="center">
+  <tr>
+    <td>
+        <a href="https://www.coderabbit.ai/?via=tanstack&dub_id=aCcEEdAOqqutX6OS">
+			<picture>
+			  <source media="(prefers-color-scheme: dark)" srcset="https://tanstack.com/assets/coderabbit-dark-CMcuvjEy.svg" height="40" />
+			  <source media="(prefers-color-scheme: light)" srcset="https://tanstack.com/assets/coderabbit-light-DVMJ2jHi.svg" height="40" />
+			  <img src="https://tanstack.com/assets/coderabbit-light-DVMJ2jHi.svg" height="40" alt="CodeRabbit" />
+			</picture>        
+		</a>
+    </td>
+    <td padding="20">
+      <a href="https://www.cloudflare.com?utm_source=tanstack">
+         <picture>
+		  <source media="(prefers-color-scheme: dark)" srcset="https://tanstack.com/assets/cloudflare-white-DQDB7UaL.svg" height="60" />
+		  <source media="(prefers-color-scheme: light)" srcset="https://tanstack.com/assets/cloudflare-black-CPufaW0B.svg" height="60" />
+		  <img src="https://tanstack.com/assets/cloudflare-black-CPufaW0B.svg" height="60" alt="Cloudflare" />
+		</picture>
+      </a>
+    </td>
+    <td>
+     <a href="https://ag-grid.com/react-data-grid/?utm_source=reacttable&utm_campaign=githubreacttable" style="display: flex; align-items: center; border: none;">
+       <picture>
+        <source media="(prefers-color-scheme: dark)" srcset="./media/ag-grid-dark.svg" height="40" />
+        <source media="(prefers-color-scheme: light)" srcset="./media/ag-grid-light.svg" height="40" />
+        <img src="https://raw.githubusercontent.com/tannerlinsley/files/master/partners/ag-grid.svg" height="60" alt="AG Grid" />
+      </picture>
+      </a>
+    </td>
+  </tr>
+</table>
+
+<div align="center">
+<img src="./media/partner_logo.svg" alt="Table & you?" height="65">
+<p>
+We're looking for TanStack Table Partners to join our mission! Partner with us to push the boundaries of TanStack Table and build amazing things together.
+</p>
+<a href="mailto:partners@tanstack.com?subject=TanStack Table Partnership"><b>LET'S CHAT</b></a>
+</div>
+
+## Explore the TanStack Ecosystem
+
+- <a href="https://github.com/tanstack/config"><b>TanStack Config</b></a> – Tooling for JS/TS packages
+- <a href="https://github.com/tanstack/db"><b>TanStack DB</b></a> – Reactive sync client store
+- <a href="https://github.com/tanstack/devtools"><b>TanStack DevTools</b></a> – Unified devtools panel
+- <a href="https://github.com/tanstack/form"><b>TanStack Form</b></a> – Type‑safe form state
+- <a href="https://github.com/tanstack/pacer"><b>TanStack Pacer</b></a> – Debouncing, throttling, batching <br/>
+- <a href="https://github.com/tanstack/query"><b>TanStack Query</b></a> – Async state & caching
+- <a href="https://github.com/tanstack/ranger"><b>TanStack Ranger</b></a> – Range & slider primitives
+- <a href="https://github.com/tanstack/router"><b>TanStack Router</b></a> – Type‑safe routing, caching & URL state
+- <a href="https://github.com/tanstack/router"><b>TanStack Start</b></a> – Full‑stack SSR & streaming
+- <a href="https://github.com/tanstack/store"><b>TanStack Store</b></a> – Reactive data store
+- <a href="https://github.com/tanstack/virtual"><b>TanStack Virtual</b></a> – Virtualized rendering
+
+… and more at <a href="https://tanstack.com"><b>TanStack.com »</b></a>
+
+<!-- USE THE FORCE LUKE -->

package/dist/FlexRender.cjs

@@ -0,0 +1,61 @@
+const require_runtime = require('./_virtual/_rolldown/runtime.cjs');
+let react = require("react");
+react = require_runtime.__toESM(react);
+
+//#region src/FlexRender.tsx
+function isReactComponent(component) {
+	return isClassComponent(component) || typeof component === "function" || isExoticComponent(component);
+}
+function isClassComponent(component) {
+	return typeof component === "function" && (() => {
+		const proto = Object.getPrototypeOf(component);
+		return proto.prototype && proto.prototype.isReactComponent;
+	})();
+}
+function isExoticComponent(component) {
+	return typeof component === "object" && typeof component.$$typeof === "symbol" && ["react.memo", "react.forward_ref"].includes(component.$$typeof.description);
+}
+/**
+* If rendering headers, cells, or footers with custom markup, use flexRender instead of `cell.getValue()` or `cell.renderValue()`.
+* @example flexRender(cell.column.columnDef.cell, cell.getContext())
+*/
+function flexRender(Comp, props) {
+	return !Comp ? null : isReactComponent(Comp) ? /* @__PURE__ */ react.default.createElement(Comp, props) : Comp;
+}
+/**
+* Simplified component wrapper of `flexRender`. Use this utility component to render headers, cells, or footers with custom markup.
+* Only one prop (`cell`, `header`, or `footer`) may be passed.
+* @example
+* ```tsx
+* <FlexRender cell={cell} />
+* <FlexRender header={header} />
+* <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())
+* ```
+*/
+function FlexRender(props) {
+	if ("cell" in props && props.cell) {
+		var _groupingCell$getIsAg, _groupingCell$getIsPl;
+		const cell = props.cell;
+		const def = cell.column.columnDef;
+		const groupingCell = cell;
+		const groupingDef = def;
+		if ((_groupingCell$getIsAg = groupingCell.getIsAggregated) === null || _groupingCell$getIsAg === void 0 ? void 0 : _groupingCell$getIsAg.call(groupingCell)) return flexRender(groupingDef.aggregatedCell ?? def.cell, cell.getContext());
+		if ((_groupingCell$getIsPl = groupingCell.getIsPlaceholder) === null || _groupingCell$getIsPl === void 0 ? void 0 : _groupingCell$getIsPl.call(groupingCell)) return null;
+		return flexRender(def.cell, cell.getContext());
+	}
+	if ("header" in props && props.header) return flexRender(props.header.column.columnDef.header, props.header.getContext());
+	if ("footer" in props && props.footer) return flexRender(props.footer.column.columnDef.footer, props.footer.getContext());
+	return null;
+}
+
+//#endregion
+exports.FlexRender = FlexRender;
+exports.flexRender = flexRender;
+//# sourceMappingURL=FlexRender.cjs.map

package/dist/FlexRender.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FlexRender.cjs","names":[],"sources":["../src/FlexRender.tsx"],"sourcesContent":["import React from 'react'\nimport type {\n  Cell,\n  CellData,\n  Header,\n  RowData,\n  TableFeatures,\n} from '@tanstack/table-core'\nimport type { ComponentType, JSX, ReactNode } from 'react'\n\nexport type Renderable<TProps> = ReactNode | ComponentType<TProps>\n\nfunction isReactComponent<TProps>(\n  component: unknown,\n): component is ComponentType<TProps> {\n  return (\n    isClassComponent(component) ||\n    typeof component === 'function' ||\n    isExoticComponent(component)\n  )\n}\n\nfunction isClassComponent(component: any) {\n  return (\n    typeof component === 'function' &&\n    (() => {\n      const proto = Object.getPrototypeOf(component)\n      return proto.prototype && proto.prototype.isReactComponent\n    })()\n  )\n}\n\nfunction isExoticComponent(component: any) {\n  return (\n    typeof component === 'object' &&\n    typeof component.$$typeof === 'symbol' &&\n    ['react.memo', 'react.forward_ref'].includes(component.$$typeof.description)\n  )\n}\n\n/**\n * If rendering headers, cells, or footers with custom markup, use flexRender instead of `cell.getValue()` or `cell.renderValue()`.\n * @example flexRender(cell.column.columnDef.cell, cell.getContext())\n */\nexport function flexRender<TProps extends object>(\n  Comp: Renderable<TProps>,\n  props: TProps,\n): ReactNode | JSX.Element {\n  return !Comp ? null : isReactComponent<TProps>(Comp) ? (\n    <Comp {...props} />\n  ) : (\n    Comp\n  )\n}\n\n/**\n * Simplified component wrapper of `flexRender`. Use this utility component to render headers, cells, or footers with custom markup.\n * Only one prop (`cell`, `header`, or `footer`) may be passed.\n * @example <FlexRender cell={cell} />\n * @example <FlexRender header={header} />\n * @example <FlexRender footer={footer} />\n */\nexport type FlexRenderProps<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TValue extends CellData = CellData,\n> =\n  | { cell: Cell<TFeatures, TData, TValue>; header?: never; footer?: never }\n  | {\n      header: Header<TFeatures, TData, TValue>\n      cell?: never\n      footer?: never\n    }\n  | {\n      footer: Header<TFeatures, TData, TValue>\n      cell?: never\n      header?: never\n    }\n\n/**\n * Simplified component wrapper of `flexRender`. Use this utility component to render headers, cells, or footers with custom markup.\n * Only one prop (`cell`, `header`, or `footer`) may be passed.\n * @example\n * ```tsx\n * <FlexRender cell={cell} />\n * <FlexRender header={header} />\n * <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 */\nexport function FlexRender<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TValue extends CellData = CellData,\n>(props: FlexRenderProps<TFeatures, TData, TValue>) {\n  if ('cell' in props && props.cell) {\n    const cell = props.cell\n    const def = cell.column.columnDef\n    // When the column-grouping feature is registered, a cell can be in one of\n    // three special modes that should not render `columnDef.cell` directly:\n    //   - aggregated: render `columnDef.aggregatedCell` (falling back to\n    //     `columnDef.cell` if the column did not define one)\n    //   - placeholder: a duplicate value within a group — render nothing\n    //   - grouped: the group header cell — let the consumer render this; we\n    //     fall through to `columnDef.cell` so the existing behavior is\n    //     preserved (consumers that want a custom group header typically\n    //     branch on `cell.getIsGrouped()` themselves before calling FlexRender)\n    // The optional-chaining + cast keeps this safe when the grouping feature\n    // is not registered (the methods are absent at the type level then).\n    const groupingCell = cell as typeof cell & {\n      getIsAggregated?: () => boolean\n      getIsPlaceholder?: () => boolean\n    }\n    const groupingDef = def as typeof def & {\n      aggregatedCell?: typeof def.cell\n    }\n    if (groupingCell.getIsAggregated?.()) {\n      return flexRender(\n        groupingDef.aggregatedCell ?? def.cell,\n        cell.getContext(),\n      )\n    }\n    if (groupingCell.getIsPlaceholder?.()) {\n      return null\n    }\n    return flexRender(def.cell, cell.getContext())\n  }\n  if ('header' in props && props.header) {\n    return flexRender(\n      props.header.column.columnDef.header,\n      props.header.getContext(),\n    )\n  }\n  if ('footer' in props && props.footer) {\n    return flexRender(\n      props.footer.column.columnDef.footer,\n      props.footer.getContext(),\n    )\n  }\n  return null\n}\n"],"mappings":";;;;;AAYA,SAAS,iBACP,WACoC;AACpC,QACE,iBAAiB,UAAU,IAC3B,OAAO,cAAc,cACrB,kBAAkB,UAAU;;AAIhC,SAAS,iBAAiB,WAAgB;AACxC,QACE,OAAO,cAAc,qBACd;EACL,MAAM,QAAQ,OAAO,eAAe,UAAU;AAC9C,SAAO,MAAM,aAAa,MAAM,UAAU;KACxC;;AAIR,SAAS,kBAAkB,WAAgB;AACzC,QACE,OAAO,cAAc,YACrB,OAAO,UAAU,aAAa,YAC9B,CAAC,cAAc,oBAAoB,CAAC,SAAS,UAAU,SAAS,YAAY;;;;;;AAQhF,SAAgB,WACd,MACA,OACyB;AACzB,QAAO,CAAC,OAAO,OAAO,iBAAyB,KAAK,GAClD,4CAAC,MAAS,MAAS,GAEnB;;;;;;;;;;;;;;;;;;;AA6CJ,SAAgB,WAId,OAAkD;AAClD,KAAI,UAAU,SAAS,MAAM,MAAM;;EACjC,MAAM,OAAO,MAAM;EACnB,MAAM,MAAM,KAAK,OAAO;EAYxB,MAAM,eAAe;EAIrB,MAAM,cAAc;AAGpB,+BAAI,aAAa,iHAAmB,CAClC,QAAO,WACL,YAAY,kBAAkB,IAAI,MAClC,KAAK,YAAY,CAClB;AAEH,+BAAI,aAAa,kHAAoB,CACnC,QAAO;AAET,SAAO,WAAW,IAAI,MAAM,KAAK,YAAY,CAAC;;AAEhD,KAAI,YAAY,SAAS,MAAM,OAC7B,QAAO,WACL,MAAM,OAAO,OAAO,UAAU,QAC9B,MAAM,OAAO,YAAY,CAC1B;AAEH,KAAI,YAAY,SAAS,MAAM,OAC7B,QAAO,WACL,MAAM,OAAO,OAAO,UAAU,QAC9B,MAAM,OAAO,YAAY,CAC1B;AAEH,QAAO"}

package/dist/FlexRender.d.cts

@@ -0,0 +1,51 @@
+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>;
+/**
+ * If rendering headers, cells, or footers with custom markup, use flexRender instead of `cell.getValue()` or `cell.renderValue()`.
+ * @example flexRender(cell.column.columnDef.cell, cell.getContext())
+ */
+declare function flexRender<TProps extends object>(Comp: Renderable<TProps>, props: TProps): ReactNode | JSX.Element;
+/**
+ * Simplified component wrapper of `flexRender`. Use this utility component to render headers, cells, or footers with custom markup.
+ * Only one prop (`cell`, `header`, or `footer`) may be passed.
+ * @example <FlexRender cell={cell} />
+ * @example <FlexRender header={header} />
+ * @example <FlexRender footer={footer} />
+ */
+type FlexRenderProps<TFeatures extends TableFeatures, TData extends RowData, TValue extends CellData = CellData> = {
+  cell: Cell<TFeatures, TData, TValue>;
+  header?: never;
+  footer?: never;
+} | {
+  header: Header<TFeatures, TData, TValue>;
+  cell?: never;
+  footer?: never;
+} | {
+  footer: Header<TFeatures, TData, TValue>;
+  cell?: never;
+  header?: never;
+};
+/**
+ * Simplified component wrapper of `flexRender`. Use this utility component to render headers, cells, or footers with custom markup.
+ * Only one prop (`cell`, `header`, or `footer`) may be passed.
+ * @example
+ * ```tsx
+ * <FlexRender cell={cell} />
+ * <FlexRender header={header} />
+ * <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())
+ * ```
+ */
+declare function FlexRender<TFeatures extends TableFeatures, TData extends RowData, TValue extends CellData = CellData>(props: FlexRenderProps<TFeatures, TData, TValue>): string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | JSX.Element | null | undefined;
+//#endregion
+export { FlexRender, FlexRenderProps, Renderable, flexRender };
+//# sourceMappingURL=FlexRender.d.cts.map

package/dist/FlexRender.d.ts

@@ -0,0 +1,51 @@
+import { Cell, CellData, Header, RowData, TableFeatures } from "@tanstack/table-core";
+import React, { ComponentType, JSX, ReactNode } from "react";
+
+//#region src/FlexRender.d.ts
+type Renderable<TProps> = ReactNode | ComponentType<TProps>;
+/**
+ * If rendering headers, cells, or footers with custom markup, use flexRender instead of `cell.getValue()` or `cell.renderValue()`.
+ * @example flexRender(cell.column.columnDef.cell, cell.getContext())
+ */
+declare function flexRender<TProps extends object>(Comp: Renderable<TProps>, props: TProps): ReactNode | JSX.Element;
+/**
+ * Simplified component wrapper of `flexRender`. Use this utility component to render headers, cells, or footers with custom markup.
+ * Only one prop (`cell`, `header`, or `footer`) may be passed.
+ * @example <FlexRender cell={cell} />
+ * @example <FlexRender header={header} />
+ * @example <FlexRender footer={footer} />
+ */
+type FlexRenderProps<TFeatures extends TableFeatures, TData extends RowData, TValue extends CellData = CellData> = {
+  cell: Cell<TFeatures, TData, TValue>;
+  header?: never;
+  footer?: never;
+} | {
+  header: Header<TFeatures, TData, TValue>;
+  cell?: never;
+  footer?: never;
+} | {
+  footer: Header<TFeatures, TData, TValue>;
+  cell?: never;
+  header?: never;
+};
+/**
+ * Simplified component wrapper of `flexRender`. Use this utility component to render headers, cells, or footers with custom markup.
+ * Only one prop (`cell`, `header`, or `footer`) may be passed.
+ * @example
+ * ```tsx
+ * <FlexRender cell={cell} />
+ * <FlexRender header={header} />
+ * <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())
+ * ```
+ */
+declare function FlexRender<TFeatures extends TableFeatures, TData extends RowData, TValue extends CellData = CellData>(props: FlexRenderProps<TFeatures, TData, TValue>): string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | JSX.Element | null | undefined;
+//#endregion
+export { FlexRender, FlexRenderProps, Renderable, flexRender };
+//# sourceMappingURL=FlexRender.d.ts.map

package/dist/FlexRender.js

@@ -0,0 +1,58 @@
+import React from "react";
+
+//#region src/FlexRender.tsx
+function isReactComponent(component) {
+	return isClassComponent(component) || typeof component === "function" || isExoticComponent(component);
+}
+function isClassComponent(component) {
+	return typeof component === "function" && (() => {
+		const proto = Object.getPrototypeOf(component);
+		return proto.prototype && proto.prototype.isReactComponent;
+	})();
+}
+function isExoticComponent(component) {
+	return typeof component === "object" && typeof component.$$typeof === "symbol" && ["react.memo", "react.forward_ref"].includes(component.$$typeof.description);
+}
+/**
+* If rendering headers, cells, or footers with custom markup, use flexRender instead of `cell.getValue()` or `cell.renderValue()`.
+* @example flexRender(cell.column.columnDef.cell, cell.getContext())
+*/
+function flexRender(Comp, props) {
+	return !Comp ? null : isReactComponent(Comp) ? /* @__PURE__ */ React.createElement(Comp, props) : Comp;
+}
+/**
+* Simplified component wrapper of `flexRender`. Use this utility component to render headers, cells, or footers with custom markup.
+* Only one prop (`cell`, `header`, or `footer`) may be passed.
+* @example
+* ```tsx
+* <FlexRender cell={cell} />
+* <FlexRender header={header} />
+* <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())
+* ```
+*/
+function FlexRender(props) {
+	if ("cell" in props && props.cell) {
+		var _groupingCell$getIsAg, _groupingCell$getIsPl;
+		const cell = props.cell;
+		const def = cell.column.columnDef;
+		const groupingCell = cell;
+		const groupingDef = def;
+		if ((_groupingCell$getIsAg = groupingCell.getIsAggregated) === null || _groupingCell$getIsAg === void 0 ? void 0 : _groupingCell$getIsAg.call(groupingCell)) return flexRender(groupingDef.aggregatedCell ?? def.cell, cell.getContext());
+		if ((_groupingCell$getIsPl = groupingCell.getIsPlaceholder) === null || _groupingCell$getIsPl === void 0 ? void 0 : _groupingCell$getIsPl.call(groupingCell)) return null;
+		return flexRender(def.cell, cell.getContext());
+	}
+	if ("header" in props && props.header) return flexRender(props.header.column.columnDef.header, props.header.getContext());
+	if ("footer" in props && props.footer) return flexRender(props.footer.column.columnDef.footer, props.footer.getContext());
+	return null;
+}
+
+//#endregion
+export { FlexRender, flexRender };
+//# sourceMappingURL=FlexRender.js.map

package/dist/FlexRender.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FlexRender.js","names":[],"sources":["../src/FlexRender.tsx"],"sourcesContent":["import React from 'react'\nimport type {\n  Cell,\n  CellData,\n  Header,\n  RowData,\n  TableFeatures,\n} from '@tanstack/table-core'\nimport type { ComponentType, JSX, ReactNode } from 'react'\n\nexport type Renderable<TProps> = ReactNode | ComponentType<TProps>\n\nfunction isReactComponent<TProps>(\n  component: unknown,\n): component is ComponentType<TProps> {\n  return (\n    isClassComponent(component) ||\n    typeof component === 'function' ||\n    isExoticComponent(component)\n  )\n}\n\nfunction isClassComponent(component: any) {\n  return (\n    typeof component === 'function' &&\n    (() => {\n      const proto = Object.getPrototypeOf(component)\n      return proto.prototype && proto.prototype.isReactComponent\n    })()\n  )\n}\n\nfunction isExoticComponent(component: any) {\n  return (\n    typeof component === 'object' &&\n    typeof component.$$typeof === 'symbol' &&\n    ['react.memo', 'react.forward_ref'].includes(component.$$typeof.description)\n  )\n}\n\n/**\n * If rendering headers, cells, or footers with custom markup, use flexRender instead of `cell.getValue()` or `cell.renderValue()`.\n * @example flexRender(cell.column.columnDef.cell, cell.getContext())\n */\nexport function flexRender<TProps extends object>(\n  Comp: Renderable<TProps>,\n  props: TProps,\n): ReactNode | JSX.Element {\n  return !Comp ? null : isReactComponent<TProps>(Comp) ? (\n    <Comp {...props} />\n  ) : (\n    Comp\n  )\n}\n\n/**\n * Simplified component wrapper of `flexRender`. Use this utility component to render headers, cells, or footers with custom markup.\n * Only one prop (`cell`, `header`, or `footer`) may be passed.\n * @example <FlexRender cell={cell} />\n * @example <FlexRender header={header} />\n * @example <FlexRender footer={footer} />\n */\nexport type FlexRenderProps<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TValue extends CellData = CellData,\n> =\n  | { cell: Cell<TFeatures, TData, TValue>; header?: never; footer?: never }\n  | {\n      header: Header<TFeatures, TData, TValue>\n      cell?: never\n      footer?: never\n    }\n  | {\n      footer: Header<TFeatures, TData, TValue>\n      cell?: never\n      header?: never\n    }\n\n/**\n * Simplified component wrapper of `flexRender`. Use this utility component to render headers, cells, or footers with custom markup.\n * Only one prop (`cell`, `header`, or `footer`) may be passed.\n * @example\n * ```tsx\n * <FlexRender cell={cell} />\n * <FlexRender header={header} />\n * <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 */\nexport function FlexRender<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TValue extends CellData = CellData,\n>(props: FlexRenderProps<TFeatures, TData, TValue>) {\n  if ('cell' in props && props.cell) {\n    const cell = props.cell\n    const def = cell.column.columnDef\n    // When the column-grouping feature is registered, a cell can be in one of\n    // three special modes that should not render `columnDef.cell` directly:\n    //   - aggregated: render `columnDef.aggregatedCell` (falling back to\n    //     `columnDef.cell` if the column did not define one)\n    //   - placeholder: a duplicate value within a group — render nothing\n    //   - grouped: the group header cell — let the consumer render this; we\n    //     fall through to `columnDef.cell` so the existing behavior is\n    //     preserved (consumers that want a custom group header typically\n    //     branch on `cell.getIsGrouped()` themselves before calling FlexRender)\n    // The optional-chaining + cast keeps this safe when the grouping feature\n    // is not registered (the methods are absent at the type level then).\n    const groupingCell = cell as typeof cell & {\n      getIsAggregated?: () => boolean\n      getIsPlaceholder?: () => boolean\n    }\n    const groupingDef = def as typeof def & {\n      aggregatedCell?: typeof def.cell\n    }\n    if (groupingCell.getIsAggregated?.()) {\n      return flexRender(\n        groupingDef.aggregatedCell ?? def.cell,\n        cell.getContext(),\n      )\n    }\n    if (groupingCell.getIsPlaceholder?.()) {\n      return null\n    }\n    return flexRender(def.cell, cell.getContext())\n  }\n  if ('header' in props && props.header) {\n    return flexRender(\n      props.header.column.columnDef.header,\n      props.header.getContext(),\n    )\n  }\n  if ('footer' in props && props.footer) {\n    return flexRender(\n      props.footer.column.columnDef.footer,\n      props.footer.getContext(),\n    )\n  }\n  return null\n}\n"],"mappings":";;;AAYA,SAAS,iBACP,WACoC;AACpC,QACE,iBAAiB,UAAU,IAC3B,OAAO,cAAc,cACrB,kBAAkB,UAAU;;AAIhC,SAAS,iBAAiB,WAAgB;AACxC,QACE,OAAO,cAAc,qBACd;EACL,MAAM,QAAQ,OAAO,eAAe,UAAU;AAC9C,SAAO,MAAM,aAAa,MAAM,UAAU;KACxC;;AAIR,SAAS,kBAAkB,WAAgB;AACzC,QACE,OAAO,cAAc,YACrB,OAAO,UAAU,aAAa,YAC9B,CAAC,cAAc,oBAAoB,CAAC,SAAS,UAAU,SAAS,YAAY;;;;;;AAQhF,SAAgB,WACd,MACA,OACyB;AACzB,QAAO,CAAC,OAAO,OAAO,iBAAyB,KAAK,GAClD,oCAAC,MAAS,MAAS,GAEnB;;;;;;;;;;;;;;;;;;;AA6CJ,SAAgB,WAId,OAAkD;AAClD,KAAI,UAAU,SAAS,MAAM,MAAM;;EACjC,MAAM,OAAO,MAAM;EACnB,MAAM,MAAM,KAAK,OAAO;EAYxB,MAAM,eAAe;EAIrB,MAAM,cAAc;AAGpB,+BAAI,aAAa,iHAAmB,CAClC,QAAO,WACL,YAAY,kBAAkB,IAAI,MAClC,KAAK,YAAY,CAClB;AAEH,+BAAI,aAAa,kHAAoB,CACnC,QAAO;AAET,SAAO,WAAW,IAAI,MAAM,KAAK,YAAY,CAAC;;AAEhD,KAAI,YAAY,SAAS,MAAM,OAC7B,QAAO,WACL,MAAM,OAAO,OAAO,UAAU,QAC9B,MAAM,OAAO,YAAY,CAC1B;AAEH,KAAI,YAAY,SAAS,MAAM,OAC7B,QAAO,WACL,MAAM,OAAO,OAAO,UAAU,QAC9B,MAAM,OAAO,YAAY,CAC1B;AAEH,QAAO"}

package/dist/Subscribe.cjs

@@ -0,0 +1,14 @@
+'use client';
+
+const require_runtime = require('./_virtual/_rolldown/runtime.cjs');
+let _tanstack_react_store = require("@tanstack/react-store");
+
+//#region src/Subscribe.ts
+function Subscribe(props) {
+	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;
+}
+
+//#endregion
+exports.Subscribe = Subscribe;
+//# sourceMappingURL=Subscribe.cjs.map

package/dist/Subscribe.cjs.map

@@ -0,0 +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 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

@@ -0,0 +1,103 @@
+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
+/**
+ * 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>;
+  /**
+   * Select from full table state. Re-renders when the selected value changes
+   * (shallow compare).
+   *
+   * Required in store mode so you never accidentally subscribe to the whole
+   * store without an explicit projection.
+   */
+  selector: (state: TableState<TFeatures>) => TSelected;
+  children: ((state: TSelected) => ReactNode) | ReactNode;
+};
+/**
+ * Subscribe to the full value of a source (e.g. `table.atoms.rowSelection` or
+ * `table.optionsStore`). Omitting `selector` is equivalent to the identity
+ * selector — children receive `TSourceValue`.
+ */
+type SubscribePropsWithSourceIdentity<TFeatures extends TableFeatures, TData extends RowData, TSourceValue> = {
+  table: Table<TFeatures, TData>;
+  source: Atom<TSourceValue> | ReadonlyAtom<TSourceValue>;
+  selector?: undefined;
+  children: ((state: TSourceValue) => ReactNode) | ReactNode;
+};
+/**
+ * Subscribe to a projected value from a source (atom or store). The selector
+ * receives the source value; children receive the projected `TSelected`.
+ */
+type SubscribePropsWithSourceWithSelector<TFeatures extends TableFeatures, TData extends RowData, TSourceValue, TSelected> = {
+  table: Table<TFeatures, TData>;
+  source: Atom<TSourceValue> | ReadonlyAtom<TSourceValue>;
+  selector: (state: TSourceValue) => TSelected;
+  children: ((state: TSelected) => ReactNode) | ReactNode;
+};
+/**
+ * Subscribe to a single source — atom or store (identity or projected). Prefer
+ * {@link SubscribePropsWithSourceIdentity} or {@link SubscribePropsWithSourceWithSelector}
+ * for clearer inference when `selector` is omitted.
+ */
+type SubscribePropsWithSource<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.
+ *
+ * This is useful for opting into state re-renders for specific parts of the table state.
+ *
+ * For `table.Subscribe` from `useTable`, prefer that API — it uses overloads so JSX
+ * contextual typing works. This standalone component uses a union `props` type.
+ *
+ * @example
+ * ```tsx
+ * // As a standalone component — full store
+ * <Subscribe table={table} selector={(state) => ({ rowSelection: state.rowSelection })}>
+ *   {({ rowSelection }) => (
+ *     <div>Selected rows: {Object.keys(rowSelection).length}</div>
+ *   )}
+ * </Subscribe>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Entire source (atom or store) — no selector
+ * <Subscribe table={table} source={table.atoms.rowSelection}>
+ *   {(rowSelection) => <div>...</div>}
+ * </Subscribe>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Project source value (e.g. one row’s selection)
+ * <Subscribe
+ *   table={table}
+ *   source={table.atoms.rowSelection}
+ *   selector={(rowSelection) => rowSelection?.[row.id]}
+ * >
+ *   {(selected) => <tr data-selected={!!selected}>...</tr>}
+ * </Subscribe>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // As table.Subscribe (table instance method)
+ * <table.Subscribe selector={(state) => ({ rowSelection: state.rowSelection })}>
+ *   {({ rowSelection }) => (
+ *     <div>Selected rows: {Object.keys(rowSelection).length}</div>
+ *   )}
+ * </table.Subscribe>
+ * ```
+ */
+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, SubscribePropsWithSource, SubscribePropsWithSourceIdentity, SubscribePropsWithSourceWithSelector, SubscribePropsWithStore };
+//# sourceMappingURL=Subscribe.d.cts.map

package/dist/Subscribe.d.ts

@@ -0,0 +1,103 @@
+import { RowData, Table, TableFeatures, TableState } from "@tanstack/table-core";
+import { FunctionComponent, ReactNode } from "react";
+import { Atom, ReadonlyAtom } from "@tanstack/react-store";
+
+//#region src/Subscribe.d.ts
+/**
+ * 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>;
+  /**
+   * Select from full table state. Re-renders when the selected value changes
+   * (shallow compare).
+   *
+   * Required in store mode so you never accidentally subscribe to the whole
+   * store without an explicit projection.
+   */
+  selector: (state: TableState<TFeatures>) => TSelected;
+  children: ((state: TSelected) => ReactNode) | ReactNode;
+};
+/**
+ * Subscribe to the full value of a source (e.g. `table.atoms.rowSelection` or
+ * `table.optionsStore`). Omitting `selector` is equivalent to the identity
+ * selector — children receive `TSourceValue`.
+ */
+type SubscribePropsWithSourceIdentity<TFeatures extends TableFeatures, TData extends RowData, TSourceValue> = {
+  table: Table<TFeatures, TData>;
+  source: Atom<TSourceValue> | ReadonlyAtom<TSourceValue>;
+  selector?: undefined;
+  children: ((state: TSourceValue) => ReactNode) | ReactNode;
+};
+/**
+ * Subscribe to a projected value from a source (atom or store). The selector
+ * receives the source value; children receive the projected `TSelected`.
+ */
+type SubscribePropsWithSourceWithSelector<TFeatures extends TableFeatures, TData extends RowData, TSourceValue, TSelected> = {
+  table: Table<TFeatures, TData>;
+  source: Atom<TSourceValue> | ReadonlyAtom<TSourceValue>;
+  selector: (state: TSourceValue) => TSelected;
+  children: ((state: TSelected) => ReactNode) | ReactNode;
+};
+/**
+ * Subscribe to a single source — atom or store (identity or projected). Prefer
+ * {@link SubscribePropsWithSourceIdentity} or {@link SubscribePropsWithSourceWithSelector}
+ * for clearer inference when `selector` is omitted.
+ */
+type SubscribePropsWithSource<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.
+ *
+ * This is useful for opting into state re-renders for specific parts of the table state.
+ *
+ * For `table.Subscribe` from `useTable`, prefer that API — it uses overloads so JSX
+ * contextual typing works. This standalone component uses a union `props` type.
+ *
+ * @example
+ * ```tsx
+ * // As a standalone component — full store
+ * <Subscribe table={table} selector={(state) => ({ rowSelection: state.rowSelection })}>
+ *   {({ rowSelection }) => (
+ *     <div>Selected rows: {Object.keys(rowSelection).length}</div>
+ *   )}
+ * </Subscribe>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Entire source (atom or store) — no selector
+ * <Subscribe table={table} source={table.atoms.rowSelection}>
+ *   {(rowSelection) => <div>...</div>}
+ * </Subscribe>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Project source value (e.g. one row’s selection)
+ * <Subscribe
+ *   table={table}
+ *   source={table.atoms.rowSelection}
+ *   selector={(rowSelection) => rowSelection?.[row.id]}
+ * >
+ *   {(selected) => <tr data-selected={!!selected}>...</tr>}
+ * </Subscribe>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // As table.Subscribe (table instance method)
+ * <table.Subscribe selector={(state) => ({ rowSelection: state.rowSelection })}>
+ *   {({ rowSelection }) => (
+ *     <div>Selected rows: {Object.keys(rowSelection).length}</div>
+ *   )}
+ * </table.Subscribe>
+ * ```
+ */
+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, SubscribePropsWithSource, SubscribePropsWithSourceIdentity, SubscribePropsWithSourceWithSelector, SubscribePropsWithStore };
+//# sourceMappingURL=Subscribe.d.ts.map

package/dist/Subscribe.js

@@ -0,0 +1,13 @@
+'use client';
+
+import { shallow, useSelector } from "@tanstack/react-store";
+
+//#region src/Subscribe.ts
+function Subscribe(props) {
+	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;
+}
+
+//#endregion
+export { Subscribe };
+//# sourceMappingURL=Subscribe.js.map

package/dist/Subscribe.js.map

@@ -0,0 +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 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"}