Typescript type error on Quick start example?

[HadiSDev]

Hi,

I just started using react table and I keep getting a type error when trying to use the quick start example.

Type '{ Header: string; accessor: string; }[]' is not assignable to type 'Column<{ col1: string; col2: string; }>[]'.
  Type '{ Header: string; accessor: string; }' is not assignable to type 'Column<{ col1: string; col2: string; }>'.
    Type '{ Header: string; accessor: string; }' is not assignable to type 'ColumnInterface<{ col1: string; col2: string; }> & { accessor: "col2"; } & ColumnInterfaceBasedOnValue<{ col1: string; col2: string; }, string>'.
      Type '{ Header: string; accessor: string; }' is not assignable to type '{ accessor: "col2"; }'.
        Types of property 'accessor' are incompatible.
          Type 'string' is not assignable to type '"col2"'.ts(2322)
index.d.ts(168, 5): The expected type comes from property 'columns' which is declared here on type 'TableOptions<{ col1: string; col2: string; }>'

[finom]

Yeah, not really good first experience. I hope it's going to be fixed as soon as possible. Looks like it's created for an old version of the library.

[GuptaSiddhant]

@HadiSDev Can you post the version of react-table and @types/react-table you are using?

[Asduveneck]

I'm not the original poster, but I also got a (different) Typescript type error for the quick-start guide.

TypeScript error in /mnt/c/Programming_WSL/Git_repos/honeycomb/reporting/src/components/Table.tsx(38,36):
Type '{ Header: string; accessor: string; }[]' is not assignable to type 'Column<{ col1: string; col2: string; }>[]'.
  Type '{ Header: string; accessor: string; }' is not assignable to type 'Column<{ col1: string; col2: string; }>'.
    Type '{ Header: string; accessor: string; }' is not assignable to type 'ColumnInterface<{ col1: string; col2: string; }> & { accessor: "col2"; } & ColumnInterfaceBasedOnValue<{ col1: string; col2: string; }, string>'.
      Type '{ Header: string; accessor: string; }' is not assignable to type '{ accessor: "col2"; }'.
        Types of property 'accessor' are incompatible.
          Type 'string' is not assignable to type '"col2"'.  TS2322

As for my dependencies, I'm using:

"react-table": "^7.5.0",
"@types/react-table": "^7.0.23",

[gornyyvladimir]

Same problem

[jspruance]

I'm running into the same thing. same versions. is the problem that the type definitions are behind the current 'react-table' version?

[Asduveneck]

I'm almost certain that is the case. I remember the types seemed a little weird because even in the ts docs, they would recommend we changed the types.

I think this issue is a result of:

1. Outdated ts support in that other library
2. The react-table ts docs being out dated.

[jspruance]

thanks for confirming. will have to decide whether to use it without type safety for now or look into using another table module.

[cseas]

I'm getting the same error. Did anyone find a solution?

A temporary hack is to just add // @ts-ignore before the line that has useTable() but that's not really a solution.

[secorlade]

What worked for me:

1. Create an interface that will be used to define how your object will look like

interface ExampleObject {
    col1: string
    col2: string
    col3: string
}

2. When you define your columns use as keyof ExampleObject to cast your accessor value :

const columns: Column<ExampleObject>[] = [
    {
        Header: () => ...,
        accessor: "col1" as keyof ExampleObject,
        Cell: ({value}: CellProps<ExampleObject>) => ...
    },
    {
        Header: () => ...,
        accessor: "col2" as keyof ExampleObject,
        Cell: ({value}: CellProps<ExampleObject>) => ...
    },
    {
        Header: () => ...,
        accessor: "col3" as keyof ExampleObject,
        Cell: ({value}: CellProps<ExampleObject>) => ...
    },
]

3. Lastly, use your interface as a parameter for the generic useTable<D extends object={}>() function like this:

const {...} = useTable<ExampleObject>({columns, data, ...})

This is what I've used to get rid of this error. I don't really know if this is the best approach but it worked for me.

P.S.: Ran into this error today and it took a bit of time until I found out what to do in this situation.

[codercodingthecode]

this fixes it for me.
As mentioned before, not a good experience for first use :/

[goodwin64]

What if accessor is a function?

[exsesx]

@goodwin64 then you should return a CellValue type:

accessor: (row: YourRowType): CellValue<string> => {
  return 'some string'; // CellValue generic should be returned
},

[c35xr]

great contribution

[james-gardner]

Am I right in thinking you don't need the keyof here? e.g:

interface WhiteListEntry {
  id: string;
  name: string;
  trustedDurationLength: number;
  trustedDurationUnit: string;
  type: string;
}

const columns: Column<WhiteListEntry>[] = [
  {
    Header: 'type',
    accessor: 'types'  // Type '"types"' is not assignable to type '"id" | "name" | "trustedDurationLength" | "trustedDurationUnit" | "type" | Accessor<WhiteListEntry> | undefined'.ts(2322)
  },
];

[cseas]

Apparently the solution was in the documentation the whole time. I just never looked into it until later because it comes after the quickstart example is finished in the documentation.

You can find the types for all props here: https://react-table.tanstack.com/docs/api/useTable

If you're looking for an example, I made a TypeScript version of the quickstart example here:
https://github.com/hazel-ui/hazel-ui/blob/main/src/package/components/Table/Table.tsx

TLDR:

data: Array<any>;
columns: Array<Column>;

[clothme-io]

@cseas is there anyway you can help with a typescript types for react-table that has filtering? I am having issues with that. Any pointer will help.

[daino92]

@cseas I have a problem with columns: Array<Column>;
The error message is the following: Generic type 'Column' requires between 1 and 2 type arguments.ts(2707).
Do you have any indication what it might want?

[cseas]

Update: New types are available at:
https://tanstack.com/table/v8/docs/api/core/table

[BrunoWilkinson]

Hi everyone,

I was facing the same issues with typescript and react-table, with so little examples it wasn't obvious.

Here's my solution (create your own Table component, typescript should detect types errors):

Table.tsx

import React from "react";
import { UseTableInstanceProps } from "react-table";

export interface TableNewProps<T extends object>
  extends Pick<
    UseTableInstanceProps<T>,
    | "getTableProps"
    | "headerGroups"
    | "getTableBodyProps"
    | "prepareRow"
    | "rows"
  > {}

export function Table<T extends object>(props: TableNewProps<T>) {
  const {
    getTableProps,
    headerGroups,
    getTableBodyProps,
    rows,
    prepareRow
  } = props;

  return (
    <table {...getTableProps()} style={{ border: "solid 1px blue" }}>
      <thead>
        {headerGroups.map((headerGroup) => (
          <tr {...headerGroup.getHeaderGroupProps()}>
            {headerGroup.headers.map((column) => (
              <th
                {...column.getHeaderProps()}
                style={{
                  borderBottom: "solid 3px red",
                  background: "aliceblue",
                  color: "black",
                  fontWeight: "bold"
                }}
              >
                {column.render("Header")}
              </th>
            ))}
          </tr>
        ))}
      </thead>
      <tbody {...getTableBodyProps()}>
        {rows.map((row) => {
          prepareRow(row);
          return (
            <tr {...row.getRowProps()}>
              {row.cells.map((cell) => {
                return (
                  <td
                    {...cell.getCellProps()}
                    style={{
                      padding: "10px",
                      border: "solid 1px gray",
                      background: "papayawhip"
                    }}
                  >
                    {cell.render("Cell")}
                  </td>
                );
              })}
            </tr>
          );
        })}
      </tbody>
    </table>
  );
}

App.tsx

import React from "react";
import { useTable, Column } from "react-table";
import { Table } from "./Table";
import "./styles.css";

type Data = {
  id: string;
  date: string;
  firstName: string;
  lastName: string;
  email: string;
  view: React.ReactNode;
};

const createArr = (n: number): Data[] => {
  const data: Data[] = [];
  for (let i = 0; i < n; i += 1) {
    data.push({
      id: `ID-${Math.random().toFixed(4)}`,
      date: new Date().toDateString(),
      firstName: `Rick #${i}`,
      lastName: `Sanchez #${i}`,
      email: `morty_${i}@rick.space`,
      view: <button>View</button>
    });
  }
  return data;
};

export default function App() {
  const data = React.useMemo<Data[]>(() => createArr(10), []);
  const columns = React.useMemo<Column<Data>[]>(
    () => [
      {
        Header: "ID",
        accessor: "id"
      },
      {
        Header: "Date Requested",
        accessor: "date"
      },
      {
        Header: "First Name",
        accessor: "firstName"
      },
      {
        Header: "Last Name",
        accessor: "lastName"
      },
      {
        Header: "Email",
        accessor: "email"
      },
      {
        accessor: "view"
      }
    ],
    []
  );

  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow
  } = useTable<Data>({ columns, data });

  return (
    <div className="App">
      <Table<Data>
        getTableProps={getTableProps}
        getTableBodyProps={getTableBodyProps}
        headerGroups={headerGroups}
        rows={rows}
        prepareRow={prepareRow}
      />
    </div>
  );
}

[oulasri]

Hi, any updates ?

[joaop-oliveira]

Hoping to use this lib because I found it really good but it broke my interfaces to a point that I can't keep using it.

[dahaca]

Casting an accessor value is the only solution I have come up with too. Checked some examples and couldn't pinpoint what exactly I am doing differently. The type awaits strictly keyof not 'string' but at the same time, it somehow does in some other cases?

Here's my example code:

Table.tsx

import React, { ReactElement, useMemo } from 'react'
import styled from 'styled-components'
import { Row, TableOptions, useTable } from 'react-table'

const Container = styled.table``

interface TableProps<T extends Record<string, unknown>>
  extends TableOptions<T> {
  onClick?: (row: Row<T>) => void
}

export function Table<T extends Record<string, unknown>>({
  columns,
  data,
  onClick,
  ...rest
}: TableProps<T>): ReactElement {
  const memoizedColumns = useMemo(() => columns, [columns])
  const memoizedData = useMemo(() => data, [data])

  const { rows } = useTable<T>({ columns: memoizedColumns, data: memoizedData, ...rest  })

  return <Container></Container>
}

ComponentWIthTable.tsx

import React from 'react'
import styled from 'styled-components'
import { Table } from 'components/Table'

const Container = styled.div``

export const LastTransactions: React.FC = () => {
  type col = { col1: string; col2: string }

  const data: col[] = [
    {
      col1: 'Hello',
      col2: 'World',
    },
    {
      col1: 'react-table',
      col2: 'rocks',
    },
    {
      col1: 'whatever',
      col2: 'you want',
    },
  ]

  const columns = [
    {
      Header: 'Column 1',
      accessor: 'col1',
    },
    {
      Header: 'Column 2',
      accessor: 'col2',
    },
  ]

  return <Table<col> data={data} columns={columns} disableSortBy/>
}

The error

Type '{ Header: string; accessor: string; }[]' is not assignable to type 'Column<col>[]'.
  Type '{ Header: string; accessor: string; }' is not assignable to type 'Column<col>'.
    Type '{ Header: string; accessor: string; }' is not assignable to type 'ColumnInterface<col> & { accessor: "col2"; } & ColumnInterfaceBasedOnValue<col, string>'.
      Type '{ Header: string; accessor: string; }' is not assignable to type '{ accessor: "col2"; }'.
        Types of property 'accessor' are incompatible.
          Type 'string' is not assignable to type '"col2"'.ts(2322)
index.d.ts(168, 5): The expected type comes from property 'columns' which is declared here on type 'IntrinsicAttributes & TableProps<col>'

[dahaca]

Here's the fix!

ggascoigne/react-table-example#3 (comment)

const columns: Array<Column<col>> = [
    {
      Header: 'Column 1',
      accessor: 'col1',
    },
    {
      Header: 'Column 2',
      accessor: 'col2',
    },
  ]

[madflanderz]

I had the same problem and found another solution. you have to define the accessor strings as const like this:

  const columns = React.useMemo(
    () => [
      {
        Header: "Column 1",
        accessor: "col1" as const,
      },
      {
        Header: "Column 2",
        accessor: "col2" as const,
      },
    ],
    []
  )

[ggascoigne]

that as const works (assuming you are using a recent enough version of typescript), but I find myself just using the const columns: Array<Column<col>> = [... version since it not only involves less typing, but it will highlight type errors at the definition of columns as opposed to when the columns are used later.

[otelom]

Thank you very much @madflanderz ...
How is this not fixed yet?...
@tannerlinsley have you seen this? It's a problem with the example from quick start example...

[ggascoigne]

@otelom What do you mean "how is this not fixed?"

You are complaining that a javascript example isn't perfect typescript, well I've got news for you, lots of javascript fails type-checking as typescript. That's a feature and one of the many reasons for using typescript.

Other than that I'd suggest posting a PR rather than being so demanding of an open source project.

And this comment is way nicer now I've re-written it several times.

[otelom]

Sorry if I sounded a little harsh, wasn't my intention. I was just finding one or two things failing with the quick start example that when I found this I got surprised with how old it was and maybe didn't notice that it could sound a little differently from what I intended. But I know it's not easy, time flies...

Bottom line, I apologize and thank you, and all the other guys for your time and hard work.

Keep it up and stay safe.

Cheers

[ggascoigne]

I'll add that I try and keep https://github.com/ggascoigne/react-table-example up to date, so it should be a reasonable example. I accept that a simpler example might also be useful.

[rogerfar]

I fixed it by adding a type to my useMemo:

  const columns = React.useMemo<Column<DataType>[]>(
    () => [
      {
        Header: 'Column 1',
        accessor: 'col1', // accessor is the "key" in the data
      },
      {
        Header: 'Column 2',
        accessor: 'col2',
      },
    ],
    []
  );

[rapaccinim]

Hello @rogerfar, nice solution. Can you suggest a solution considering that DataType is dynamic (e.g. I'm getting different columns from an API)? Thank you.

[rapaccinim]

@rogerfar I think that I found a solution that I wrote as an answer here.

[rapaccinim]

Hey guys, I think that I found a solution!

I created a simple interface that I called ColumnDetails for col1, col2, etc. in a way that it's flexible (e.g. taking data from an API) using TypeScript Index Signatures.

interface ColumnDetails {
  [key: string]: string
}

Then, I used the interface in the first useMemo regarding data:

const data = useMemo<ColumnDetails[]>(...)

And no more error :)

Here you can find the complete code I've used:

interface ColumnDetails {
  [key: string]: string
}
   
const data = useMemo<ColumnDetails[]>(
  () => [
    {
      col1: 'Hello',
      col2: 'World',
    },
    {
      col1: 'react-table',
      col2: 'rocks',
    },
    {
      col1: 'whatever',
      col2: 'you want',
    },
  ],
  []
)
    
const columns = useMemo(
  () => [
    {
      Header: 'Column 1',
      accessor: 'col1',
    },
    {
      Header: 'Column 2',
      accessor: 'col2',
    },
  ],
  []
)

const {
  getTableProps,
  getTableBodyProps,
  headerGroups,
  rows,
  prepareRow,
} = useTable({ columns, data })

return (
  <table {...getTableProps()} style={{ border: 'solid 1px blue' }}>
    <thead>
      {headerGroups.map(headerGroup => (
        <tr {...headerGroup.getHeaderGroupProps()}>
          {headerGroup.headers.map(column => (
            <th
              {...column.getHeaderProps()}
              style={{
                borderBottom: 'solid 3px red',
                background: 'aliceblue',
                color: 'black',
                fontWeight: 'bold',
              }}
            >
              {column.render('Header')}
            </th>
          ))}
        </tr>
      ))}
    </thead>
    <tbody {...getTableBodyProps()}>
      {rows.map(row => {
        prepareRow(row)
        return (
          <tr {...row.getRowProps()}>
            {row.cells.map(cell => {
              return (
                <td
                  {...cell.getCellProps()}
                  style={{
                    padding: '10px',
                    border: 'solid 1px gray',
                    background: 'papayawhip',
                  }}
                >
                  {cell.render('Cell')}
                </td>
              )
            })}
          </tr>
        )
      })}
    </tbody>
  </table>
)

[reubence]

This solution seems to solve the problem temporarily. Thanks!

[RobinLbt]

Wow, thank you!
I'm dealing with dynamic columns that I can't know in advance, this is very helpful

[jamesthesken]

Thank you!! I was able to use this with an API

[DmitryOlkhovoi]

I love typescript. It helps you with typings and autocompletes, so you won't spend much time. Also, it lets you spend a year fixing the basic usage of a table with a bunch of strangers. Wait...

[bryanprimus]

any updates on this?

[rapaccinim]

@bryantobing12 try my proposed solution: #2664 (comment)

[DmitryOlkhovoi]

@bryantobing12 #2664 (comment) helped me. But we decided to use another table component. Not because of this.

[rapaccinim]

@DmitryOlkhovoi can I ask you what kind of table component did you decide to use in your React + TypeScript environment? Thank you in advance.

[OmarZeidan]

Fixed Such a library doesn't have a TS guide! Sad!

Anyway, I had this fix folks just by adding the as any And it works perfectly fine for me!

  const columns = useMemo(
    () => [
      {
        Header: "Column 1",
        accessor: "col1", // accessor is the "key" in the data
      },
      {
        Header: "Column 2",
        accessor: "col2",
      },
    ],
    [],
  ) as any;

[designbyadrian]

https://www.typescriptlang.org/docs/handbook/declaration-files/do-s-and-don-ts.html#any

[RobinLbt]

Well the very benefit of Typescript is not having to deal with any

[mojave27]

For anyone finding this answer in 2023, it looks like there is a new table (v8) which worked fairly well out of the box:

https://tanstack.com/table/v8/docs/examples/react/basic

[Gulfam-Sidhu]

Hi there!

It looks like the error is related to a type mismatch in your code. Specifically, the type { Header: string; accessor: string; }[] is not compatible with the expected type readonly Column<TableData>[].

To fix the error, you should ensure that the objects in the columns array are of the correct type. Specifically, each object should be an instance of Column<TableData>, and should have the required properties, including the accessor property with the value "age".

Here's an example of how you could define the columns property as an array of Column<TableData> objects with the required properties:

interface TableData {
age: number;
name: string;
}

const columns: readonly Column<TableData>[] = [
{
Header: 'Age',
accessor: 'age',
},
{
Header: 'Name',
accessor: 'name',
},
];

Note: Main point is readonly Column<TableData>[]
I hope this helps! Let me know if you have any questions.

[Drblessing]

Same error, quick fix, set it to const to make it read only.

  const columns = useMemo(
    () =>
      [
        {
          Header: 'Column 1',
          accessor: 'col1', // accessor is the "key" in the data
        },
        {
          Header: 'Column 2',
          accessor: 'col2',
        },
      ] as const,
    []
  );

[Canfus]

Works for me.

1. Define an interface.

interface ITable {
  name: string;
  age: number;
}

2. Define column helper with our type.

const colHelper = createColumnHelper<ITable>();

3. Create columns array.

const columns = [
  colHelper.accessor('name', {
    header: () => {...},
    cell: (info) => <span>{info.getValue()}</span>
  }),
  colHelper.accessor('age', {
    header: () => {...},
    cell: (info) => <span>{info.getValue()}</span>
  })
// and here define our type for columns
] as Column<ITable>[];