React-Table sortingFns in useReactTable() causes typescript error

145 views Asked by At

I have been trying to add a custom sorting function to one of the columns in my react table, and I keep getting met with TypeScript errors.

I followed the docs and added the module:

declare module "@tanstack/table-core" {
  interface SortingFns {
    myCustomSorting: SortingFn<unknown>;
  }
}

Then I try to define my function as follows:

const table1 = useReactTable({
    data: usersFilter,
    columns,
    initialState: {
      pagination: {
        pageSize: 50
      }
    },
    getCoreRowModel: getCoreRowModel(),
    getSortedRowModel: getSortedRowModel(),
    getPaginationRowModel: getPaginationRowModel(),
    sortingFns: {
      myCustomSorting: (rowA: any, rowB: any, columnId: any): number => {
        console.log("hi");
        return 0;
      },
    },
  });

And I'm met with the following error:

Argument of type '{ data: any[]; columns: ColumnDef<AmbassadorType>[]; initialState: { pagination: { pageSize: number; }; }; getCoreRowModel: (table: Table<any>) => () => RowModel<any>; getSortedRowModel: (table: Table<...>) => () => RowModel<...>; getPaginationRowModel: (table: Table<...>) => () => RowModel<...>; sortingFns: { ...; ...' is not assignable to parameter of type 'TableOptions<any>'.
  Object literal may only specify known properties, and 'sortingFns' does not exist in type 'TableOptions<any>'.ts(2345)
0

There are 0 answers