@tanstack/react-table 9.0.0-alpha.22 → 9.0.0-alpha.26

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,52 @@
+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) return flexRender(props.cell.column.columnDef.cell, props.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    return flexRender(props.cell.column.columnDef.cell, props.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,KAC3B,QAAO,WAAW,MAAM,KAAK,OAAO,UAAU,MAAM,MAAM,KAAK,YAAY,CAAC;AAE9E,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 { 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.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,49 @@
+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) return flexRender(props.cell.column.columnDef.cell, props.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    return flexRender(props.cell.column.columnDef.cell, props.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,KAC3B,QAAO,WAAW,MAAM,KAAK,OAAO,UAAU,MAAM,MAAM,KAAK,YAAY,CAAC;AAE9E,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,39 @@
+'use client';
+
+const require_runtime = require('./_virtual/_rolldown/runtime.cjs');
+let _tanstack_react_store = require("@tanstack/react-store");
+
+//#region src/Subscribe.ts
+/**
+* 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.
+*
+* @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_react_store.useStore)(props.table.store, props.selector, _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, useStore } from '@tanstack/react-store'\nimport type {\n  NoInfer,\n  RowData,\n  Table,\n  TableFeatures,\n  TableState,\n} from '@tanstack/table-core'\nimport type { FunctionComponent, ReactNode } from 'react'\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 React node.\n   */\n  children: ((state: TSelected) => ReactNode) | ReactNode\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 * @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>(\n  props: SubscribeProps<TFeatures, TData, TSelected>,\n): ReturnType<FunctionComponent> {\n  const selected = useStore(props.table.store, props.selector, shallow)\n\n  return typeof props.children === 'function'\n    ? props.children(selected)\n    : props.children\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0DA,SAAgB,UAKd,OAC+B;CAC/B,MAAM,+CAAoB,MAAM,MAAM,OAAO,MAAM,UAAUA,8BAAQ;AAErE,QAAO,OAAO,MAAM,aAAa,aAC7B,MAAM,SAAS,SAAS,GACxB,MAAM"}

package/dist/Subscribe.d.cts

@@ -0,0 +1,49 @@
+import { NoInfer, RowData, Table, TableFeatures, TableState } from "@tanstack/table-core";
+import { FunctionComponent, ReactNode } from "react";
+
+//#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`.
+   */
+  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 React node.
+   */
+  children: ((state: TSelected) => ReactNode) | ReactNode;
+};
+/**
+ * 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.
+ *
+ * @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>
+ * ```
+ */
+declare function Subscribe<TFeatures extends TableFeatures, TData extends RowData, TSelected = {}>(props: SubscribeProps<TFeatures, TData, TSelected>): ReturnType<FunctionComponent>;
+//#endregion
+export { Subscribe, SubscribeProps };
+//# sourceMappingURL=Subscribe.d.cts.map

package/dist/Subscribe.d.ts

@@ -0,0 +1,49 @@
+import { NoInfer, RowData, Table, TableFeatures, TableState } from "@tanstack/table-core";
+import { FunctionComponent, ReactNode } from "react";
+
+//#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`.
+   */
+  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 React node.
+   */
+  children: ((state: TSelected) => ReactNode) | ReactNode;
+};
+/**
+ * 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.
+ *
+ * @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>
+ * ```
+ */
+declare function Subscribe<TFeatures extends TableFeatures, TData extends RowData, TSelected = {}>(props: SubscribeProps<TFeatures, TData, TSelected>): ReturnType<FunctionComponent>;
+//#endregion
+export { Subscribe, SubscribeProps };
+//# sourceMappingURL=Subscribe.d.ts.map

package/dist/Subscribe.js

@@ -0,0 +1,38 @@
+'use client';
+
+import { shallow, useStore } from "@tanstack/react-store";
+
+//#region src/Subscribe.ts
+/**
+* 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.
+*
+* @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, 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, useStore } from '@tanstack/react-store'\nimport type {\n  NoInfer,\n  RowData,\n  Table,\n  TableFeatures,\n  TableState,\n} from '@tanstack/table-core'\nimport type { FunctionComponent, ReactNode } from 'react'\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 React node.\n   */\n  children: ((state: TSelected) => ReactNode) | ReactNode\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 * @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>(\n  props: SubscribeProps<TFeatures, TData, TSelected>,\n): ReturnType<FunctionComponent> {\n  const selected = useStore(props.table.store, props.selector, shallow)\n\n  return typeof props.children === 'function'\n    ? props.children(selected)\n    : props.children\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0DA,SAAgB,UAKd,OAC+B;CAC/B,MAAM,WAAW,SAAS,MAAM,MAAM,OAAO,MAAM,UAAU,QAAQ;AAErE,QAAO,OAAO,MAAM,aAAa,aAC7B,MAAM,SAAS,SAAS,GACxB,MAAM"}

package/dist/_virtual/_rolldown/runtime.cjs

@@ -0,0 +1,29 @@
+//#region \0rolldown/runtime.js
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") {
+		for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
+			key = keys[i];
+			if (!__hasOwnProp.call(to, key) && key !== except) {
+				__defProp(to, key, {
+					get: ((k) => from[k]).bind(null, key),
+					enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+				});
+			}
+		}
+	}
+	return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
+
+//#endregion
+
+exports.__toESM = __toESM;