ColumnDef types gives typescript error

[Jontii]

Describe the bug

Looking at the examples and docs I expect this to correctly type my columns for me. Instead I get a large error with this code:

  type Example = {
    name: string
    age: number
  }

  const columnHelper = createColumnHelper<Example>()

  const columns = useMemo<ColumnDef<Example>[]>(
    () => [
      columnHelper.accessor("name", {
        cell: (info) => info.getValue(),
      }),
      columnHelper.accessor("age", {
        cell: (info) => info.getValue(),
      }),
    ],
    [columnHelper],
  )

Am I doing something wrong here?

Regards Jonathan

Your minimal, reproducible example

https://codesandbox.io/s/typescript-playground-export-forked-iqm265?file=/index.tsx

Steps to reproduce

1. Create a type with two different types, string and name for example.
2. Use the createColumnHelper with the type
3. Define columns with columnHelper and type them with ColumnDef

Expected behavior

I expected the Columdef to correctly type my columns.

How often does this bug happen?

Every time

Screenshots or Videos

Platform

Mac OS

react-table version

v8.5.13

TypeScript version

v4.8.2

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.

[byroncoetsee]

Only way I've found to get around this is to add a as string or some other primitive type after info.getValue()

[j-fdion]

I'm having the same problem, any updates on this?

[phongplus]

I m having same, so i fix with

const columns = useMemo<ColumnDef<Example, any>[]>

i don't know if this is the best way, but the typescript error should go away.

[Jontii]

We skipped using columnDef, it still works as good and gives type help.

  const columns = [
      columnHelper.accessor("name", {
        cell: (info) => info.getValue(),
      }),
      columnHelper.accessor("age", {
        cell: (info) => info.getValue(),
      }),
    ]

[tannerlinsley]

This is the way.

[j-fdion]

Thank you, it does work this way!

[csandman]

@tannerlinsley if you're saying @Jontii 's solution is the right way, you might want to change the Column Defs page in the docs to not use a column helper and a typed array. That is what you're saying right, either use one or the other?

[Jontii]

If I understand it, if you use grouped columns like this example https://tanstack.com/table/v8/docs/examples/react/column-sizing then it is correct. If you are not using grouped columns, you shouldn't use it.

[tannerlinsley]

You should only be using the column helper and not pre-typing anything.

[csandman]

@tannerlinsley This is the first example in the Column Defs guide page:

// Define your row shape
type Person = {
  firstName: string
  lastName: string
  age: number
  visits: number
  status: string
  progress: number
}

const columnHelper = createColumnHelper<Person>()

// Make some columns!
const defaultColumns: ColumnDef<Person>[] = [  // <- Pre typed Array
  // Display Column
  columnHelper.display({ // <- While using column helper
    id: 'actions',
    cell: props => <RowActions row={props.row} />,
  }),
  // Grouping Column
  columnHelper.group({
    header: 'Name',
    footer: props => props.column.id,
    columns: [
      // Accessor Column
      columnHelper.accessor('firstName', {
        cell: info => info.getValue(),
        footer: props => props.column.id,
      }),
      // Accessor Column
      columnHelper.accessor(row => row.lastName, {
        id: 'lastName',
        cell: info => info.getValue(),
        header: () => <span>Last Name</span>,
        footer: props => props.column.id,
      }),
    ],
  }),
  // ...

It has the column array pre-typed and throws errors if any of these accessor columns are top level.

[tannerlinsley]

Yeah… we should fix that. On Oct 5, 2022 at 11:40 AM -0700, Chris Sandvik @.***>, wrote:

@tannerlinsley This is the first example in the Column Defs guide page: // Define your row shape type Person = { firstName: string lastName: string age: number visits: number status: string progress: number }

const columnHelper = createColumnHelper<Person>()

// Make some columns! const defaultColumns: ColumnDef<Person>[] = [ // <- Pre typed Array // Display Column columnHelper.display({ // <- While using column helper id: 'actions', cell: props => <RowActions row={props.row} />, }), // Grouping Column columnHelper.group({ header: 'Name', footer: props => props.column.id, columns: [ // Accessor Column columnHelper.accessor('firstName', { cell: info => info.getValue(), footer: props => props.column.id, }), // Accessor Column columnHelper.accessor(row => row.lastName, { id: 'lastName', cell: info => info.getValue(), header: () => Last Name, footer: props => props.column.id, }), ], }), // ... It has the column array pre-typed and throws errors if any of these accessor columns are top level. — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you were mentioned.Message ID: @.***>

[swernerx]

Pre-typing would be helpful for public interfaces e.g. if we create a wrapper components with columns and data props. I am using this here right now:

interface DataTableProps {
  // FIXME: Can we figure out something more type restrictive which actually works?
  data: unknown[]
  columns: ColumnDef<any, any>[];
}

That makes TypeScript "happy"... but I would prefer something more strict.

I guess I was looking for a typed CustomTableComponent example which uses TanStack/Table underneath.

[invalidBan]

Pre-typing would be helpful for public interfaces e.g. if we create a wrapper components with columns and data props. I am using this here right now:

This! We're making a custom MyTableComponent and expose columns as prop that is pre-typed.

[jonahallibone]

Pre-typing would be helpful for public interfaces e.g. if we create a wrapper components with columns and data props. I am using this here right now:

interface DataTableProps {
  // FIXME: Can we figure out something more type restrictive which actually works?
  data: unknown[]
  columns: ColumnDef<any, any>[];
}

That makes TypeScript "happy"... but I would prefer something more strict.

I guess I was looking for a typed CustomTableComponent example which uses TanStack/Table underneath.

This makes typescript happy IF you allow use of any which my codebase explicitly does not and which TS does not recommend

[skuridin]

It becomes an issue when passing columns to a component as a prop.

[LoicKairon]

I am having the same issue here. Is there a way to avoid typing any?

type Props<T> = {
  data: T[];
  columns: ColumnDef<T, any>[];
};

[IanVS]

The EditableData example also uses React.useMemo<ColumnDef<Person>[]>(, I guess that's not correct either?

[AlexMachin1997]

@LoicKairon Glad I'm not the only one having this issue, I've done the same as you for now but would but nice to get that work properly.

[Patriksafar]

Hey @tannerlinsley 👋 I there any update on "any" type issue? It seems this issue is dead without being resolved for long time than I would expect. Should I open separated issue instead? We really love this library but having proper type instead of any would really help us.

I am having the same issue here. Is there a way to avoid typing any?

type Props<T> = {
  data: T[];
  columns: ColumnDef<T, any>[];
};

[Armadillidiid]

I just encountered the same issue, which forced me to turn off no-explicit-any.

[DoubleJ-G]

Same use case as above, useTable is wrapped in a reuseable component that takes in columns as a prop. Trying to use columHelper to create the definitions in the parent and it causes a typescript error.

[blumaa]

Any update on this issue? Running into the same issue. My solution is to use any for the type and individually define the types for each cell:

type BillingDetails = {
  id: number;
  service: string;
  talentName: string;
  amount: number;
  createdAt: string;
};

// eslint-disable-next-line @typescript-eslint/no-explicit-any 
const columns: ColumnDef<BillingDetails, any>[] = [
  columnHelper.accessor('service', {
    id: 'service',
    cell: (props) => props.getValue() as string,
    header: 'Service',
    enableSorting: false,
  }),
  columnHelper.accessor('talentName', {
    id: 'talentName',
    cell: (props) => props.getValue() as string,
    header: 'Talent name',
    enableSorting: false,
  }),
  columnHelper.accessor('amount', {
    id: 'amount',
    cell: (props) => props.getValue() as number,
    header: 'Amount',
    enableSorting: false,
  }),
  columnHelper.accessor('createdAt', {
    id: 'createdAt',
    cell: (props) => props.getValue() as string,
    header: 'Created at',
    enableSorting: false,
  }),
]

[cameronthrntn]

Getting the same here, trying to convince our team to migrate to @tanstack/react-table and this is certainly getting in the way of that. I've defined columns as such: (nothing revolutionary)

  const columnHelper = createColumnHelper<Coffee>();

  const columns = [
    columnHelper.accessor(data => data.id, {
      id: 'id',
      cell: info => info.getValue()
    })
  ];

and have typed my generic table component as:

interface TableProps<T extends object> {
  data: T[];
  columns: ColumnDef<T>[];
}

export default function index<T extends object>({ columns, data }: TableProps<T>) {
  const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel()
  });

(...)

But am then getting the following Type Error when passing my columns as a prop:

        Property 'accessorFn' is missing in type 'ColumnDefBase<Coffee, number> & StringHeaderIdentifier' but required in type 'AccessorFnColumnDefBase<Coffee, unknown>'.ts(2322)
types.d.ts(83, 5): 'accessorFn' is declared here.
index.tsx(6, 3): The expected type comes from property 'columns' which is declared here on type 'IntrinsicAttributes & TableProps<Coffee>'

Any advice is appreciated

react-table version: 8.10.7 @types/react-table version: 7.7.18

[arkmech]

Yeah getting same issue.

[suresh-laradev]

is there any solution for this. this still exists.

[ngurahyudi]

Waiting for the solution to this issue too.

[Ac-Srikanth]

yeah please i really require a solution for this.

[PeterEckIII]

Any progress here? Going to have to drop react-table if this isn't fixed, unfortunately.

[AlexMachin1997]

Any progress here? Going to have to drop react-table if this isn't fixed, unfortunately.

That's very excessive, just put any for the second argument and it'll still work really well.

[fs-swhittle]

Can anyone provide a working vue-table example project that passes column info into a table component? I'm using typescript and getting the following error no matter how I move the types around: Uncaught (in promise) TypeError: columnDefs2 is undefined

Edit: An example that works even with the any type would be awesome, I can't even get that to work.