modern-teal

Typescript issues

I have this props:

interface TableProps {
  columns: {
    title: string;
    id: string;
  }[];
  rows: object[];
}

and I create my columns dynamically, like so:

const columnHelper = createColumnHelper<object>();
  const columns = tableColumns.map(({ id, title }) =>
    columnHelper.accessor(id, {
      header: title,
      cell: (data) => data.getValue(),
    })
  );

The problem is that if I remove any of the following "any" types:

header: ({ table }: { table: any }) =>
...
cell: ({ row, getValue }: { row: any; getValue: any })
...
getSubRows: (row: any) => row.subRows,
...

Then I get the following error:

Member 'row' (the same for getValue or table) implicitly has an 'any' type

Member 'row' (the same for getValue or table) implicitly has an 'any' type

I have tried changing it to object and other React Table types but without success. Did someone have a similar issue? Am I creating the createColumnHelper method with the correct type according to my table props? Thanks!

5 Replies

complex-teal•3y ago

I'm having a little trouble piecing this all together. Do you have a codesandbox you could share?

modern-tealOP•3y ago

yes sure, here it is: https://codesandbox.io/s/cranky-frost-qmoj0z?file=/src/App.tsx

pmpc94

CodeSandbox

cranky-frost-qmoj0z - CodeSandbox

cranky-frost-qmoj0z by pmpc94 using @tanstack/react-table, react, react-dom, react-scripts

complex-teal•3y ago

I might still be misunderstanding, so if I got the issue wrong please let me know. The column helpers example (https://tanstack.com/table/v8/docs/guide/column-defs#column-helpers) sets up the helper with a very specific type, const columnHelper = createColumnHelper<Person>(), but you're using object in place of Person, which doesn't describe the shape of your data to the helper. I would suggest extracting or defining your data type and passing that to the helper.

type DataRow = typeof tableRows[number];
// { name: string; email: string; }

const columnHelper = createColumnHelper<DataRow>();

type DataRow = typeof tableRows[number];
// { name: string; email: string; }

const columnHelper = createColumnHelper<DataRow>();

Columns | TanStack Table Docs

API Table API

complex-teal•3y ago

This may expose other type issues, but I'd be happy to try and help with those if needed.

modern-tealOP•3y ago

when I do the suggested:

type DataColumn = typeof tableColumns;
  const columnHelper = createColumnHelper<DataColumn>();

I receive the following warning in the accessor:

TS2345: Argument of type 'string' is not assignable to parameter of type 'AccessorFn{ title: string; id: string; }[], unknown>'.

Gaming

Programming

Typescript issues

Did you find this page helpful?