@tanstack/react-table 9.0.0-alpha.21 → 9.0.0-alpha.23

package/dist/useTable.js

@@ -0,0 +1,40 @@
+'use client';
+
+import { FlexRender } from "./FlexRender.js";
+import { Subscribe } from "./Subscribe.js";
+import { constructTable } from "@tanstack/table-core";
+import { useMemo, useState } from "react";
+import { shallow, useStore } from "@tanstack/react-store";
+
+//#region src/useTable.ts
+function useTable(tableOptions, selector = () => ({})) {
+	const [table] = useState(() => {
+		const tableInstance = constructTable(tableOptions);
+		tableInstance.Subscribe = function SubscribeBound(props) {
+			return Subscribe({
+				...props,
+				table: tableInstance
+			});
+		};
+		tableInstance.FlexRender = FlexRender;
+		return tableInstance;
+	});
+	table.setOptions((prev) => ({
+		...prev,
+		...tableOptions
+	}));
+	const selectorWithDataAndColumns = (state) => ({
+		columns: tableOptions.columns,
+		data: tableOptions.data,
+		...selector(state)
+	});
+	const state = useStore(table.store, selectorWithDataAndColumns, shallow);
+	return useMemo(() => ({
+		...table,
+		state
+	}), [state, table]);
+}
+
+//#endregion
+export { useTable };
+//# sourceMappingURL=useTable.js.map

package/dist/useTable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTable.js","names":[],"sources":["../src/useTable.ts"],"sourcesContent":["'use client'\n\nimport { useMemo, useState } from 'react'\nimport { constructTable } from '@tanstack/table-core'\nimport { shallow, useStore } from '@tanstack/react-store'\nimport { FlexRender } from './FlexRender'\nimport { Subscribe } from './Subscribe'\nimport type {\n  CellData,\n  NoInfer,\n  RowData,\n  Table,\n  TableFeatures,\n  TableOptions,\n  TableState,\n} from '@tanstack/table-core'\nimport type { FunctionComponent, ReactNode } from 'react'\nimport type { FlexRenderProps } from './FlexRender'\nimport type { SubscribeProps } from './Subscribe'\n\nexport type ReactTable<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TSelected = {},\n> = Table<TFeatures, TData> & {\n  /**\n   * A React HOC (Higher Order Component) that allows you to subscribe to the table state.\n   *\n   * This is useful for opting into state re-renders for specific parts of the table state.\n   *\n   * @example\n   * <table.Subscribe selector={(state) => ({ rowSelection: state.rowSelection })}>\n   *   {({ rowSelection }) => ( // important to include `{() => {()}}` syntax\n   *     <tr key={row.id}>\n            // render the row\n   *     </tr>\n   *   ))}\n   * </table.Subscribe>\n   */\n  Subscribe: <TSelected>(props: {\n    selector: (state: NoInfer<TableState<TFeatures>>) => TSelected\n    children: ((state: TSelected) => ReactNode) | ReactNode\n  }) => ReturnType<FunctionComponent>\n  /**\n   * A React component that renders headers, cells, or footers with custom markup.\n   * Use this utility component instead of manually calling flexRender.\n   *\n   * @example\n   * ```tsx\n   * <table.FlexRender cell={cell} />\n   * <table.FlexRender header={header} />\n   * <table.FlexRender footer={footer} />\n   * ```\n   *\n   * This replaces calling `flexRender` directly like this:\n   * ```tsx\n   * flexRender(cell.column.columnDef.cell, cell.getContext())\n   * flexRender(header.column.columnDef.header, header.getContext())\n   * flexRender(footer.column.columnDef.footer, footer.getContext())\n   * ```\n   */\n  FlexRender: <TValue extends CellData = CellData>(\n    props: FlexRenderProps<TFeatures, TData, TValue>,\n  ) => ReactNode\n  /**\n   * The selected state of the table. This state may not match the structure of `table.store.state` because it is selected by the `selector` function that you pass as the 2nd argument to `useTable`.\n   *\n   * @example\n   * const table = useTable(options, (state) => ({ globalFilter: state.globalFilter })) // only globalFilter is part of the selected state\n   *\n   * console.log(table.state.globalFilter)\n   */\n  readonly state: Readonly<TSelected> & {\n    columns: TableOptions<TFeatures, TData>['columns']\n    data: TableOptions<TFeatures, TData>['data']\n  }\n}\n\nexport function useTable<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TSelected = {},\n>(\n  tableOptions: TableOptions<TFeatures, TData>,\n  selector: (state: TableState<TFeatures>) => TSelected = () =>\n    ({}) as TSelected,\n): ReactTable<TFeatures, TData, TSelected> {\n  const [table] = useState(() => {\n    const tableInstance = constructTable(tableOptions) as ReactTable<\n      TFeatures,\n      TData,\n      TSelected\n    >\n\n    tableInstance.Subscribe = function SubscribeBound<TSelected>(\n      props: Omit<SubscribeProps<TFeatures, TData, TSelected>, 'table'>,\n    ) {\n      return Subscribe({ ...props, table: tableInstance })\n    }\n\n    tableInstance.FlexRender = FlexRender\n\n    return tableInstance\n  })\n\n  // sync table options on every render\n  table.setOptions((prev) => ({\n    ...prev,\n    ...tableOptions,\n  }))\n\n  const selectorWithDataAndColumns = (state: TableState<TFeatures>) => ({\n    columns: tableOptions.columns,\n    data: tableOptions.data,\n    ...selector(state),\n  })\n\n  const state = useStore(table.store, selectorWithDataAndColumns, shallow)\n\n  return useMemo(\n    () => ({\n      ...table,\n      state,\n    }),\n    [state, table],\n  ) as ReactTable<TFeatures, TData, TSelected>\n}\n"],"mappings":";;;;;;;;;AA8EA,SAAgB,SAKd,cACA,kBACG,EAAE,GACoC;CACzC,MAAM,CAAC,SAAS,eAAe;EAC7B,MAAM,gBAAgB,eAAe,aAAa;AAMlD,gBAAc,YAAY,SAAS,eACjC,OACA;AACA,UAAO,UAAU;IAAE,GAAG;IAAO,OAAO;IAAe,CAAC;;AAGtD,gBAAc,aAAa;AAE3B,SAAO;GACP;AAGF,OAAM,YAAY,UAAU;EAC1B,GAAG;EACH,GAAG;EACJ,EAAE;CAEH,MAAM,8BAA8B,WAAkC;EACpE,SAAS,aAAa;EACtB,MAAM,aAAa;EACnB,GAAG,SAAS,MAAM;EACnB;CAED,MAAM,QAAQ,SAAS,MAAM,OAAO,4BAA4B,QAAQ;AAExE,QAAO,eACE;EACL,GAAG;EACH;EACD,GACD,CAAC,OAAO,MAAM,CACf"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/react-table",
-  "version": "9.0.0-alpha.21",
+  "version": "9.0.0-alpha.23",
   "description": "Headless UI for building powerful tables & datagrids for React.",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -21,23 +21,19 @@
     "datagrid"
   ],
   "type": "module",
-  "types": "dist/esm/index.d.ts",
-  "main": "dist/esm/index.js",
-  "module": "dist/esm/index.js",
+  "types": "./dist/index.d.cts",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
   "exports": {
     ".": {
-      "import": {
-        "types": "./dist/esm/index.d.ts",
-        "default": "./dist/esm/index.js"
-      }
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
     },
-    "./package.json": "./package.json",
     "./legacy": {
-      "import": {
-        "types": "./dist/esm/legacy.d.ts",
-        "default": "./dist/esm/legacy.js"
-      }
-    }
+      "import": "./dist/legacy.js",
+      "require": "./dist/legacy.cjs"
+    },
+    "./package.json": "./package.json"
   },
   "sideEffects": false,
   "engines": {
@@ -48,13 +44,13 @@
     "src"
   ],
   "dependencies": {
-    "@tanstack/react-store": "^0.9.2",
-    "@tanstack/table-core": "9.0.0-alpha.21"
+    "@tanstack/react-store": "^0.9.3",
+    "@tanstack/table-core": "9.0.0-alpha.23"
   },
   "devDependencies": {
-    "@eslint-react/eslint-plugin": "^2.13.0",
-    "@types/react": "^19.2.10",
-    "@vitejs/plugin-react": "^5.1.2",
+    "@eslint-react/eslint-plugin": "^4.2.1",
+    "@types/react": "^19.2.14",
+    "@vitejs/plugin-react": "^6.0.1",
     "eslint-plugin-react-compiler": "19.1.0-rc.2",
     "eslint-plugin-react-hooks": "^7.0.1",
     "react": "^19.2.4"
@@ -69,6 +65,6 @@
     "test:lib:dev": "pnpm test:lib --watch",
     "test:types": "tsc",
     "test:build": "publint --strict",
-    "build": "vite build"
+    "build": "tsdown"
   }
 }

package/src/createTableHook.tsx

@@ -1,6 +1,5 @@
 'use client'
 /* eslint-disable @eslint-react/no-context-provider */
-// eslint-disable-next-line @eslint-react/no-use-context -- intentional useContext for older React support
 import React, { createContext, useContext, useMemo } from 'react'
 import { createColumnHelper as coreCreateColumnHelper } from '@tanstack/table-core'
 import { useTable } from './useTable'
@@ -675,8 +674,8 @@ export function createTableHook<
     TFeatures,
     TData
   > {
-    // useContext used for React 18 compatibility - use() requires React 19+
-    // eslint-disable-next-line @eslint-react/no-use-context -- intentional useContext for older React support
+    // `useContext` keeps React 18 support; `use(Context)` is React 19+ only.
+    // eslint-disable-next-line @eslint-react/no-use-context -- intentional for React 18
     const table = useContext(TableContext)
 
     // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
@@ -709,8 +708,8 @@ export function createTableHook<
    * ```
    */
   function useCellContext<TValue extends CellData = CellData>() {
-    // useContext used for React 18 compatibility - use() requires React 19+
-    // eslint-disable-next-line @eslint-react/no-use-context -- intentional useContext for older React support
+    // `useContext` keeps React 18 support; `use(Context)` is React 19+ only.
+    // eslint-disable-next-line @eslint-react/no-use-context -- intentional for React 18
     const cell = useContext(CellContext)
 
     // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
@@ -751,8 +750,8 @@ export function createTableHook<
    * ```
    */
   function useHeaderContext<TValue extends CellData = CellData>() {
-    // useContext used for React 18 compatibility - use() requires React 19+
-    // eslint-disable-next-line @eslint-react/no-use-context -- intentional useContext for older React support
+    // `useContext` keeps React 18 support; `use(Context)` is React 19+ only.
+    // eslint-disable-next-line @eslint-react/no-use-context -- intentional for React 18
     const header = useContext(HeaderContext)
 
     // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition

package/src/useTable.ts

@@ -1,6 +1,6 @@
 'use client'
 
-import { useEffect, useLayoutEffect, useMemo, useState } from 'react'
+import { useMemo, useState } from 'react'
 import { constructTable } from '@tanstack/table-core'
 import { shallow, useStore } from '@tanstack/react-store'
 import { FlexRender } from './FlexRender'
@@ -18,9 +18,6 @@ import type { FunctionComponent, ReactNode } from 'react'
 import type { FlexRenderProps } from './FlexRender'
 import type { SubscribeProps } from './Subscribe'
 
-const useIsomorphicLayoutEffect =
-  typeof window !== 'undefined' ? useLayoutEffect : useEffect
-
 export type ReactTable<
   TFeatures extends TableFeatures,
   TData extends RowData,
@@ -73,7 +70,10 @@ export type ReactTable<
    *
    * console.log(table.state.globalFilter)
    */
-  readonly state: Readonly<TSelected>
+  readonly state: Readonly<TSelected> & {
+    columns: TableOptions<TFeatures, TData>['columns']
+    data: TableOptions<TFeatures, TData>['data']
+  }
 }
 
 export function useTable<
@@ -109,20 +109,13 @@ export function useTable<
     ...tableOptions,
   }))
 
-  useIsomorphicLayoutEffect(() => {
-    // prevent race condition between table.setOptions and table.baseStore.setState
-    queueMicrotask(() => {
-      table.baseStore.setState((prev) => ({
-        ...prev,
-      }))
-    })
-  }, [
-    table.options.columns, // re-render when columns change
-    table.options.data, // re-render when data changes
-    table.options.state, // sync react state to the table store
-  ])
+  const selectorWithDataAndColumns = (state: TableState<TFeatures>) => ({
+    columns: tableOptions.columns,
+    data: tableOptions.data,
+    ...selector(state),
+  })
 
-  const state = useStore(table.store, selector, shallow)
+  const state = useStore(table.store, selectorWithDataAndColumns, shallow)
 
   return useMemo(
     () => ({
@@ -130,5 +123,5 @@ export function useTable<
       state,
     }),
     [state, table],
-  )
+  ) as ReactTable<TFeatures, TData, TSelected>
 }

package/dist/esm/FlexRender.d.ts

@@ -1,46 +0,0 @@
-import { default as React, ComponentType, JSX, ReactNode } from 'react';
-import { Cell, CellData, Header, RowData, TableFeatures } from '@tanstack/table-core';
-export 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())
- */
-export 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} />
- */
-export 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())
- * ```
- */
-export 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;

package/dist/esm/FlexRender.js

@@ -1,39 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-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);
-}
-function flexRender(Comp, props) {
-  return !Comp ? null : isReactComponent(Comp) ? /* @__PURE__ */ jsx(Comp, { ...props }) : Comp;
-}
-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;
-}
-export {
-  FlexRender,
-  flexRender
-};
-//# sourceMappingURL=FlexRender.js.map

package/dist/esm/FlexRender.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"FlexRender.js","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"],"names":[],"mappings":";AAYA,SAAS,iBACP,WACoC;AACpC,SACE,iBAAiB,SAAS,KAC1B,OAAO,cAAc,cACrB,kBAAkB,SAAS;AAE/B;AAEA,SAAS,iBAAiB,WAAgB;AACxC,SACE,OAAO,cAAc,eACpB,MAAM;AACL,UAAM,QAAQ,OAAO,eAAe,SAAS;AAC7C,WAAO,MAAM,aAAa,MAAM,UAAU;AAAA,EAC5C,GAAA;AAEJ;AAEA,SAAS,kBAAkB,WAAgB;AACzC,SACE,OAAO,cAAc,YACrB,OAAO,UAAU,aAAa,YAC9B,CAAC,cAAc,mBAAmB,EAAE,SAAS,UAAU,SAAS,WAAW;AAE/E;AAMO,SAAS,WACd,MACA,OACyB;AACzB,SAAO,CAAC,OAAO,OAAO,iBAAyB,IAAI,IACjD,oBAAC,MAAA,EAAM,GAAG,MAAA,CAAO,IAEjB;AAEJ;AA2CO,SAAS,WAId,OAAkD;AAClD,MAAI,UAAU,SAAS,MAAM,MAAM;AACjC,WAAO,WAAW,MAAM,KAAK,OAAO,UAAU,MAAM,MAAM,KAAK,YAAY;AAAA,EAC7E;AACA,MAAI,YAAY,SAAS,MAAM,QAAQ;AACrC,WAAO;AAAA,MACL,MAAM,OAAO,OAAO,UAAU;AAAA,MAC9B,MAAM,OAAO,WAAA;AAAA,IAAW;AAAA,EAE5B;AACA,MAAI,YAAY,SAAS,MAAM,QAAQ;AACrC,WAAO;AAAA,MACL,MAAM,OAAO,OAAO,UAAU;AAAA,MAC9B,MAAM,OAAO,WAAA;AAAA,IAAW;AAAA,EAE5B;AACA,SAAO;AACT;"}

package/dist/esm/Subscribe.d.ts

@@ -1,44 +0,0 @@
-import { NoInfer, RowData, Table, TableFeatures, TableState } from '@tanstack/table-core';
-import { FunctionComponent, ReactNode } from 'react';
-export 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>
- * ```
- */
-export declare function Subscribe<TFeatures extends TableFeatures, TData extends RowData, TSelected = {}>(props: SubscribeProps<TFeatures, TData, TSelected>): ReturnType<FunctionComponent>;

package/dist/esm/Subscribe.js

@@ -1,10 +0,0 @@
-"use client";
-import { useStore, shallow } from "@tanstack/react-store";
-function Subscribe(props) {
-  const selected = useStore(props.table.store, props.selector, shallow);
-  return typeof props.children === "function" ? props.children(selected) : props.children;
-}
-export {
-  Subscribe
-};
-//# sourceMappingURL=Subscribe.js.map

package/dist/esm/Subscribe.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Subscribe.js","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"],"names":[],"mappings":";;AA0DO;AAOL;AAEA;AAGF;;;;"}