TanStack Table version
v9.2.4
Framework/Library version
React v19.2.6
Describe the bug and the steps to reproduce it
createTableHook's AppColumnDefBase enhances cell/header/footer with the
registered cellComponents/headerComponents, via:
Omit<IdentifiedColumnDef<...>, 'cell' | 'header' | 'footer'> & { cell?: ..., header?: ..., footer?: ... }
aggregatedCell (added by rowAggregationFeature's ColumnDef_RowAggregation) is not
included in that Omit list, so it stays typed against the plain, unenhanced CellContext.
Accessing a bound cell component works fine inside cell on a column, but fails inside
aggregatedCell on the exact same column.
Steps to reproduce:
- Register a cellComponents map via createTableHook (e.g.
{ NumberCell }).
- Create a column with both
cell and aggregatedCell, each destructuring cell and
accessing cell.NumberCell.
cell.NumberCell type-checks inside cell, but TypeScript reports
"Property 'NumberCell' does not exist on type 'Cell<...>'" inside aggregatedCell.
Confirmed by reading packages/react-table/src/createTableHook.tsx directly (not just from
the compiled .d.ts) — AppColumnDefBase's Omit list is 'cell' | 'header' | 'footer' only.
Your Minimal, Reproducible Example - (Sandbox Highly Recommended)
https://www.typescriptlang.org/play/?#code/JYWwDg9gTgLgBAbwFBzgYygUwIY0wFWwCMAbTACQggGsAaFOGYsgMRxgFcsBne1KCAHcAggHNRWUbmAQAdm1xdMfdBBIcQsgOICOYYLNELOWFRnaYdEPZgAmAJSEBZCLcwkV2cZOlyWsgH0QHFkkAF84ADMBEDgAcgABJlluJjRqAHosbDQYAFomUkw4pCQYAE8wTDhHQTgAXkQ4CWswAC44VKgDUQBuOAA3bHVMDtkNIkwoODDSyI5ZXJlZOAA5CamAYXcSAAoASkQGLBMV8ZIScNK0OVSo9iVuBsZmTGNH3eR+ITEJTCkYMt3qYGDd1JorHoesDlAwWjYHM5XO4OuZcJZdFVEYIXG49vtPN5-r55CkOgg4MFsLIOl4-gCgYEqStZmF9tdbvAKWi8MIwGBNmoNLJyO4qtMIo0eQRXpQaJ8GJEHjwzDtBeA5JhZDBuOS1hsoNsLjNwuykDcUvAABZiqbPaV8gVCzSikjigA8tQAfAdSja3VMAHQ5NCYbjcaC7OJDEZxWhHVDAWwdaPDDjFVUXDqfdA7GaHepe3MXQPrECTQ07eMZDJwADyAGkGHSfIC-DT4sy482iQC7EaSNnuXm2Q0i6GS2WKwPTUggA
Screenshots or Videos (Optional)
No response
Do you intend to try to help solve this bug with your own PR?
export function createAppColumnHelper<TData extends RowData>() {
const helper = createRawColumnHelper<TData>()
function accessor<
TAccessor extends AccessorFn<TData> | DeepKeys<TData>,
TValue extends TAccessor extends AccessorFn<TData, infer TReturn>
? TReturn
: TAccessor extends DeepKeys<TData>
? DeepValue<TData, TAccessor>
: never
>(
accessorArg: TAccessor,
column: Omit<
AppColumnDefBase<typeof appFeatures, TData, TValue, CellComponents, HeaderComponents>,
'aggregatedCell'
> & {
aggregatedCell?: AggregatedCellRender<TData, any>
} & (TAccessor extends AccessorFn<TData> ? { id: string } : {})
): TAccessor extends AccessorFn<TData>
? AccessorFnColumnDef<typeof appFeatures, TData, TValue>
: AccessorKeyColumnDef<typeof appFeatures, TData, TValue> {
const { aggregatedCell, ...rest } = column
return helper.accessor(
accessorArg as never,
{
...rest,
...(typeof aggregatedCell === 'function'
? {
aggregatedCell: (ctx: CellContext<typeof appFeatures, TData, TValue>) =>
aggregatedCell(
ctx as unknown as AppCellContext<
typeof appFeatures,
TData,
any,
CellComponents
>
)
}
: { aggregatedCell })
} as never
) as never
}
return { ...helper, accessor }
}
Terms & Code of Conduct
TanStack Table version
v9.2.4
Framework/Library version
React v19.2.6
Describe the bug and the steps to reproduce it
createTableHook'sAppColumnDefBaseenhancescell/header/footerwith theregistered
cellComponents/headerComponents, via:Omit<IdentifiedColumnDef<...>, 'cell' | 'header' | 'footer'> & { cell?: ..., header?: ..., footer?: ... }
aggregatedCell(added byrowAggregationFeature'sColumnDef_RowAggregation) is notincluded in that Omit list, so it stays typed against the plain, unenhanced
CellContext.Accessing a bound cell component works fine inside
cellon a column, but fails insideaggregatedCellon the exact same column.Steps to reproduce:
{ NumberCell }).cellandaggregatedCell, each destructuringcellandaccessing
cell.NumberCell.cell.NumberCelltype-checks insidecell, but TypeScript reports"Property 'NumberCell' does not exist on type 'Cell<...>'" inside
aggregatedCell.Confirmed by reading packages/react-table/src/createTableHook.tsx directly (not just from
the compiled .d.ts) — AppColumnDefBase's Omit list is
'cell' | 'header' | 'footer'only.Your Minimal, Reproducible Example - (Sandbox Highly Recommended)
https://www.typescriptlang.org/play/?#code/JYWwDg9gTgLgBAbwFBzgYygUwIY0wFWwCMAbTACQggGsAaFOGYsgMRxgFcsBne1KCAHcAggHNRWUbmAQAdm1xdMfdBBIcQsgOICOYYLNELOWFRnaYdEPZgAmAJSEBZCLcwkV2cZOlyWsgH0QHFkkAF84ADMBEDgAcgABJlluJjRqAHosbDQYAFomUkw4pCQYAE8wTDhHQTgAXkQ4CWswAC44VKgDUQBuOAA3bHVMDtkNIkwoODDSyI5ZXJlZOAA5CamAYXcSAAoASkQGLBMV8ZIScNK0OVSo9iVuBsZmTGNH3eR+ITEJTCkYMt3qYGDd1JorHoesDlAwWjYHM5XO4OuZcJZdFVEYIXG49vtPN5-r55CkOgg4MFsLIOl4-gCgYEqStZmF9tdbvAKWi8MIwGBNmoNLJyO4qtMIo0eQRXpQaJ8GJEHjwzDtBeA5JhZDBuOS1hsoNsLjNwuykDcUvAABZiqbPaV8gVCzSikjigA8tQAfAdSja3VMAHQ5NCYbjcaC7OJDEZxWhHVDAWwdaPDDjFVUXDqfdA7GaHepe3MXQPrECTQ07eMZDJwADyAGkGHSfIC-DT4sy482iQC7EaSNnuXm2Q0i6GS2WKwPTUggA
Screenshots or Videos (Optional)
No response
Do you intend to try to help solve this bug with your own PR?
Terms & Code of Conduct