[v8] Type Error in ColumnDef

[celsodias12]

Describe the bug

ColumnDef typing is not working correctly, when a type is passed as a parameter it doesn't show me the correct typing

Your minimal, reproducible example

https://codesandbox.io/s/react-typescript-forked-gr4xw1?file=/src/App.tsx

Steps to reproduce

when you fill in the accessorKey you will see that its typing is string, and it should be keyof Person

Expected behavior

should return the typing as: accessorKey: firstName | lastName | age | visits | status | progress and any other value that is entered should be returned typing error

How often does this bug happen?

Every time

Screenshots or Videos

Platform

• OS: windows
• Browser: any browser

react-table version

v8.5.11

TypeScript version

v4.6.3

Additional context

No response

Terms & Code of Conduct

• [x] I agree to follow this project's Code of Conduct
• [X] 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.

[tannerlinsley]

Please use the createColumnHelper<Person>().accessor(options) API

Tanner Linsley On Aug 14, 2022, 5:32 PM -0600, Celso Dias @.***>, wrote:

Describe the bug ColumnDef typing is not working correctly, when a type is passed as a parameter it doesn't show me the correct typing Your minimal, reproducible example https://codesandbox.io/s/react-typescript-forked-gr4xw1?file=/src/App.tsx Steps to reproduce when you fill in the accessorKey you will see that its typing is string, and it should be keyof Person Expected behavior should return the typing as: accessorKey: firstName | lastName | age | visits | status | progress and any other value that is entered should be returned typing error How often does this bug happen? Every time Screenshots or Videos Platform

• OS: windows • Browser: any browser

react-table version v8.5.11 TypeScript version v4.6.3 Additional context No response 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.

— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you are subscribed to this thread.Message ID: @.***>

[iblecher]

That did not work for me - columnHelper returns a type for a specific field of the column and not the entire column type. Example:

type Person = {
  name: string;
  age: number;
};

const columnHelper = createColumnHelper<Person>();


// Type of nameColumn = ColumnDef<Person, string>;
const nameColumn = columnHelper('name', {
  header: `Name`,
  cell: info => info.getValue(),
});

// Type of ageColumn = ColumnDef<Person, number>;
const ageColumn = columnHelper('age', {
  header: `Age`,
  cell: info => info.getValue(),
});

// This will not work:
const columns: ColumnDef<Person>[] = [nameColumn, ageColumn];

[utkuturunc]

i'm working around this by using

const columns: ColumnDef<Person, any>[] = [nameColumn, ageColumn];

[iblecher]

thanks @utkuturunc but we use @typescript-eslint/no-explicit-any rule which doesn't allow me to use any

[utkuturunc]

@iblecher in that case

const nameColumn = columnHelper('name', {
  header: `Name`,
  cell: info => info.getValue(),
}) as ColumnDef<Person, unknown>;

should work

[huv1k]

I think accessorKey should show only possible keys from ColumnDef generic. What is point of defining it anyways, when basic type propagation doesn't work as expected? Is there any blocker to fix this behavior instead of using these helper functions? 🤔

[tannerlinsley]

Yes. Typescript limitations. We’ll be able to get around these with time.

[Jontii]

We have a similar problem in our code.

const columns = useMemo<ColumnDef<Shipment>[]>(
    () => [
      columnHelper.accessor("name", {
        cell: (info) => info.getValue(),
        header: "Name",
      }),
      columnHelper.accessor("totalUnits", {
        cell: (info) => info.getValue(),
        header: "Total Units",
      }),
    ],
    [],
  )

Give me this typescript error

I can type it to ColumnDef<Shipment, string> but then field like totalUnits which is a number gives me an error that it is not a string.

[ekozhura]

For me the main goal is to not lose the type information about cell values. To achieve this goal I found two workarounds:

1. is to provide as much type information as possible.
2. is to allow the type checker to infer types. In both cases types of cell values are preserved.

First workaround:

type Person = {
  name: string;
  age: number;
};

const columnHelper = createColumnHelper<Person>();

const columns: ColumnDef<Person>[] = [
  columnHelper.accessor<"name", string>("name", { 
    cell: props => props.getValue() // getValue() will return value of type string
  }),
  columnHelper.accessor<"age", number>("age", { 
    cell: props => props.getValue() // getValue() will return value of type number
  }),
] as ColumnDef<Person>[]; // this typecast solely to avoid `any` as a value for `TValue` parameter

Second workaround:

type Person = {
  name: string;
  age: number;
};

const columnHelper = createColumnHelper<Person>();

const columns = [
  columnHelper.accessor("name", { 
    cell: props => props.getValue() // getValue() will return value of type string
  }),
  columnHelper.accessor("age", { 
    cell: props => props.getValue() // getValue() will return value of type number
  }),
];

Probably at some point you will have to type cast columns to ColumnDef<Person>[], but for me this isn't an issue.

[KevinVandy]

This should be fixed in the latest v8.5.30 release https://github.com/TanStack/table/pull/4513

[nurbolnygmanov]

Looks like problem with ColumnDef<T> still there. Here is sandbox from TanstackTable website, I am just passing columns as a prop. And the types just dont match. https://codesandbox.io/s/columndef-react-table-x1452j?file=/src/main. does anyone still has the same problem? Because I am not allowed to use any.

[mosnicholas]

I'm still seeing this error in the latest typescript (5.0.2) & "@tanstack/react-table": "^8.7.9" any thoughts?

[mnlfischer]

It is not working for me when I use string literal types in my interface that I pass to the helper function:

createColumnHelper<Example>()
type AnotherValueType: "Test" | "Test2"

export interface Example {
    id: string;
    anotherValue: AnotherValueType
}

Type 'ColumnDefBase<Example, AnotherValueType> & StringHeaderIdentifier' is not assignable to type 'ColumnDef<Example, string>'.
      Type 'ColumnDefBase<Example, AnotherValueType> & StringHeaderIdentifier' is not assignable to type 'AccessorFnColumnDefBase<Example, string> & IdIdentifier<Example, string>'.

[TheOftedal]

@mnlfischer Did you find a solution for the column typing issues you experience? I am having the exact same issues...

[mnlfischer]

@mnlfischer Did you find a solution for the column typing issues you experience? I am having the exact same issues...

sadly I disabled the ts error for now.

[TheOftedal]

@mnlfischer Thanks for your response! I managed to avoid the ts errors by casting the column definition arrays as follows:

interface MyAwesomeType {
    name: string;
    value: number;
}

const columnHelper = createColumnHelper<MyAwesomeType>();

const columns = [
      columnHelper.accessor('name', {
        header: 'Name',
        cell: props => props.getValue() 
      }),
      columnHelper.accessor('value', {
        header: 'Value',
        cell: props => props.getValue() 
      }),
] as Array<ColumnDef<MyAwesomeType, unknown>>;

This works well with my generic Table component for which I have typed the columns and data properties as follows:

export interface TableProps<T> {
  data: Array<T>;
  columns: Array<ColumnDef<T, unknown>>;
}

The Table component has the following signature:

export const Table = <T extends object>({
  data,
  columns
}: TableProps<T>) => {
    /** 
    * Table render logic
    */
}

This is a very basic snapshot of how I have chosen to solve this but this works pretty well and still provides me with the required strongly typed implementation I wanted.

[S-Furman]

@mnlfischer Thanks for your response! I managed to avoid the ts errors by casting the column definition arrays as follows:

interface MyAwesomeType {
    name: string;
    value: number;
}

const columnHelper = createColumnHelper<MyAwesomeType>();

const columns = [
      columnHelper.accessor('name', {
        header: 'Name',
        cell: props => props.getValue() 
      }),
      columnHelper.accessor('value', {
        header: 'Value',
        cell: props => props.getValue() 
      }),
] as Array<ColumnDef<MyAwesomeType, unknown>>;

This works well with my generic Table component for which I have typed the columns and data properties as follows:

export interface TableProps<T> {
  data: Array<T>;
  columns: Array<ColumnDef<T, unknown>>;
}

The Table component has the following signature:

export const Table = <T extends object>({
  data,
  columns
}: TableProps<T>) => {
    /** 
    * Table render logic
    */
}

This is a very basic snapshot of how I have chosen to solve this but this works pretty well and still provides me with the required strongly typed implementation I wanted.

Works well for this case but when I have custom functionFn that returns boolean I get error: TS2322: Type  "isWithinRange"  is not assignable to type  FilterFnOption<Verification> | undefined 

[ByteWither]

Hi! I'm still getting this error :(

"@tanstack/react-table": "8.12.0", "typescript": "5.2.2"

[Kevi14]

What fixed the issue for me was to not export the columns from another file but use them directly there , the export keyword seems to be the culprit for me.

[9mm]

is there a benefit to doing:

as ColumnDef<Payment, unknown>[

over

as ColumnDef<Payment>[