TanStack / TanStack/table

`aggregatedCell` not typed against bound `cellComponents` in `createAppColumnHelper`

Open
#6,583 0 comments 0 reactions 0 assignees View on GitHub

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:

  1. Register a cellComponents map via createTableHook (e.g. { NumberCell }).
  2. Create a column with both cell and aggregatedCell, each destructuring cell and
    accessing cell.NumberCell.
  3. 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
  • 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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.