Table cell type error

[kieranhood]

I'm getting the following error on the table component.

ERROR in src/components/Elements/Table/Table.tsx:57:25 TS2322: Type 'Element | Entry[keyof Entry]' is not assignable to type 'ReactNode'. Type 'Entry[keyof Entry]' is not assignable to type 'ReactNode'. Type 'Entry[string] | Entry[number] | Entry[symbol]' is not assignable to type 'ReactNode'. Type 'Entry[string]' is not assignable to type 'ReactNode'. Type 'Entry[string]' is not assignable to type 'ReactPortal'. Type 'Entry[keyof Entry]' is not assignable to type 'ReactPortal'. Type 'Entry[string] | Entry[number] | Entry[symbol]' is not assignable to type 'ReactPortal'. Type 'Entry[string]' is not assignable to type 'ReactPortal'.

I presume there is a problem with the TableColumn type definition.

type TableColumn<Entry> = { title: string; field: keyof Entry; Cell?({ entry }: { entry: Entry }): React.ReactElement; };

I'm only just learning TS and haven't been able to figure out what the Cell type definition is doing. An explanation on this would be greatly appreciated!

[kieranhood]

Actually I think this issue is caused because I upgraded to React 18. My solution specify the type of entry[field] as any.

//Table.tsx Line 55 {Cell ? <Cell entry={entry} /> : entry[field] as any}

Seems to do the trick but I'm sure theres a more proper way of solving this.

[GoPotatos]

Yeah, I'm a TS newbie as well, and I was facing the same issue, I managed to fix/hack it by changing, this:

  export const Table = <Entry extends { id: string }>({ data, columns }: TableProps<Entry>) => {

To this:

  export const Table = <Entry extends Record<string, any> & { id: string }>({ data, columns }: TableProps<Entry>) => {

[shobhitk8055]

Another possible solutions-

{Cell ? <Cell entry={entry} /> : entry[field] as React.ReactNode}