React-table: Type 'string' is not assignable to type '"col1" Typescript error TS2322

[Paul6552]

Describe the bug (required)
Type 'string' is not assignable to type '"col1"

Provide an example via Codesandbox! (required)
I tried to produce a typescript react-table example without luck. i am really sorry

Steps To Reproduce (required)

`    const data = React.useMemo(
        () => [
            {
                col1: 'Value 1',
            },
        ],
        []
    );

const columns = React.useMemo(
    () => [{
        Header: 'what',
        accessor: 'col1',
    }
    ],
    []
);


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

Expected behavior (Recommended)
No typescript error

Screenshots

Desktop (please complete the following information):

• OS: Linux Mint
• Browser Chrome
• Version react-table 7.6.2
  "@types/react-table": "^7.0.25",

[processedbeets]

I'm getting the same issue. Have made the file a jsx for now, to allow me to keep going. Will convert to tsx when this has been resolved.

[ImranCodeBug]

I am getting the exact same issue and dropped in here to see if there is any potential solution to the problem. my StackOverflow question is here. My versions,

• "react-table": "^7.6.2",
• "@types/react-table": "^7.0.25",

[datner]

@Paul6552 @processedbeets @ImranCodeBug
I am unsure how you arrived at that bug, i managed to repro this exact case, with no success with the bug:

https://codesandbox.io/s/long-moon-u7ls0?file=/src/App.tsx

[datner]

Hmm, maybe the difference is they type safety.
Out of habit I typed the memoized columns you be of type Column<{col1: string}>[], that seems to be the only difference

[Paul6552]

@datner
Thanks for the example. Tomorrow i will have a look, at least tonight I can sleep :-D
There is a second difference as well:
function Table({ columns, data }: any)
You are declaring here colums and data as any. But tomorrow more. Thx gn8

[datner]

I updated my example to remove the any 😉
Had it in the first place since the actual typing is a bit annoying

[processedbeets]

Well done man, thanks for that example. I can confirm that resolved things for me. Perhaps you might be able to add that to one of the examples in this repo as I think it'll help others too.

For clarification, the differences that assisted me between your example and the original were:

1. Adding a Data interface:
   interface Data { title: string; captured: string; priority: string; area: string; isService: string; }

2. Adding a TableProps interface:
   interface TableProps<D extends object> { columns: Column<D>[]; data: D[]; }

3. Changing the first line of the Table component to specify the type of the props and use of generics:
   function Table<D extends object>({ columns, data }: TableProps<D>) {

4. Finally, changing the columns object instantiation by passing in the type when using memo:
   const columns = useMemo<Column<Data>[]>(

Thanks again @datner, saved me a lot of time! 👍

[datner]

My pleasure 😄

[Paul6552]

I will leave this thread open for @tannerlinsley. Maybe he wants to include this in his table. Otherwise it can be closed.
Thanks

[ImranCodeBug]

sorry for the very late reply.

@datner @processedbeets are you recommending we somehow override the definition of the table and use it to instantiate the react. any code example here will be hugely beneficial.

[datner]

@ImranCodeBug there are code examples inlined and linked, please read the entire thread!

[DeeSouza]

This worked for me:

interface IData {
    col1: string;
    col2: string;
}

const data = React.useMemo<IData[]>(
  () => [
    {
      col1: "Hello",
      col2: "World"
    },
    {
      col1: "react-table",
      col2: "rocks"
    },
    {
      col1: "whatever",
      col2: "you want"
    }
  ],
  []
);

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

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