`aggregatedCell` not typed against bound `cellComponents` in `createAppColumnHelper`
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 28.4k
- Forks
- 3.6k
- Avg merge
- 1d 14h
- Merged PRs (30d)
- 10
Description
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
cellandaggregatedCell, each destructuringcelland
accessingcell.NumberCell. cell.NumberCelltype-checks insidecell, but TypeScript reports
"Property 'NumberCell' does not exist on type 'Cell<...>'" insideaggregatedCell.
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)
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
- I agree to follow this project's Code of Conduct
- I understand that if my bug cannot be reliable reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start in packages/react-table/src/createTableHook.tsx, especially AppColumnDefBase and the rowAggregationFeature ColumnDef_RowAggregation type, then reproduce the mismatch in the linked TypeScript playground. Verify that aggregatedCell receives the same bound cell component typing as cell, and add or run a focused type-checking test if the repository provides one.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Active
- Clarity
- Clearly specified
- Newbie friendliness
- 78/100