React useTable hook with typescript

Question

So I have a JavaScript class with useTable. In Java script its been used like below

import {useTable, useFilters,useAsyncDebounce,useSortBy,usePagination,} from "react-table";

const {getTableProps,getTableBodyProps, headerGroups, page,prepareRow,state,visibleColumns, nextPage,pageOptions,pageCount,previousPage,canPreviousPage,canNextPage,setPageSize,gotoPage
      } = useTable({columns,data,defaultColumn,filterTypes,initialState: { pageSize: 10, pageIndex: 0 }
       },useFilters, useSortBy,usePagination);

I'm converting my javascript project to typescript.

In typescript that useTable line gives errors.

Example : Property 'page' does not exist on type 'TableInstance<object>'.ts(2339)

That initialState attribute gives my below error

Type '{ pageSize: number; pageIndex: number; }' is not assignable to type 'Partial<TableState<object>>'.
  Object literal may only specify known properties, and 'pageSize' does not exist in type 'Partial<TableState<object>>'.ts(2322)
index.d.ts(172, 5): The expected type comes from property 'initialState' which is declared here on type 'TableOptions<object>'

How to write that useTable line in Typescript ?

Yap

Answer 1

To use the react-table plugin extensions like usePagination with typescript the types for the plugins need to be declared.

This is done by creating a react-table-config.d.ts or similar and declaring the types for the plugin you'll be using (or for all of them).

This is described here: https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react-table

Lyonnaise

Would be great if they were added to "@types/react-table" – Akbar

Answer 2

This is how I solved it:

import {
  TableInstance,
  usePagination,
  UsePaginationInstanceProps,
  UsePaginationState,
  useSortBy,
  UseSortByInstanceProps,
  useTable,
} from "react-table";

export type TableInstanceWithHooks<T extends object> = TableInstance<T> &
  UsePaginationInstanceProps<T> &
  UseSortByInstanceProps<T> & {
    state: UsePaginationState<T>;
  };

export const TableComponent = () => {
  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    prepareRow,
    page,
    canPreviousPage,
    canNextPage,
    pageOptions,
    pageCount,
    gotoPage,
    nextPage,
    previousPage,
    setPageSize,
    state: { pageIndex, pageSize },
  } = useTable(
    {
      columns,
      data,
      initialState: { pageIndex: 0, sortBy },
    },
    useSortBy,
    usePagination
  ) as TableInstanceWithHooks<Deal>;

  // ...
}

Kiruna

Thank you sir! You fixed a very bad day at the office. – Ruling

Could you explain the Deal that is used as TableInstanceWithHooks<Deal>;.How is it initialized ? – Wallie

Deal is just the type of the data I am adding to the table, it could be any map type really interface Deal { … } – Kiruna