2

I am following the example here Codesandbox Example and by default I can sort each column by clicking on each header. If I have a table like the following:

score firstName lastName
6 Anne Faith
10 Bob Smith

I want to sort them using a separate dropdown component with options:

  • Sort score from high to low
  • Sort score from low to high
  • Sort first name from high to low
  • Sort first name from low to high
  • Sort last name from high to low
  • Sort last name from low to high

How do I do this using react-table v7?

Fer-de-lance
  • 375
  • 5
  • 23

1 Answers1

0

The useSortBy docs has the methods you can use for this: toggleSortBy and setSortBy.

toggleSortBy: Function(ColumnId: String, descending: Bool, isMulti: Bool) => void

This function can be used to programmatically toggle the sorting for any specific column

setSortBy: Function(sortBy: Array<Object<id: columnId, desc: Bool = true>>) => void

This function can be use to programmatically set the sortBy for the table instance.

Here's a fork of the setSortBy sandbox to give you an idea of how to use these methods.

toki
  • 936
  • 5
  • 18