[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.