@tanstack/react-table 9.0.0-alpha.10 → 9.0.0-alpha.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/react-table",
-  "version": "9.0.0-alpha.10",
+  "version": "9.0.0-alpha.11",
   "description": "Headless UI for building powerful tables & datagrids for React.",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -22,40 +22,47 @@
   ],
   "type": "module",
   "types": "dist/esm/index.d.ts",
-  "main": "dist/cjs/index.cjs",
+  "main": "dist/esm/index.js",
   "module": "dist/esm/index.js",
   "exports": {
     ".": {
       "import": {
         "types": "./dist/esm/index.d.ts",
         "default": "./dist/esm/index.js"
-      },
-      "require": {
-        "types": "./dist/cjs/index.d.cts",
-        "default": "./dist/cjs/index.cjs"
       }
     },
     "./package.json": "./package.json"
   },
   "sideEffects": false,
   "engines": {
-    "node": ">=12"
+    "node": ">=16"
   },
   "files": [
     "dist",
     "src"
   ],
   "dependencies": {
-    "@tanstack/table-core": "9.0.0-alpha.10"
+    "@tanstack/react-store": "^0.8.0",
+    "@tanstack/table-core": "9.0.0-alpha.11"
   },
   "devDependencies": {
-    "@types/react": "^18.3.3",
-    "@vitejs/plugin-react": "^4.3.1",
-    "react": "^18.3.1"
+    "@eslint-react/eslint-plugin": "^2.7.4",
+    "@types/react": "^19.2.10",
+    "@vitejs/plugin-react": "^5.1.2",
+    "eslint-plugin-react-compiler": "19.1.0-rc.2",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "react": "^19.2.4"
   },
   "peerDependencies": {
-    "react": ">=16.8",
-    "react-dom": ">=16.8"
+    "react": ">=18"
   },
-  "scripts": {}
+  "scripts": {
+    "clean": "rimraf ./build && rimraf ./dist",
+    "test:eslint": "eslint ./src",
+    "test:lib": "vitest --passWithNoTests",
+    "test:lib:dev": "pnpm test:lib --watch",
+    "test:types": "tsc",
+    "test:build": "publint --strict",
+    "build": "vite build"
+  }
 }

package/src/FlexRender.tsx

@@ -0,0 +1,118 @@
+import React from 'react'
+import type {
+  Cell,
+  CellData,
+  Header,
+  RowData,
+  TableFeatures,
+} from '@tanstack/table-core'
+import type { ComponentType, JSX, ReactNode } from 'react'
+
+export type Renderable<TProps> = ReactNode | ComponentType<TProps>
+
+function isReactComponent<TProps>(
+  component: unknown,
+): component is ComponentType<TProps> {
+  return (
+    isClassComponent(component) ||
+    typeof component === 'function' ||
+    isExoticComponent(component)
+  )
+}
+
+function isClassComponent(component: any) {
+  return (
+    typeof component === 'function' &&
+    (() => {
+      const proto = Object.getPrototypeOf(component)
+      return proto.prototype && proto.prototype.isReactComponent
+    })()
+  )
+}
+
+function isExoticComponent(component: any) {
+  return (
+    typeof component === 'object' &&
+    typeof component.$$typeof === 'symbol' &&
+    ['react.memo', 'react.forward_ref'].includes(component.$$typeof.description)
+  )
+}
+
+/**
+ * If rendering headers, cells, or footers with custom markup, use flexRender instead of `cell.getValue()` or `cell.renderValue()`.
+ * @example flexRender(cell.column.columnDef.cell, cell.getContext())
+ */
+export function flexRender<TProps extends object>(
+  Comp: Renderable<TProps>,
+  props: TProps,
+): ReactNode | JSX.Element {
+  return !Comp ? null : isReactComponent<TProps>(Comp) ? (
+    <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 <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 function FlexRender<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+  TValue extends CellData = CellData,
+>(props: FlexRenderProps<TFeatures, TData, TValue>) {
+  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
+}

package/src/Subscribe.ts

@@ -0,0 +1,70 @@
+'use client'
+import { useStore } from '@tanstack/react-store'
+import type {
+  NoInfer,
+  RowData,
+  Table,
+  TableFeatures,
+  TableState,
+} from '@tanstack/table-core'
+import type { 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 function Subscribe<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+  TSelected = {},
+>(
+  props: SubscribeProps<TFeatures, TData, TSelected>,
+): ReturnType<FunctionComponent> {
+  const selected = useStore(props.table.store, props.selector)
+
+  return typeof props.children === 'function'
+    ? props.children(selected)
+    : props.children
+}