table: [v8] Type Error in ColumnDef

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

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.

Hi! I’m still getting this error 😦

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

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];

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.

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.

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

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: @.***>

@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

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? 🤔