@tanstack/preact-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,50 @@
+let preact_jsx_runtime = require("preact/jsx-runtime");
+
+//#region src/FlexRender.tsx
+function isPreactComponent(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.isPreactComponent;
+	})();
+}
+function isExoticComponent(component) {
+	return typeof component === "object" && typeof component.$$typeof === "symbol" && ["preact.memo", "preact.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 : isPreactComponent(Comp) ? /* @__PURE__ */ (0, preact_jsx_runtime.jsx)(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 type {\n  Cell,\n  CellData,\n  Header,\n  RowData,\n  TableFeatures,\n} from '@tanstack/table-core'\nimport type { ComponentChild, ComponentType } from 'preact'\n\nexport type Renderable<TProps> = ComponentChild | ComponentType<TProps>\n\nfunction isPreactComponent<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.isPreactComponent\n    })()\n  )\n}\n\nfunction isExoticComponent(component: any) {\n  return (\n    typeof component === 'object' &&\n    typeof component.$$typeof === 'symbol' &&\n    ['preact.memo', 'preact.forward_ref'].includes(\n      component.$$typeof.description,\n    )\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> | null,\n  props: TProps,\n): ComponentChild | Element | null {\n  return !Comp ? null : isPreactComponent<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":";;;AAWA,SAAS,kBACP,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,eAAe,qBAAqB,CAAC,SACpC,UAAU,SAAS,YACpB;;;;;;AAQL,SAAgB,WACd,MACA,OACiC;AACjC,QAAO,CAAC,OAAO,OAAO,kBAA0B,KAAK,GACnD,4CAAC,MAAD,EAAM,GAAI,OAAS,IAEnB;;;;;;;;;;;;;;;;;;;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 { ComponentChild, ComponentType } from "preact";
+
+//#region src/FlexRender.d.ts
+type Renderable<TProps> = ComponentChild | 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> | null, props: TProps): ComponentChild | Element | null;
+/**
+ * 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>): ComponentChild;
+//#endregion
+export { FlexRender, FlexRenderProps, Renderable, flexRender };
+//# sourceMappingURL=FlexRender.d.cts.map

package/dist/{esm/FlexRender.d.ts → FlexRender.d.ts}

@@ -1,11 +1,13 @@
-import { Cell, CellData, Header, RowData, TableFeatures } from '@tanstack/table-core';
-import { ComponentChild, ComponentType } from 'preact';
-export type Renderable<TProps> = ComponentChild | ComponentType<TProps>;
+import { Cell, CellData, Header, RowData, TableFeatures } from "@tanstack/table-core";
+import { ComponentChild, ComponentType } from "preact";
+
+//#region src/FlexRender.d.ts
+type Renderable<TProps> = ComponentChild | 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())
  */
-export declare function flexRender<TProps extends object>(Comp: Renderable<TProps> | null, props: TProps): ComponentChild | Element | null;
+declare function flexRender<TProps extends object>(Comp: Renderable<TProps> | null, props: TProps): ComponentChild | Element | null;
 /**
  * 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.
@@ -13,18 +15,18 @@ export declare function flexRender<TProps extends object>(Comp: Renderable<TProp
  * @example <FlexRender header={header} />
  * @example <FlexRender footer={footer} />
  */
-export type FlexRenderProps<TFeatures extends TableFeatures, TData extends RowData, TValue extends CellData = CellData> = {
-    cell: Cell<TFeatures, TData, TValue>;
-    header?: never;
-    footer?: never;
+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;
+  header: Header<TFeatures, TData, TValue>;
+  cell?: never;
+  footer?: never;
 } | {
-    footer: Header<TFeatures, TData, TValue>;
-    cell?: never;
-    header?: 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.
@@ -43,4 +45,7 @@ export type FlexRenderProps<TFeatures extends TableFeatures, TData extends RowDa
  * flexRender(footer.column.columnDef.footer, footer.getContext())
  * ```
  */
-export declare function FlexRender<TFeatures extends TableFeatures, TData extends RowData, TValue extends CellData = CellData>(props: FlexRenderProps<TFeatures, TData, TValue>): ComponentChild;
+declare function FlexRender<TFeatures extends TableFeatures, TData extends RowData, TValue extends CellData = CellData>(props: FlexRenderProps<TFeatures, TData, TValue>): ComponentChild;
+//#endregion
+export { FlexRender, FlexRenderProps, Renderable, flexRender };
+//# sourceMappingURL=FlexRender.d.ts.map

package/dist/FlexRender.js

@@ -0,0 +1,49 @@
+import { jsx } from "preact/jsx-runtime";
+
+//#region src/FlexRender.tsx
+function isPreactComponent(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.isPreactComponent;
+	})();
+}
+function isExoticComponent(component) {
+	return typeof component === "object" && typeof component.$$typeof === "symbol" && ["preact.memo", "preact.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 : isPreactComponent(Comp) ? /* @__PURE__ */ jsx(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 type {\n  Cell,\n  CellData,\n  Header,\n  RowData,\n  TableFeatures,\n} from '@tanstack/table-core'\nimport type { ComponentChild, ComponentType } from 'preact'\n\nexport type Renderable<TProps> = ComponentChild | ComponentType<TProps>\n\nfunction isPreactComponent<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.isPreactComponent\n    })()\n  )\n}\n\nfunction isExoticComponent(component: any) {\n  return (\n    typeof component === 'object' &&\n    typeof component.$$typeof === 'symbol' &&\n    ['preact.memo', 'preact.forward_ref'].includes(\n      component.$$typeof.description,\n    )\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> | null,\n  props: TProps,\n): ComponentChild | Element | null {\n  return !Comp ? null : isPreactComponent<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":";;;AAWA,SAAS,kBACP,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,eAAe,qBAAqB,CAAC,SACpC,UAAU,SAAS,YACpB;;;;;;AAQL,SAAgB,WACd,MACA,OACiC;AACjC,QAAO,CAAC,OAAO,OAAO,kBAA0B,KAAK,GACnD,oBAAC,MAAD,EAAM,GAAI,OAAS,IAEnB;;;;;;;;;;;;;;;;;;;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,36 @@
+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);
+	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":[],"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"}

package/dist/Subscribe.d.cts

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

package/dist/Subscribe.js

@@ -0,0 +1,36 @@
+import { useStore } 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);
+	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":["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"}