ColumnDef Type error of "Type 'AccessorKeyColumnDef<Reservation, number>' is not assignable to type 'ColumnDef<Reservation>'. in @tanstack/react-table

Question

I am getting a TypeError of Type 'AccessorKeyColumnDef<Reservation, number>' is not assignable to type 'ColumnDef<Reservation>' while trying to create a column in @tanstack/react-table.

Here is my code:

type Reservation ={
 id: number
 shift: string
 quantity: number
}

const columnHelper = createColumnHelper<Reservation>()

// This is the area where the error comes up, when defining columns
const columns = useMemo<ColumnDef<Reservation>[]>(
        () => [
            columnHelper.accessor('id', {
                header: () => 'S/N',
                cell: info => info.getValue(),
            }),
            columnHelper.accessor('shift', {
                header: 'Shift',
            }),

            columnHelper.accessor('quantity', {
                header: () => 'Quantity',
                cell: info => info.renderValue(),
            }),
        ],
        [],
    )

This what my data looks like

export const data = [
    {
        id: 1,
        shift: 'BREAKFAST',
        quantity: 1,
    },
{
        id: 2,
        shift: 'LUNCH',
        quantity: 4,
    }
    ...
]

This is the full error

Type 'AccessorKeyColumnDef<Reservation, number>' is not assignable to type 'ColumnDef<Reservation>'.
 Type 'AccessorKeyColumnDefBase<Reservation, number> & Partial<StringHeaderIdentifier>' is not assignable to type 'ColumnDef<Reservation>'.
   Type 'AccessorKeyColumnDefBase<Reservation, number> & Partial<StringHeaderIdentifier>' is not assignable to type 'AccessorKeyColumnDefBase<Reservation, unknown> & Partial<IdIdentifier<Reservation, unknown>>'.
      Type 'AccessorKeyColumnDefBase<Reservation, number> & Partial<StringHeaderIdentifier>' is not assignable to type 'AccessorKeyColumnDefBase<Reservation, unknown>'.
        Types of property 'footer' are incompatible.
          Type 'ColumnDefTemplate<HeaderContext<Reservation, number>> | undefined' is not assignable to type 'ColumnDefTemplate<HeaderContext<Reservation, unknown>> | undefined'.
            Type '(props: HeaderContext<Reservation, number>) => any' is not assignable to type 'ColumnDefTemplate<HeaderContext<Reservation, unknown>> | undefined'.

I've tried several types but none seems to work and I think this is happening because the cell value returned for each columnHelper.accessor has a varying type like number and string.

"@tanstack/react-table": "^8.20.1" "typescript": "^5"

Answer 1

You are having this issue because columnHelper returns a type for a specific field of the column and not the entire column type. As you said above some values are string while the other is a number. You could have several more types that are being returned.

You can get rid of this TypeScript issue by casting the column definition arrays as follows:

const columns = useMemo<ColumnDef<Reservation>[]>(
        () => [
            columnHelper.accessor('id', {
                header: () => 'S/N',
                cell: info => info.getValue(),
            }),
            columnHelper.accessor('shift', {
                header: 'Shift',
            }),

            columnHelper.accessor('quantity', {
                header: () => 'Quantity',
                cell: info => info.renderValue(),
            }),
        ] as Array<ColumnDef<Reservation, unknown>>,
        [],
    )

You can check out this GitHub issue for more context as to why this is happening: https://github.com/TanStack/table/issues/4302