React-Table: not assignable to type Partial<TableState<object>>

Question

I try to use "react-table": "^7.0.0-rc.15" with React + Typescript. I get the pagination example from sandbox https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/pagination and I try to run it. But in the point below

function Table({ columns, data }: any) {
// Use the state and functions returned from useTable to build your UI


const {
   getTableProps,
   getTableBodyProps,
   headerGroups,
   prepareRow,
   page, // Instead of using 'rows', we'll use page,
   // which has only the rows for the active page

   // The rest of these things are super handy, too ;)
   canPreviousPage,
   canNextPage,
   pageOptions,
   pageCount,
   gotoPage,
   nextPage,
   previousPage,
   setPageSize,
   state: { pageIndex, pageSize },
  } = useTable(
  {
     columns,
     data,
     initialState: { pageIndex: 2 },
  },
  usePagination
)

I get the error

Type '{ pageIndex: number; }' is not assignable to type 'Partial<TableState<object>>'.
Object literal may only specify known properties, and 'pageIndex' does not exist in type     'Partial<TableState<object>>'.  TS2322

 102 |       columns,
 103 |       data,
 104 |       initialState: { pageIndex: 2 },
     |                       ^
 105 |     },
 106 |     usePagination
 107 |   )

something is wrong with the type of { pageindex : 2 }. Any help?

check this issue: github.com/tannerlinsley/react-table/issues/1878 — user2432405
– user2432405, Commented Apr 7, 2020 at 13:24
Hi, could you please elaborate on the solution? This links point to an extremely complete example, I can't manage to get it right — Eric Burel
– Eric Burel, Commented Apr 14, 2020 at 9:21

Marta Vasconcelos · Accepted Answer · 2021-04-06 11:10:50Z

Create a file react-table-config.d.ts
Copy the file example posted here https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react-table/Readme.md

react-table-config.d.ts

import {
  UseColumnOrderInstanceProps,
  UseColumnOrderState,
  UseExpandedHooks,
  UseExpandedInstanceProps,
  UseExpandedOptions,
  UseExpandedRowProps,
  UseExpandedState,
  UseFiltersColumnOptions,
  UseFiltersColumnProps,
  UseFiltersInstanceProps,
  UseFiltersOptions,
  UseFiltersState,
  UseGlobalFiltersColumnOptions,
  UseGlobalFiltersInstanceProps,
  UseGlobalFiltersOptions,
  UseGlobalFiltersState,
  UseGroupByCellProps,
  UseGroupByColumnOptions,
  UseGroupByColumnProps,
  UseGroupByHooks,
  UseGroupByInstanceProps,
  UseGroupByOptions,
  UseGroupByRowProps,
  UseGroupByState,
  UsePaginationInstanceProps,
  UsePaginationOptions,
  UsePaginationState,
  UseResizeColumnsColumnOptions,
  UseResizeColumnsColumnProps,
  UseResizeColumnsOptions,
  UseResizeColumnsState,
  UseRowSelectHooks,
  UseRowSelectInstanceProps,
  UseRowSelectOptions,
  UseRowSelectRowProps,
  UseRowSelectState,
  UseRowStateCellProps,
  UseRowStateInstanceProps,
  UseRowStateOptions,
  UseRowStateRowProps,
  UseRowStateState,
  UseSortByColumnOptions,
  UseSortByColumnProps,
  UseSortByHooks,
  UseSortByInstanceProps,
  UseSortByOptions,
  UseSortByState
} from 'react-table'

declare module 'react-table' {
  // take this file as-is, or comment out the sections that don't apply to your plugin configuration

  export interface TableOptions<D extends Record<string, unknown>>
    extends UseExpandedOptions<D>,
      UseFiltersOptions<D>,
      UseGlobalFiltersOptions<D>,
      UseGroupByOptions<D>,
      UsePaginationOptions<D>,
      UseResizeColumnsOptions<D>,
      UseRowSelectOptions<D>,
      UseRowStateOptions<D>,
      UseSortByOptions<D>,
      // note that having Record here allows you to add anything to the options, this matches the spirit of the
      // underlying js library, but might be cleaner if it's replaced by a more specific type that matches your
      // feature set, this is a safe default.
      Record<string, any> {}

  export interface Hooks<D extends Record<string, unknown> = Record<string, unknown>>
    extends UseExpandedHooks<D>,
      UseGroupByHooks<D>,
      UseRowSelectHooks<D>,
      UseSortByHooks<D> {}

  export interface TableInstance<D extends Record<string, unknown> = Record<string, unknown>>
    extends UseColumnOrderInstanceProps<D>,
      UseExpandedInstanceProps<D>,
      UseFiltersInstanceProps<D>,
      UseGlobalFiltersInstanceProps<D>,
      UseGroupByInstanceProps<D>,
      UsePaginationInstanceProps<D>,
      UseRowSelectInstanceProps<D>,
      UseRowStateInstanceProps<D>,
      UseSortByInstanceProps<D> {}

  export interface TableState<D extends Record<string, unknown> = Record<string, unknown>>
    extends UseColumnOrderState<D>,
      UseExpandedState<D>,
      UseFiltersState<D>,
      UseGlobalFiltersState<D>,
      UseGroupByState<D>,
      UsePaginationState<D>,
      UseResizeColumnsState<D>,
      UseRowSelectState<D>,
      UseRowStateState<D>,
      UseSortByState<D> {}

  export interface ColumnInterface<D extends Record<string, unknown> = Record<string, unknown>>
    extends UseFiltersColumnOptions<D>,
      UseGlobalFiltersColumnOptions<D>,
      UseGroupByColumnOptions<D>,
      UseResizeColumnsColumnOptions<D>,
      UseSortByColumnOptions<D> {}

  export interface ColumnInstance<D extends Record<string, unknown> = Record<string, unknown>>
    extends UseFiltersColumnProps<D>,
      UseGroupByColumnProps<D>,
      UseResizeColumnsColumnProps<D>,
      UseSortByColumnProps<D> {}

  export interface Cell<D extends Record<string, unknown> = Record<string, unknown>, V = any>
    extends UseGroupByCellProps<D>,
      UseRowStateCellProps<D> {}

  export interface Row<D extends Record<string, unknown> = Record<string, unknown>>
    extends UseExpandedRowProps<D>,
      UseGroupByRowProps<D>,
      UseRowSelectRowProps<D>,
      UseRowStateRowProps<D> {}
}

Welcome to Stackoverflow.com! You should explain a bit more what to do instead of linking just out to some website. The source can be deleted some day and your answer then lacks of information.

henk · Accepted Answer · 2022-03-01 14:18:19Z

3

A brief explanation.

usePagination and other plugin hooks are extending the useTable hook. Since react-table type declaration won't know which plugin- hooks you will use, their types are not all included by default.

Therefore, you have to merge the type declaration of the plugins you are using into the react-table type declarations

How to merge the type declaration is explained in the DefinitelyTyped documentation for react-table types. See also Marta Vasconcelos answer for a brief version.

Also check out the Declaration Merging documentation to understand how it works and what it is for.

edited Mar 1, 2022 at 14:18

answered Jan 11, 2022 at 11:27

henk

2,8683 gold badges24 silver badges54 bronze badges

Comments

Nurul Huda · Accepted Answer · 2022-02-26 03:25:35Z

The type definitions of react-table are all global as mentioned on the doc

Therefore we need to create interface using union of all plugins that we are using.

First create a file named react-table-config.d.ts and place it somewhere on your project (like types/ or defs/).

If you only need usePagination plugin, then your file will look like this:

import { UsePaginationOptions } from "react-table";

declare module 'react-table' {
  export interface TableOptions<D extends Record<string, unknown>> extends
    UsePaginationOptions<D>,
    Record<string, any> {}

  export interface TableState<D extends Record<string, unknwon> = Record<string, unknonw>> extends
    UsePaginationState<D> {}

  export interface TableInstance<D extends Record<string, unknwon> = Record<string, unknonw>> extends
    UsePaginationInstanceProps<D> {}
}

Now your TableState and TableOptions will both contains state pageIndex, pageSize etc.

Collectives™ on Stack Overflow

React-Table: not assignable to type Partial<TableState<object>>

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related