@tanstack/react-table 9.0.0-alpha.46 → 9.0.0-alpha.48

package/README.md

@@ -49,6 +49,16 @@ A headless table library for building powerful datagrids with full control over
 
 ### <a href="https://tanstack.com/table">Read the Docs →</a>
 
+## Using an AI Coding Agent?
+
+TanStack Table ships [TanStack Intent](https://github.com/TanStack/intent) skills inside each adapter package. After installing the library, run:
+
+```sh
+npx @tanstack/intent@latest install
+```
+
+to add skill-loading guidance for your agent (Claude Code, Cursor, Copilot, etc.). The same CLI also exposes `intent list` to browse available skills and `intent load <skill>` to print one for inspection. Skills version with the library — your agent gets guidance that matches the version of `@tanstack/<framework>-table` you installed. Only available for v9 and above.
+
 ## Get Involved
 
 - We welcome issues and pull requests!

package/dist/FlexRender.cjs.map

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

package/dist/FlexRender.js.map

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

package/dist/reactivity.cjs

@@ -11,6 +11,7 @@ let _tanstack_react_store = require("@tanstack/react-store");
 function reactReactivity() {
 	return {
 		createOptionsStore: false,
+		schedule: (fn) => queueMicrotask(fn),
 		batch: _tanstack_react_store.batch,
 		untrack: (fn) => fn(),
 		createReadonlyAtom: (fn, options) => {

package/dist/reactivity.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"reactivity.cjs","names":[],"sources":["../src/reactivity.ts"],"sourcesContent":["import { batch, createAtom } from '@tanstack/react-store'\nimport type {\n  TableAtomOptions,\n  TableReactivityBindings,\n} from '@tanstack/table-core/reactivity'\n\n/**\n * Creates the table-core reactivity bindings used by the React adapter.\n *\n * React stores table state in TanStack Store atoms and leaves options as plain\n * resolved data because `useTable` synchronizes options during render.\n */\nexport function reactReactivity(): TableReactivityBindings {\n  return {\n    createOptionsStore: false,\n    batch,\n    untrack: (fn) => fn(),\n    createReadonlyAtom: <T>(fn: () => T, options?: TableAtomOptions<T>) => {\n      return createAtom(() => fn(), {\n        compare: options?.compare,\n      })\n    },\n    createWritableAtom: <T>(value: T, options?: TableAtomOptions<T>) => {\n      return createAtom(value, {\n        compare: options?.compare,\n      })\n    },\n  }\n}\n"],"mappings":";;;;;;;;;;AAYA,SAAgB,kBAA2C;CACzD,OAAO;EACL,oBAAoB;EACpB;EACA,UAAU,OAAO,IAAI;EACrB,qBAAwB,IAAa,YAAkC;GACrE,mDAAwB,IAAI,EAAE,EAC5B,2DAAS,QAAS,SACnB,CAAC;;EAEJ,qBAAwB,OAAU,YAAkC;GAClE,6CAAkB,OAAO,EACvB,2DAAS,QAAS,SACnB,CAAC;;EAEL"}
+{"version":3,"file":"reactivity.cjs","names":[],"sources":["../src/reactivity.ts"],"sourcesContent":["import { batch, createAtom } from '@tanstack/react-store'\nimport type {\n  TableAtomOptions,\n  TableReactivityBindings,\n} from '@tanstack/table-core/reactivity'\n\n/**\n * Creates the table-core reactivity bindings used by the React adapter.\n *\n * React stores table state in TanStack Store atoms and leaves options as plain\n * resolved data because `useTable` synchronizes options during render.\n */\nexport function reactReactivity(): TableReactivityBindings {\n  return {\n    createOptionsStore: false,\n    schedule: (fn) => queueMicrotask(fn),\n    batch,\n    untrack: (fn) => fn(),\n    createReadonlyAtom: <T>(fn: () => T, options?: TableAtomOptions<T>) => {\n      return createAtom(() => fn(), {\n        compare: options?.compare,\n      })\n    },\n    createWritableAtom: <T>(value: T, options?: TableAtomOptions<T>) => {\n      return createAtom(value, {\n        compare: options?.compare,\n      })\n    },\n  }\n}\n"],"mappings":";;;;;;;;;;AAYA,SAAgB,kBAA2C;CACzD,OAAO;EACL,oBAAoB;EACpB,WAAW,OAAO,eAAe,GAAG;EACpC;EACA,UAAU,OAAO,IAAI;EACrB,qBAAwB,IAAa,YAAkC;GACrE,mDAAwB,IAAI,EAAE,EAC5B,2DAAS,QAAS,SACnB,CAAC;;EAEJ,qBAAwB,OAAU,YAAkC;GAClE,6CAAkB,OAAO,EACvB,2DAAS,QAAS,SACnB,CAAC;;EAEL"}

package/dist/reactivity.js

@@ -10,6 +10,7 @@ import { batch, createAtom } from "@tanstack/react-store";
 function reactReactivity() {
 	return {
 		createOptionsStore: false,
+		schedule: (fn) => queueMicrotask(fn),
 		batch,
 		untrack: (fn) => fn(),
 		createReadonlyAtom: (fn, options) => {

package/dist/reactivity.js.map

@@ -1 +1 @@
-{"version":3,"file":"reactivity.js","names":[],"sources":["../src/reactivity.ts"],"sourcesContent":["import { batch, createAtom } from '@tanstack/react-store'\nimport type {\n  TableAtomOptions,\n  TableReactivityBindings,\n} from '@tanstack/table-core/reactivity'\n\n/**\n * Creates the table-core reactivity bindings used by the React adapter.\n *\n * React stores table state in TanStack Store atoms and leaves options as plain\n * resolved data because `useTable` synchronizes options during render.\n */\nexport function reactReactivity(): TableReactivityBindings {\n  return {\n    createOptionsStore: false,\n    batch,\n    untrack: (fn) => fn(),\n    createReadonlyAtom: <T>(fn: () => T, options?: TableAtomOptions<T>) => {\n      return createAtom(() => fn(), {\n        compare: options?.compare,\n      })\n    },\n    createWritableAtom: <T>(value: T, options?: TableAtomOptions<T>) => {\n      return createAtom(value, {\n        compare: options?.compare,\n      })\n    },\n  }\n}\n"],"mappings":";;;;;;;;;AAYA,SAAgB,kBAA2C;CACzD,OAAO;EACL,oBAAoB;EACpB;EACA,UAAU,OAAO,IAAI;EACrB,qBAAwB,IAAa,YAAkC;GACrE,OAAO,iBAAiB,IAAI,EAAE,EAC5B,2DAAS,QAAS,SACnB,CAAC;;EAEJ,qBAAwB,OAAU,YAAkC;GAClE,OAAO,WAAW,OAAO,EACvB,2DAAS,QAAS,SACnB,CAAC;;EAEL"}
+{"version":3,"file":"reactivity.js","names":[],"sources":["../src/reactivity.ts"],"sourcesContent":["import { batch, createAtom } from '@tanstack/react-store'\nimport type {\n  TableAtomOptions,\n  TableReactivityBindings,\n} from '@tanstack/table-core/reactivity'\n\n/**\n * Creates the table-core reactivity bindings used by the React adapter.\n *\n * React stores table state in TanStack Store atoms and leaves options as plain\n * resolved data because `useTable` synchronizes options during render.\n */\nexport function reactReactivity(): TableReactivityBindings {\n  return {\n    createOptionsStore: false,\n    schedule: (fn) => queueMicrotask(fn),\n    batch,\n    untrack: (fn) => fn(),\n    createReadonlyAtom: <T>(fn: () => T, options?: TableAtomOptions<T>) => {\n      return createAtom(() => fn(), {\n        compare: options?.compare,\n      })\n    },\n    createWritableAtom: <T>(value: T, options?: TableAtomOptions<T>) => {\n      return createAtom(value, {\n        compare: options?.compare,\n      })\n    },\n  }\n}\n"],"mappings":";;;;;;;;;AAYA,SAAgB,kBAA2C;CACzD,OAAO;EACL,oBAAoB;EACpB,WAAW,OAAO,eAAe,GAAG;EACpC;EACA,UAAU,OAAO,IAAI;EACrB,qBAAwB,IAAa,YAAkC;GACrE,OAAO,iBAAiB,IAAI,EAAE,EAC5B,2DAAS,QAAS,SACnB,CAAC;;EAEJ,qBAAwB,OAAU,YAAkC;GAClE,OAAO,WAAW,OAAO,EACvB,2DAAS,QAAS,SACnB,CAAC;;EAEL"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/react-table",
-  "version": "9.0.0-alpha.46",
+  "version": "9.0.0-alpha.48",
   "description": "Headless UI for building powerful tables & datagrids for React.",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -18,7 +18,8 @@
     "react",
     "table",
     "react-table",
-    "datagrid"
+    "datagrid",
+    "tanstack-intent"
   ],
   "type": "module",
   "types": "./dist/index.d.cts",
@@ -49,11 +50,12 @@
   },
   "files": [
     "dist",
-    "src"
+    "src",
+    "skills"
   ],
   "dependencies": {
     "@tanstack/react-store": "^0.11.0",
-    "@tanstack/table-core": "9.0.0-alpha.46"
+    "@tanstack/table-core": "9.0.0-alpha.48"
   },
   "devDependencies": {
     "@eslint-react/eslint-plugin": "^5.7.7",

package/skills/react/client-to-server/SKILL.md

@@ -0,0 +1,377 @@
+---
+name: react/client-to-server
+description: >
+  Convert a client-side `@tanstack/react-table` v9 table to server-side
+  (manual modes). Pass server-paginated/sorted/filtered rows as `data`, set
+  `manualPagination` / `manualSorting` / `manualFiltering` / `manualGrouping` /
+  `manualExpanding` for whatever the server now owns, supply `rowCount` so
+  `getPageCount()` works, and DROP the matching `_rowModels` entry (no
+  `paginatedRowModel` if the server paginates). Own the relevant state slices
+  via external atoms (`useCreateAtom` + `options.atoms`) so a query can key on
+  the slice and refetch automatically — OR via classic `state` + `on*Change`
+  controlled state.
+type: lifecycle
+library: tanstack-table
+framework: react
+library_version: '9.0.0-alpha.47'
+requires:
+  - state-management
+  - pagination
+  - filtering
+  - sorting
+  - react/table-state
+sources:
+  - TanStack/table:examples/react/basic-external-atoms/src/main.tsx
+  - TanStack/table:examples/react/with-tanstack-query/src/main.tsx
+  - TanStack/table:examples/react/with-tanstack-query/src/fetchData.ts
+---
+
+This skill builds on `tanstack-table/state-management` and `tanstack-table/react/table-state`. Read those first — the atom model is what makes the cleanest server-side wiring possible.
+
+## Why "client-to-server"
+
+A client-side table sees every row, sorts/filters/paginates them locally, and renders a slice. A server-side table sees only the slice the server returned for the current request; the table must be told "don't try to slice this again — and here's the total row count so you can render a pager".
+
+Four moves convert any client table to a server table:
+
+1. **`manualX: true`** for whichever operations the server owns.
+2. **Drop the matching factory** from `_rowModels` so it doesn't ship in your bundle.
+3. **Provide `rowCount`** so `table.getPageCount()` / `getCanNextPage()` work.
+4. **Own the slice state externally** so your data fetcher can key on it.
+
+## Setup
+
+Two state-ownership patterns work; pick one per slice.
+
+### Pattern A — external atom (cleanest with Query/SWR)
+
+```tsx
+import * as React from 'react'
+import { useCreateAtom, useSelector } from '@tanstack/react-store'
+import {
+  useTable,
+  tableFeatures,
+  rowPaginationFeature,
+  createColumnHelper,
+} from '@tanstack/react-table'
+import type { PaginationState } from '@tanstack/react-table'
+
+const _features = tableFeatures({ rowPaginationFeature })
+const columnHelper = createColumnHelper<typeof _features, Person>()
+const columns = columnHelper.columns([
+  columnHelper.accessor('firstName', { header: 'First' }),
+  columnHelper.accessor('age', { header: 'Age' }),
+])
+
+const EMPTY: Person[] = []
+
+function ServerTable() {
+  // 1) Own pagination in an external atom.
+  const paginationAtom = useCreateAtom<PaginationState>({
+    pageIndex: 0,
+    pageSize: 10,
+  })
+  const pagination = useSelector(paginationAtom)
+
+  // 2) Fetch keyed on the atom value.
+  const [serverPage, setServerPage] = React.useState<{
+    rows: Person[]
+    rowCount: number
+  } | null>(null)
+  React.useEffect(() => {
+    let cancelled = false
+    fetchPeople(pagination).then((page) => {
+      if (!cancelled) setServerPage(page)
+    })
+    return () => {
+      cancelled = true
+    }
+  }, [pagination])
+
+  // 3) Manual pagination + rowCount. No paginatedRowModel in _rowModels.
+  const table = useTable({
+    _features,
+    _rowModels: {}, // core only — server slices
+    columns,
+    data: serverPage?.rows ?? EMPTY, // EMPTY at module scope
+    rowCount: serverPage?.rowCount,
+    atoms: { pagination: paginationAtom }, // table writes here directly
+    manualPagination: true,
+  })
+  // No onPaginationChange — table.setPageIndex(...) writes through the atom.
+}
+```
+
+Source: `examples/react/basic-external-atoms/src/main.tsx` (atoms wiring); `examples/react/with-tanstack-query/src/main.tsx` (rowCount + manualPagination).
+
+### Pattern B — classic `state` + `on*Change`
+
+```tsx
+const [pagination, setPagination] = React.useState<PaginationState>({
+  pageIndex: 0,
+  pageSize: 10,
+})
+
+const table = useTable({
+  _features,
+  _rowModels: {},
+  columns,
+  data: serverPage?.rows ?? EMPTY,
+  rowCount: serverPage?.rowCount,
+  state: { pagination },
+  onPaginationChange: setPagination, // REQUIRED with state.pagination
+  manualPagination: true,
+})
+```
+
+Both work. `state` + `on*Change` is familiar from v8; atoms compose more cleanly with Query (the table writes to the atom, the query key includes the atom value, the query refetches automatically).
+
+## Core Patterns
+
+### Combining server-side sort + filter + pagination
+
+Add the matching `manual*` flags for each operation the server now owns. Local features (column visibility, ordering, pinning) still work because they don't depend on the row model.
+
+```tsx
+const _features = tableFeatures({
+  rowSortingFeature,
+  rowPaginationFeature,
+  columnFilteringFeature,
+  columnVisibilityFeature, // still local
+  columnPinningFeature, // still local
+})
+
+const sortingAtom = useCreateAtom<SortingState>([])
+const paginationAtom = useCreateAtom<PaginationState>({
+  pageIndex: 0,
+  pageSize: 10,
+})
+const columnFiltersAtom = useCreateAtom<ColumnFiltersState>([])
+
+const sorting = useSelector(sortingAtom)
+const pagination = useSelector(paginationAtom)
+const columnFilters = useSelector(columnFiltersAtom)
+
+const serverArgs = { sorting, pagination, columnFilters }
+// ... fetch keyed on serverArgs
+
+const table = useTable({
+  _features,
+  _rowModels: {}, // no sorted/filtered/paginated factories — server owns them
+  columns,
+  data: serverPage?.rows ?? EMPTY,
+  rowCount: serverPage?.rowCount,
+  atoms: {
+    sorting: sortingAtom,
+    pagination: paginationAtom,
+    columnFilters: columnFiltersAtom,
+  },
+  manualSorting: true,
+  manualFiltering: true,
+  manualPagination: true,
+})
+```
+
+Source: `examples/react/basic-external-atoms/src/main.tsx`.
+
+### When NOT to manual-mode a slice
+
+If the server returns the **entire** dataset, leave the table client-side. Manual mode is for slices the server has already trimmed.
+
+## Common Mistakes
+
+### CRITICAL Forgetting `manualPagination` / `manualSorting` / `manualFiltering`
+
+Wrong:
+
+```tsx
+const table = useTable({
+  _features,
+  _rowModels: { paginatedRowModel: createPaginatedRowModel() },
+  columns,
+  data: serverPage.rows,
+  // missing manualPagination
+})
+```
+
+Correct:
+
+```tsx
+const table = useTable({
+  _features,
+  _rowModels: {}, // dropped — server paginates
+  columns,
+  data: serverPage.rows,
+  rowCount: serverPage.rowCount,
+  manualPagination: true,
+})
+```
+
+Without `manualPagination: true`, the table tries to slice the already-server-sliced page a second time, producing rows that don't exist (or visibly wrong pagination).
+Source: `examples/react/with-tanstack-query/src/main.tsx`.
+
+### CRITICAL Missing `rowCount`
+
+Wrong:
+
+```tsx
+const table = useTable({
+  _features,
+  _rowModels: {},
+  columns,
+  data: serverPage.rows,
+  manualPagination: true,
+  // missing rowCount: serverPage.totalRowCount
+})
+// table.getPageCount() → 1, pager locks at "Page 1 of 1"
+```
+
+Correct:
+
+```tsx
+const table = useTable({
+  _features,
+  _rowModels: {},
+  columns,
+  data: serverPage.rows,
+  rowCount: serverPage.rowCount, // ← required for accurate pager
+  manualPagination: true,
+})
+```
+
+Without `rowCount`, `getPageCount()` falls back to `Math.ceil(data.length / pageSize)` — which is 1 if the server returned a single page.
+Source: `examples/react/with-tanstack-query/src/main.tsx`.
+
+### HIGH `state.pagination` without `onPaginationChange`
+
+Wrong:
+
+```tsx
+const [pagination] = React.useState<PaginationState>({
+  pageIndex: 0,
+  pageSize: 10,
+})
+useTable({
+  _features,
+  _rowModels: {},
+  columns,
+  data,
+  state: { pagination },
+  // missing onPaginationChange — table.setPageIndex is a no-op
+  manualPagination: true,
+})
+```
+
+Correct:
+
+```tsx
+const [pagination, setPagination] = React.useState<PaginationState>({
+  pageIndex: 0,
+  pageSize: 10,
+})
+useTable({
+  _features,
+  _rowModels: {},
+  columns,
+  data,
+  state: { pagination },
+  onPaginationChange: setPagination, // ← required
+  manualPagination: true,
+})
+// OR — use atoms.pagination instead, which doesn't need a writeback handler.
+```
+
+The library treats `state` as controlled; without a writeback handler, `table.setPageIndex(...)` writes nowhere.
+Source: `docs/framework/react/guide/table-state.md`.
+
+### HIGH Leaving `paginatedRowModel` registered for a server-paginated table
+
+Wrong:
+
+```tsx
+useTable({
+  _features,
+  _rowModels: { paginatedRowModel: createPaginatedRowModel() }, // ships for nothing
+  columns,
+  data: serverPage.rows,
+  manualPagination: true,
+})
+```
+
+Correct:
+
+```tsx
+useTable({
+  _features,
+  _rowModels: {}, // drop it — server owns pagination
+  columns,
+  data: serverPage.rows,
+  rowCount: serverPage.rowCount,
+  manualPagination: true,
+})
+```
+
+The factory ships in your bundle for no reason. Manual mode + the factory will also let the factory re-slice your already-sliced server page if `manualPagination` is ever flipped off.
+Source: maintainer guidance.
+
+### HIGH Mixing `state.X` and `atoms.X` for the same slice
+
+Wrong:
+
+```tsx
+useTable({
+  _features,
+  _rowModels: {},
+  columns,
+  data,
+  state: { pagination }, // silently ignored
+  onPaginationChange: setPagination, // silently ignored
+  atoms: { pagination: paginationAtom }, // wins
+  manualPagination: true,
+})
+```
+
+Correct:
+
+```tsx
+// Pick one ownership mechanism per slice.
+useTable({
+  _features,
+  _rowModels: {},
+  columns,
+  data,
+  atoms: { pagination: paginationAtom },
+  manualPagination: true,
+})
+```
+
+Precedence is `options.atoms[key]` > `options.state[key]` > internal. The `state` plumbing is dead code in this configuration.
+Source: `examples/react/basic-external-atoms/src/main.tsx`.
+
+### MEDIUM Recreating `data` array identity in JSX
+
+Wrong:
+
+```tsx
+<MyTable data={query.data?.rows ?? []} columns={columns} />
+// `?? []` produces a new array reference each render → internal memos bust
+```
+
+Correct:
+
+```tsx
+const EMPTY: Person[] = []   // module scope
+
+<MyTable data={query.data?.rows ?? EMPTY} columns={columns} />
+// or wrap in useMemo
+```
+
+Internal memoization keys off identity. A fresh `[]` each render bypasses memos and may force re-computation.
+Source: maintainer guidance; `examples/react/with-tanstack-query/src/main.tsx`.
+
+## See Also
+
+- `tanstack-table/react/compose-with-tanstack-query` — the canonical Query + server-side pattern.
+- `tanstack-table/react/compose-with-tanstack-store` — sharing slice atoms across components.
+- `tanstack-table/react/table-state` — selectors, `<Subscribe>`, external atoms.
+- `tanstack-table/react/production-readiness` — when to narrow selectors as the table grows.