12

I have an typescript error when using react-table with useGlobalFilter. I just followed some instructions on internet. Here is my code:

const DataTable : React.FC<IDataTableProps> = ({columns, data}) => {
    const {
        getTableProps,
        getTableBodyProps,
        headerGroups,
        rows,
        prepareRow,
        setGlobalFilter,
        state,
    } = useTable({columns, data}, useGlobalFilter);

    const GlobalFilter = ({ globalFilter , setGlobalFilter} : {globalFilter: any, setGlobalFilter: any})  => {
        return (
            <input
                value={globalFilter || ""}
                onChange={e => {
                setGlobalFilter(e.target.value || undefined); // Set undefined to remove the filter entirely
                }}
                placeholder={`Search All ...`}
            />
            );
        };

    return <Container>
        <GlobalFilter globalFilter={state.globalFilter} setGlobalFilter={setGlobalFilter} />
        <Table {...getTableProps()}>
            <THead>
                {headerGroups.map(headerGroup => (
                    <TR {...headerGroup.getHeaderGroupProps()}>
                        {headerGroup.headers.map(column => {
                            return (
                                <TH {...column.getHeaderProps()}>{column.render("Header")}</TH>
                            )}
                        )}
                    </TR>
                ))}
            </THead>
            <TBody {...getTableBodyProps()} >
                {rows.map((row, i) => {
                    prepareRow(row);
                    return (
                        <TR {...row.getRowProps()}>
                            {row.cells.map(cell => {
                                return <TD {...cell.getCellProps()} >
                                    {cell.render("Cell")}
                                </TD>
                            })}
                        </TR>
                    )
                })}
            </TBody>
        </Table>
    </Container>
}

Typescript error that I get: Property 'setGlobalFilter' does not exist on type 'TableInstance'. TS2339

Can anyone help me? Thank a lot!

Improve this question

3 Answers 3

Reset to default
10

It is possible that you are missing the @types/react-table package.

If the package is installed already, there is another step to follow to get this to run. You'll need to create a react-table-config.d.ts file in the @types folder.

Please fill it with the following configuration and take out the parts that are not needed

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> {}
}

The solution comes from the DefinitelyTyped for react-table

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

I am getting an error, after declaring a react-table-config.d.ts file in the @types folder. Is there any workaround for that ? (Error: All declarations of 'TableOptions' must have identical type parameters.ts(2428))
@Prateek I have exactly the same problem; all the exports in the file above (TableOption, Hooks, TableInstance, etc.) produce the same error. After a lot of frustration, I managed to fix it by rolling back the versions to @types/react-table 7.0.14 and react-table 7.0.4. This doesn't seem like a satisfying solution though.
If you want class names (or other custom properties) in your columns see stackoverflow.com/a/69547841/481207.
The above file can be in your codebase, eg. /src/types, ie. you do not have to put it in /node_modules where it can get removed/overwritten.
I am getting correct references through VS code intellisense but the compiler is not able to resolve the custom types in the build. I tried adding typeRoots field in tsconfig but the compiler doesn't seem to pick up the custom types. Any idea?
8

If you got the complaint All declarations of 'TableInstance' must have identical type parameters.ts(2428) when doing migration guide from DefinitelyTyped, you can manually tweak the provided react-table-config.d.ts file to match with the type parameter from your @types/react-table package.

Go to the type definition package (node_modules/@types/react-table), look into index.d.ts file you will see many generic interfaces, these interfaces have different parameter from the interface you has in your react-table-config.d.ts file, which is why it complain when trying to merge these declarations.

For example, this is the interface from type definition package

export interface TableInstance<D extends object = {}>

And this is the corresponding interface in your react-table-config.d.ts

export interface TableInstance<D extends Record<string, unknown> = Record<string, unknown>>

From there the fix should be straightforward, just change the parameter part in your react-table-config.d.ts file to match with your type definition package.

Alter react-table-config.d.ts is not really desirable (especially with the "take this file as-is" comment), still this is what work best for me without any complaint and no downgrading (I am using react-table 7.7.0 and @types/react-table 7.7.2). I am hoping for react-table v8 which will have its built-in type definition to avoid this headache.

Improve this answer

2 Comments

excelent explanation
you just saved me from hours of scouring the internet
1

Try this:

create a folder @types and create the file @types/react-table-config.d.ts

in that file put

import { UseGlobalFiltersOptions } from 'react-table'

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

  export interface TableInstance<D extends Record<string, unknown>>
    extends UseGlobalFiltersInstanceProps<D> {}
}
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.