can not get hook's options on table instance in typescript

[alisajadih]

Hi!
I'm using typescript with react-table.
my problem is instance of useTable hooks does not have hook properties .

const hooks = [
  useColumnOrder,
  useFilters,
  useGroupBy,
  useSortBy,
  useExpanded,
  useFlexLayout,
  usePagination,
  useResizeColumns,
  useRowSelect,
];
 const tableInstance = useTable<TCompanyTableData>({
    columns,
    data: companies,
  },...hooks);

now i can't access to tableInstance.page. it says no property called page in TableInstance

[akomm]

I'v just started using this library and have the same issue instantly. Searching for typescript in the docs lead to 0 results.

So I'v started evaluating it myself:

The way how useTable is designed AFAIK does not allow to auto-infer the options of useTable and its instance props based on the hooks provided. So it only works with the default table options and instance props.

The authors of the typings however did a good job of making it quite intuitive how to use the typings anyway. First-gues, direct hit: all the hooks provide typings with easy derivable type name to look for.

If there is an easier way I'v missed due to lack of documentation, suggestions welcomed!

Example types for hook useFilters:

• UseFiltersOptions
• UseFiltersInstanceProps
• UseFiltersColumnOptions
• UseFiltersColumnProps

Example, what you could do:

type Merge<A, B> = Omit<A, keyof B> & B
// UnknownTableData: just better way of D extends object
type UnknownTableData = Record<string, unknown>

// compose column options
type UseCustomTableColumn<D extends UnknownTableData> = 
  & Column<D>
  & UseFiltersColumnOptions<D>

// compose table options
type UseCustomTableOptions<D extends UnknownTableData> = Merge<
  & UseTableOptions<D> 
  & UseFiltersOptions<D>,
  {columns: Array<UseCustomTableColumn<D>>}
>

// compose instance props
type UseCustomTableInstanceProps<D extends UnknownTableData> =
  & UseTableInstanceProps<D> 
  & UseFiltersInstanceProps<D>

// your custom hook with plugins
function useCustomTable<D extends UnknownTableData>(
  options: UseCustomTableOptions<D>
): UseCustomTableInstanceProps<D> {
  return useTable(options, useFilters) as any
}

Its even easy to extend. Just add the typings of corresponding hooks using intersection &

This is type-unsafe inside the implementation, because of the required any cast. You are responsible to add proper types according to the hooks used! But its type-safe outside. The error is reduced to the custom hook code block.

You can craft with that reusable table components, example how props could look using the above types:

export type MuiTableProps<D extends UnknownTableData> = {
  data: Array<D>
  columns: UseCustomTableColumn<D>[]
}

export function MuiTable<D extends UnknownTableData>(props: MuiTableProps<D>) {
  const {data, columns} = props
  // includes typing useFilter props
  const {getTableProps, getTableBodyProps, headerGroups, rows, prepareRow} =
    useCustomTable<D>({
      data,
      columns
      // includes typing useFilter options
    })

  return (
    <Table {...getTableProps()}>
      <TableHead>
        {headerGroups.map(headerGroup => (
          <TableRow {...headerGroup.getHeaderGroupProps()}>
            {headerGroup.headers.map(header => (
              <TableCell {...header.getHeaderProps()}>
                {header.render("Header")}
              </TableCell>
            ))}
          </TableRow>
        ))}
      </TableHead>
      <TableBody {...getTableBodyProps()}>
        {rows.map(row => {
          prepareRow(row)
          return (
            <TableRow {...row.getRowProps()}>
              {row.cells.map(cell => (
                <TableCell {...cell.getCellProps()}>
                  {cell.render("Cell")}
                </TableCell>
              ))}
            </TableRow>
          )
        })}
      </TableBody>
    </Table>
  )
}

Use it:

export type ProductTableProps = {
  products: Array<Product>
}

export const ProductTable: React.FC<ProductTableProps> = props => {
  const {products} = props
  const columns = useMemo<MuiTableProps<Product>["columns"]>(
    () => [
      {Header: "ID", accessor: "_key"},
      {Header: "Name", accessor: "name"} // includes typing useFilter column options
    ],
    []
  )
  return <MuiTable columns={columns} data={products} />
}