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 ?

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