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!
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
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With