fix(react-table): type aggregatedCell against bound cellComponents in createAppColumnHelper

packages/react-table/src/createTableHook.tsx

@@ -97,11 +97,14 @@ export type AppColumnDefBase<
   THeaderComponents extends Record<string, ComponentType<any>>,
 > = Omit<
   IdentifiedColumnDef<TFeatures, TData, TValue>,
-  'cell' | 'header' | 'footer'
+  'cell' | 'aggregatedCell' | 'header' | 'footer'
 > & {
   cell?: AppColumnDefTemplate<
     AppCellContext<TFeatures, TData, TValue, TCellComponents>
   >
+  aggregatedCell?: AppColumnDefTemplate<
+    AppCellContext<TFeatures, TData, TValue, TCellComponents>
+  >
   header?: AppColumnDefTemplate<
     AppHeaderContext<TFeatures, TData, TValue, THeaderComponents>
   >
@@ -120,11 +123,14 @@ export type AppDisplayColumnDef<
   THeaderComponents extends Record<string, ComponentType<any>>,
 > = Omit<
   DisplayColumnDef<TFeatures, TData, unknown>,
-  'cell' | 'header' | 'footer'
+  'cell' | 'aggregatedCell' | 'header' | 'footer'
 > & {
   cell?: AppColumnDefTemplate<
     AppCellContext<TFeatures, TData, unknown, TCellComponents>
   >
+  aggregatedCell?: AppColumnDefTemplate<
+    AppCellContext<TFeatures, TData, unknown, TCellComponents>
+  >
   header?: AppColumnDefTemplate<
     AppHeaderContext<TFeatures, TData, unknown, THeaderComponents>
   >
@@ -143,11 +149,14 @@ export type AppGroupColumnDef<
   THeaderComponents extends Record<string, ComponentType<any>>,
 > = Omit<
   GroupColumnDef<TFeatures, TData, unknown>,
-  'cell' | 'header' | 'footer' | 'columns'
+  'cell' | 'aggregatedCell' | 'header' | 'footer' | 'columns'
 > & {
   cell?: AppColumnDefTemplate<
     AppCellContext<TFeatures, TData, unknown, TCellComponents>
   >
+  aggregatedCell?: AppColumnDefTemplate<
+    AppCellContext<TFeatures, TData, unknown, TCellComponents>
+  >
   header?: AppColumnDefTemplate<
     AppHeaderContext<TFeatures, TData, unknown, THeaderComponents>
   >
@@ -173,7 +182,7 @@ export type AppColumnHelper<
 > = {
   /**
    * Creates a data column definition with an accessor key or function.
-   * The cell, header, and footer contexts include pre-bound components.
+   * The cell, aggregatedCell, header, and footer contexts include pre-bound components.
    */
   accessor: <
     TAccessor extends AccessorFn<TData> | DeepKeys<TData>,
@@ -212,7 +221,7 @@ export type AppColumnHelper<
 
   /**
    * Creates a display column definition for non-data columns.
-   * The cell, header, and footer contexts include pre-bound components.
+   * The cell, aggregatedCell, header, and footer contexts include pre-bound components.
    */
   display: (
     column: AppDisplayColumnDef<
@@ -225,7 +234,7 @@ export type AppColumnHelper<
 
   /**
    * Creates a group column definition with nested child columns.
-   * The cell, header, and footer contexts include pre-bound components.
+   * The cell, aggregatedCell, header, and footer contexts include pre-bound components.
    */
   group: (
     column: AppGroupColumnDef<
@@ -725,7 +734,7 @@ export function createTableHook<
 
   /**
    * Create a column helper pre-bound to the features and components configured in this table hook.
-   * The cell, header, and footer contexts include pre-bound components (e.g., `cell.TextCell`).
+   * The cell, aggregatedCell, header, and footer contexts include pre-bound components (e.g., `cell.TextCell`).
    * @example
    * ```tsx
    * const columnHelper = createAppColumnHelper<Person>()

packages/react-table/tests/createAppColumnHelper.test-d.tsx

@@ -0,0 +1,60 @@
+// Type-level tests for `createAppColumnHelper`, checked by `test:types` (tsc).
+// Not executed by vitest (the `.test-d.` name is excluded from its run glob).
+
+import * as React from 'react'
+import { rowAggregationFeature, tableFeatures } from '@tanstack/table-core'
+import { test } from 'vitest'
+import { createTableHook, createTableHookContexts } from '../src'
+
+type Person = {
+  id: string
+  name: string
+}
+
+const features = tableFeatures({
+  rowAggregationFeature,
+})
+const contexts = createTableHookContexts<typeof features, Person>()
+
+function NameCell() {
+  const cell = contexts.useCellContext<string>()
+
+  return <span>{cell.getValue().toUpperCase()}</span>
+}
+
+const appTable = createTableHook({
+  features,
+  tableContext: contexts.tableContext,
+  cellContext: contexts.cellContext,
+  headerContext: contexts.headerContext,
+  cellComponents: { NameCell },
+})
+const columnHelper = appTable.createAppColumnHelper<Person>()
+
+test('aggregatedCell is bound to cellComponents like cell', () => {
+  columnHelper.accessor('name', {
+    id: 'name',
+    // The bound `cellComponents` are available on the cell context here...
+    cell: ({ cell }) => <cell.NameCell />,
+    // ...and must be equally available on the aggregatedCell context.
+    aggregatedCell: ({ cell }) => <cell.NameCell />,
+  })
+
+  columnHelper.display({
+    id: 'display',
+    cell: ({ cell }) => <cell.NameCell />,
+    aggregatedCell: ({ cell }) => <cell.NameCell />,
+  })
+
+  columnHelper.group({
+    id: 'group',
+    aggregatedCell: ({ cell }) => <cell.NameCell />,
+    columns: [],
+  })
+
+  columnHelper.accessor('name', {
+    id: 'guard',
+    // @ts-expect-error a component that was not registered is not bound
+    aggregatedCell: ({ cell }) => <cell.NotRegistered />,
+  })
+})