Typescript and React table columns issue

[talgat-ruby]

Describe the bug (required)
Simple Table with dummy data. But typescript complaining about columns. But why?

Provide an example via Codesandbox! (required)
https://codesandbox.io/s/condescending-raman-ud0l8?file=/src/App.tsx:879-886

Steps To Reproduce (required)
The makeData simply creates dummy array data.
In App.tsx line 44 typescript complains on columns.

Desktop (please complete the following information):

• OS: Mac
• Browser: Chrome
• Version: 84

[JensMeire]

if you cast it as an array of Column it works, like this:

import { useTable, Column } from "react-table";
...
 const columns = React.useMemo(
    () => [
      {
        Header: t("Customer"),
        accessor: "customer"
      },
      ....
    ] as Column<StatementData>[],
    [t]
  );

Can't tell you why tho :)

[hkar19]

basically what you did is you cast the entire array into Column<StatementData>[].

each accessor must corresponds to keys in StatementData, and type string is far to general compared to keys in StatementData, giving the error.

your casting says you yourself guarante that the entire array is Column<StatementData>[] so typescript will believe you.

[csmattjohnston]

Thank you this helped me with my use case

[talgat-ruby]

@JensMeire you are right. I think this is because columns needs to be specified as Column<T>[].

And I have changed to this

const columns = React.useMemo<Column<StatementData>[]>(
  () => [
    {
      Header: t("Customer"),
      accessor: "customer"
    },
   ...
  ],
  [t]
);

Thank you!