TanStack Table dynamically passed generic types - setting generic key type for createDataColumn?

[nickduan-pcln]

Hi team,

I'm trying to create a generic table which takes in multiple different object types with different object keys, from different parts of my repo. I've been able to implement this table and have it render with the different object types, but I'm unable to get the typing correct for the createDataColumn() key parameter to stop TypeScript from complaining.


I'm setting the table row type like so: const table = createTable().setRowType<T>() to take in generic types, and as a result, I'm getting the error Argument of type 'string' is not assignable to parameter of type 'keyof T | AccessorFn<T>' (string type being that of the key).

For some background on the data being received by the table, I'm passing an array of objects of different types and sizes and based on the documentation, the createDataColumn() function takes in and maps the keys of the object to the data column. Thus I'm extracting just the first object and using its keys to map all the columns. This way of handling the keys effects turns them into type string and creates the conflict with the table row expecting a keyof T type (as specified in setRowType<T>().

The way I've tried to mitigate this issue is by setting my object keys as keyof T types in the initial extraction process: const cols = Object.keys(data[0]) ==> const cols = Object.keys(data[0]) as Array<keyof T>. However, when this happens, I'm faced with a different error in the form of:

Argument of type '{ header: string; enableSorting: boolean | undefined; cell: (info: any) => any; }' is not assignable to parameter of type 'Overwrite<keyof T extends (...args: any[]) => any ? ColumnDef<Overwrite<Overwrite<{ Renderer: Render; Rendered: ReactNode | Element; }, { Row: T; }>, { Value: ReturnType<...>; }>> : keyof T extends keyof T ? Overwrite<...> : never, { ...; }>'. Type '{ header: string; enableSorting: boolean | undefined; cell: (info: any) => any; }' is not assignable to type 'Omit<keyof T extends (...args: any[]) => any ? ColumnDef<Overwrite<Overwrite<{ Renderer: Render; Rendered: ReactNode | Element; }, { Row: T; }>, { Value: ReturnType<...>; }>> : keyof T extends keyof T ? Overwrite<...> : never, "accessorFn" | ... 1 more ... | "columns">'.

This is in essence what I would like to implement:

interface IProps<T> {
  data: Array<T>
  columns: Array<IColumn>
}

export const TanStackTable = <T,>({
  data,
  columns,
}: IProps<T>): React.ReactElement => {
  const table = createTable().setRowType<T>()

  const cols = Object.keys(data[0]) as Array<keyof T>

  const tableColumns = cols.map((key, index) =>
    table.createDataColumn(key, {
      header: columns[index].name,
      cell: info => info.getValue()
    })
  })

Examples of TanStack component being called:

<TanStackTable<User> data={data} columns={columns} />

/*
user data passes in an array of user objects
{
  employeeName: string
  status: string
  created: Date
}
*/


<TanStackTable<car> data={data} columns={columns} />

/*
car data passes in an array of car objects
{
  make: string
  model: string
  year: number
  price: number
  actions: React.ReactNode
}
*/

So I'm wondering if there might be another simple way of fixing my typing issue or if there is some overhead that I need to implement myself?
Any help would be much appreciated!

Thanks 🙏

[ArtemFedorchuk]

I also try to create pretty much the same way and I also get errors (

[mathieufiani]

I also have the same problem by trying to implement a generic table

[ShawnFarsai]

Idk why this works, but chatgpt solved it for me, error is gone after using _.property 🤷

[ShawnFarsai]

This fix from chatgpt resolved it for me

[ShawnFarsai]

This fix from chatgpt resolved it for me

[vikasrathod4299]

Any update on this, I'm still facing this issue