T
TanStack•3y ago
adverse-sapphire

How to enable multisorting for server side filtering?

Hey, I use react-table v8 and sort my data at server side. It works great for one column, but my server can sort by multiple columns. What's the best way to achieve the multiSort-ft with manualSorting: true 
  const table = useReactTable({
    data,
    state: { sorting: sortState, columnFilters: filters },
    manualSorting: true,
    enableMultiSort: true,
    manualFiltering: true,
    columns: tableColumns,
    getCoreRowModel: getCoreRowModel(),
    getExpandedRowModel: getExpandedRowModel(),
    onSortingChange: (sorting) => {
      if (onSort) {
        console.log(sorting()); // sorting() returns just on column, even if I hold down shift
        onSort(sorting());
      }
    },
    onColumnFiltersChange: (filterFn) => {
      if (onFilter) {
        onFilter(filterFn(filters));
      }
    },
    getRowCanExpand,
  });
  const table = useReactTable({
    data,
    state: { sorting: sortState, columnFilters: filters },
    manualSorting: true,
    enableMultiSort: true,
    manualFiltering: true,
    columns: tableColumns,
    getCoreRowModel: getCoreRowModel(),
    getExpandedRowModel: getExpandedRowModel(),
    onSortingChange: (sorting) => {
      if (onSort) {
        console.log(sorting()); // sorting() returns just on column, even if I hold down shift
        onSort(sorting());
      }
    },
    onColumnFiltersChange: (filterFn) => {
      if (onFilter) {
        onFilter(filterFn(filters));
      }
    },
    getRowCanExpand,
  });
Thanks and best regards!
1 Reply
mute-gold
mute-gold•3y ago
@wuarmin Figure it out? I might be doing this soon. It looks like it's a combination of the multi options and functions, such as enableMultiSort and toggleSorting(true|false, true)

Did you find this page helpful?