v8: how to do infer types when wrapping the table in a custom component?

[dufia]

Example: https://codesandbox.io/s/adoring-jones-42394z?file=/src/index.tsx

If you open CustomTable.tsx you can see the types don't quite work. How to do infer types when wrapping the table in a custom component?

Thanks in advance!

[eklam]

@dufia could you figure it out? I'm having the exact same issue

[dufia]

@dufia could you figure it out? I'm having the exact same issue

Nope. Abandoned the upgrade to v8 for now.

[talatkuyuk]

@david-crespo and @tannerlinsley I'm also having the similar type inference issue. I would like to create a custom Table component that receives the table instance as a prop so that I can re-use it for different table instances. The problem is how I have to specify instance type. Is there a way for sending the typeof the instance as a prop as well where I call the custom component ?

type Props = {
  instance: // what will be the type ?;
}

const TableSimple = ({ instance }: Props): JSX.Element => {
  return (
    <TableContainer>
      <table {...instance.getTableProps()}>
        <thead>
          {instance.getHeaderGroups().map((headerGroup) => (
            <tr {...headerGroup.getHeaderGroupProps()}>
              {headerGroup.headers.map((header) => (
                <th {...header.getHeaderProps()}>
                  {header.isPlaceholder ? null : header.renderHeader()}
                </th>
              ))}
            </tr>
          ))}
        </thead>
        <tbody {...instance.getTableBodyProps()}>
          {instance.getRowModel().rows.map((row) => (
            <tr {...row.getRowProps()}>
              {row.getVisibleCells().map((cell) => (
                <td {...cell.getCellProps()}>{cell.renderCell()}</td>
              ))}
            </tr>
          ))}
        </tbody>
        <tfoot>
          {instance.getFooterGroups().map((footerGroup) => (
            <tr {...footerGroup.getFooterGroupProps()}>
              {footerGroup.headers.map((header) => (
                <th {...header.getFooterProps()}>
                  {header.isPlaceholder ? null : header.renderFooter()}
                </th>
              ))}
            </tr>
          ))}
        </tfoot>
      </table>
      <div className="h-4" />
    </TableContainer>

I created the table and the instance like below (I omitted the rest of the code):

const table = createTable().setRowType<User>();

const instance = useTableInstance(table, {
    data, // the type is User[]
    columns,
    getCoreRowModel: getCoreRowModelSync(),
  });

When I hover on the table instance in the vscode that I call <TableSimple instance={instance} /> I see the type as:

const instance: TableInstance<Overwrite<{
    Render: <TProps extends {}>(Comp: Renderable<TProps>, props: TProps) => ReactNode;
}, {
    Row: User;
}>>

I couldn't figure out. My final question is how I have to specify instance type in the Props definition in the custom TableSimple component.

[david-crespo]

This is working for me:

type Props<TGenerics> = {
  instance: TableInstance<TGenerics>;
}

const TableSimple = <TGenerics,>({ instance }: Props<TGenerics>): JSX.Element => {
  ...
}

Don't specify TGenerics in the calling code, let TS infer it from the table instance you pass in.

[talatkuyuk]

This is working for me:

type Props<TGenerics> = {
  instance: TableInstance<TGenerics>;
}

const TableSimple = <TGenerics,>({ instance }: Props<TGenerics>): JSX.Element => {
  ...
}

Don't specify TGenerics in the calling code, let TS infer it from the table instance you pass in.

Thank you so much. It works. You are really good man. @david-crespo