Sorting removed on third click on header

[natashajaved]

I am using react-table v7. I have added sorted to my table though sorting has this behavior that when a header is clicked the third time the sorting is removed. I want the sorting to be toggled once sorting is applied to a header e.g. If I clicked header and now it's sorted as ascending then on second click to descending then on third click back to descending and so on. Sorting should only be removed when some other header is clicked.

Here is the code snippet
`import React from 'react'
import { useSortBy, useTable } from 'react-table'

const Grid = (props) => {
console.log(props)
const { data, columns, showFooter = false, disableSort = false } = props
const {
getTableProps,
getTableBodyProps,
headerGroups,
rows,
prepareRow,
footerGroups
} = useTable({ columns, data, disableSortBy: false }, useSortBy)
return (

<table {...getTableProps()} className="table tr_bg mb-0">

{headerGroups.map(headerGroup => (
<tr {...headerGroup.getHeaderGroupProps()}>
{headerGroup.headers.map(column => {
console.log(column)
return <th
{...column.getHeaderProps(column.getSortByToggleProps())}
>
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
{column.render('Header')}
{<i className={fad color_orange cursor_pointer sorting ${column.isSorted ? column.isSortedDesc ? 'fa-sort-down' : 'fa-sort-up' : ''}} style={{ minWidth: 10 }} />}

})}

))}

<tbody {...getTableBodyProps()}>
{rows.map(row => {
prepareRow(row)
return (
<tr {...row.getRowProps()}>
{row.cells.map(cell => {
return (
<td
{...cell.getCellProps()}
>
{cell.render('Cell')}

)
})}

)
})}

{showFooter &&
{footerGroups.map(group => (
<tr {...group.getFooterGroupProps()} className="bg_dark_gray">
{group.headers.map(column => (
<td {...column.getFooterProps()}>{column.render('Footer')}
))}

))}
}

)
}`

[wildcat-cs]

I think this you are looking for disableSortRemove :

const {
...
} = useTable({ columns, data, disableSortRemove:true }, useSortBy)

[natashajaved]

@wildcat-cs YES! Thanks, this is what I was looking for.

[vittxr]

In v8, the api change the attribute name to enableSortingRemoval and you need to set it to false to have the same behaviour