React-Table V7 useSortBy Hook not working properly

Question

Using react-table V7 useSortBy hook's toggleSortBy function toggles ascending first then descending and then on third toggle instead of setting isSortedDesc to false, it sets isSorted to false.

I want to keep toggling between true and false values till a different header is clicked.

check this link for reference of the issue

Answer 1

You can make use of toggleSortBy function on the table header from column property and call it on onClick event

<th 
      {...column.getHeaderProps(column.getSortByToggleProps())} 
      onClick={() => column.toggleSortBy(!column.isSortedDesc)}
>

Working demo