fix: type aggregatedCell against bound cellComponents in createAppColumnHelper

.changeset/bound-aggregated-cell-components.md

@@ -0,0 +1,12 @@
+---
+'@tanstack/angular-table': patch
+'@tanstack/lit-table': patch
+'@tanstack/octane-table': patch
+'@tanstack/preact-table': patch
+'@tanstack/react-table': patch
+'@tanstack/solid-table': patch
+'@tanstack/svelte-table': patch
+'@tanstack/vue-table': patch
+---
+
+Type `aggregatedCell` against bound `cellComponents` in `createAppColumnHelper`, matching `cell`.

packages/angular-table/src/helpers/createTableHook.ts

@@ -85,7 +85,8 @@ export type AppColumnDefTemplate<TProps extends object> =
   string | ((props: TProps) => any)
 
 /**
- * Enhanced column definition base with pre-bound components in cell/header/footer contexts.
+ * Enhanced column definition base with pre-bound components in
+ * cell/aggregatedCell/header/footer contexts.
  */
 export type AppColumnDefBase<
   TFeatures extends TableFeatures,
@@ -95,11 +96,14 @@ export type AppColumnDefBase<
   THeaderComponents extends Record<string, RenderableComponent>,
 > = 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>
   >
@@ -118,11 +122,14 @@ export type AppDisplayColumnDef<
   THeaderComponents extends Record<string, RenderableComponent>,
 > = 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>
   >
@@ -141,11 +148,14 @@ export type AppGroupColumnDef<
   THeaderComponents extends Record<string, RenderableComponent>,
 > = 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>
   >

packages/lit-table/src/createTableHook.ts

@@ -92,7 +92,8 @@ export type AppColumnDefTemplate<TProps extends object> =
   string | ((props: TProps) => any)
 
 /**
- * Enhanced column definition base with pre-bound components in cell/header/footer contexts.
+ * Enhanced column definition base with pre-bound components in
+ * cell/aggregatedCell/header/footer contexts.
  */
 export type AppColumnDefBase<
   TFeatures extends TableFeatures,
@@ -102,11 +103,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>
   >
@@ -125,11 +129,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>
   >
@@ -148,11 +155,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>
   >

packages/octane-table/src/types.ts

@@ -377,7 +377,7 @@ export type AppColumnDefTemplate<TProps extends object> =
 
 /**
  * Enhanced column definition base with pre-bound components in
- * cell/header/footer contexts.
+ * cell/aggregatedCell/header/footer contexts.
  */
 export type AppColumnDefBase<
   TFeatures extends TableFeatures,
@@ -387,11 +387,14 @@ export type AppColumnDefBase<
   THeaderComponents extends Record<string, TableComponentType>,
 > = 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>
   >
@@ -410,11 +413,14 @@ export type AppDisplayColumnDef<
   THeaderComponents extends Record<string, TableComponentType>,
 > = 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>
   >
@@ -433,11 +439,14 @@ export type AppGroupColumnDef<
   THeaderComponents extends Record<string, TableComponentType>,
 > = 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>
   >

packages/preact-table/src/createTableHook.tsx

@@ -84,7 +84,8 @@ export type AppColumnDefTemplate<TProps extends object> =
   string | ((props: TProps) => any)
 
 /**
- * Enhanced column definition base with pre-bound components in cell/header/footer contexts.
+ * Enhanced column definition base with pre-bound components in
+ * cell/aggregatedCell/header/footer contexts.
  */
 export type AppColumnDefBase<
   TFeatures extends TableFeatures,
@@ -94,11 +95,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>
   >
@@ -117,11 +121,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>
   >
@@ -140,11 +147,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>
   >

packages/react-table/src/createTableHook.tsx

@@ -87,7 +87,8 @@ export type AppColumnDefTemplate<TProps extends object> =
   string | ((props: TProps) => any)
 
 /**
- * Enhanced column definition base with pre-bound components in cell/header/footer contexts.
+ * Enhanced column definition base with pre-bound components in
+ * cell/aggregatedCell/header/footer contexts.
  */
 export type AppColumnDefBase<
   TFeatures extends TableFeatures,
@@ -97,11 +98,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 +124,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 +150,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>
   >

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

@@ -0,0 +1,57 @@
+// 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 { 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>()
+
+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 />,
+})