TS2322: Type 'ColumnDef<Product, string>' is not assignable to type 'ColumnDef<Product, unknown>'.

[vresetnikov]

Hello,

I am using "@tanstack/react-table": "^8.5.11", "typescript": "^4.7.4" and I am trying to build a correctly typed column array by following the example on the official docs: https://tanstack.com/table/v8/docs/guide/column-defs

Having faithfully followed the code in the docs this is what I have:

import {ColumnDef, createColumnHelper} from "@tanstack/react-table";

type Product = {
    name: string;
}


const columnHelper = createColumnHelper<Product>();

export const productTableColumns: ColumnDef<Product>[] = [

    columnHelper.accessor('name', {
        cell: info => info.getValue(),
        header: () => 'Name',
    }),
]

However, the code above will produce the following TS error:

TS2322: Type 'ColumnDef<Product, string>' is not assignable to type 'ColumnDef<Product, unknown>'.   Type '{ footer?: ColumnDefTemplate<HeaderContext<Product, string>> | undefined; cell?: ColumnDefTemplate<CellContext<Product, string>> | undefined; meta?: ColumnMeta<...> | undefined; } & ... 6 more ... & StringHeaderIdentifier' is not assignable to type 'ColumnDef<Product, unknown>'.     Type '{ footer?: ColumnDefTemplate<HeaderContext<Product, string>> | undefined; cell?: ColumnDefTemplate<CellContext<Product, string>> | undefined; meta?: ColumnMeta<...> | undefined; } & ... 6 more ... & StringHeaderIdentifier' is not assignable to type '{ footer?: ColumnDefTemplate<HeaderContext<Product, unknown>> | undefined; cell?: ColumnDefTemplate<CellContext<Product, unknown>> | undefined; meta?: ColumnMeta<...> | undefined; } & ... 7 more ... & { ...; }'.       Type '{ footer?: ColumnDefTemplate<HeaderContext<Product, string>> | undefined; cell?: ColumnDefTemplate<CellContext<Product, string>> | undefined; meta?: ColumnMeta<...> | undefined; } & ... 6 more ... & StringHeaderIdentifier' is not assignable to type '{ footer?: ColumnDefTemplate<HeaderContext<Product, unknown>> | undefined; cell?: ColumnDefTemplate<CellContext<Product, unknown>> | undefined; meta?: ColumnMeta<...> | undefined; }'.         Types of property 'footer' are incompatible.           Type 'ColumnDefTemplate<HeaderContext<Product, string>> | undefined' is not assignable to type 'ColumnDefTemplate<HeaderContext<Product, unknown>> | undefined'.             Type '(props: HeaderContext<Product, string>) => any' is not assignable to type 'ColumnDefTemplate<HeaderContext<Product, unknown>> | undefined'.               Type '(props: HeaderContext<Product, string>) => any' is not assignable to type '(props: HeaderContext<Product, unknown>) => any'.                 Types of parameters 'props' and 'props' are incompatible.                   Type 'HeaderContext<Product, unknown>' is not assignable to type 'HeaderContext<Product, string>'.                     Types of property 'header' are incompatible.                       Type 'Header<Product, unknown>' is not assignable to type 'Header<Product, string>'.                         Type 'Header<Product, unknown>' is not assignable to type 'CoreHeader<Product, string>'.                           Types of property 'column' are incompatible.                             Type 'Column<Product, unknown>' is not assignable to type 'Column<Product, string>'.                               Type 'Column<Product, unknown>' is not assignable to type 'CoreColumn<Product, string>'.                                 Types of property 'accessorFn' are incompatible.                                   Type 'AccessorFn<Product, unknown> | undefined' is not assignable to type 'AccessorFn<Product, string> | undefined'.                                     Type 'AccessorFn<Product, unknown>' is not assignable to type 'AccessorFn<Product, string>'.                                       Type 'unknown' is not assignable to type 'string'.

A more readable version of the error:

Could you tell me please why this is happening and how to fix it?

[locona]

Unfortunately, currently the 2322 error seems to occur unless you do the following.

export const productTableColumns = [

    columnHelper.accessor('name', {
        cell: info => info.getValue(),
        header: () => 'Name',
    }),
]

[bonetunes]

What did you even change here?