How to properly type columns when using createColumnHelper?

[ronaldruzicka]

Hi, does anyone know how to properly type columns when table is extracted into it's own component? The type should be ColumnDef which is a union type where is AccessorColumnDef which is a union type of AccessorKeyColumnDef | AccessorFnColumnDef ..but in the end TS is showing an error, that accessorKeyFn is not used, because I'm using accessorKey.

The Props type for my Table

type Props = {
  columns: ColumnDef<Person>[];
  data: Person[];
}

function Table({
  columns,
  data,
}: Props) {...}

The error:

Here is CodeSandbox

I don't want to use type assertion for columns, but I don't see any other way.
Any help appreciated🙏, thanks!

[writes-of-spring]

If you're using the columnHelper to define your columns, in your case

const columnHelper = createColumnHelper<Person>()

you can afford to be more lax with the types in your columns

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

[LinnJS]

Plus 1 on this @ronaldruzicka

I was trying to do something like columns: ColumnDef<TData, keyof TData>[]; It seems like we should be able to assume TValue since the TValue should always be a member of TData, right?

[connorwarme]

@ronaldruzicka and @LinnJS - did y'all make any headway on this? Or did you settle on columns: ColumnDef<TData, any>[];? Thanks!

[ronaldruzicka]

Hi @connorwarme, yes I went with any, didn't have much choice. But the custom type for the meta on column doesn't work.

[itshallrun]

any news?

[connorwarme]

@itshallrun hi Alex, the only update I have is what Ronald shared previously - we just utilized any.