📌The sort icon should always visible 🕵🏼‍♀️

[ArtemFedorchuk]

The sort icon should always be visible no matter whether click you on the column header or not!
Have a look at the screenshot, I need to have the same behaviour 👇🏻

Currently, I'm using version V8 for React.
Do we have some property or a possibility for it?

I've tried to find something like this disableSortRemove:true in the current documentation but I couldn't(

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

Could you help to solve this issue, please?

[KevinVandy]

enableSortingRemoval: false

[ArtemFedorchuk]

I'm not sure it's correct, regarding the documentation the sort icon appears after first clicking on the column header

Enables/Disables the ability to remove sorting for the table. If true then changing sort order will circle like: 'none' -> 'desc' -> 'asc' -> 'none' -> ... If false then changing sort order will circle like: 'none' -> 'desc' -> 'asc' -> 'desc' -> 'asc' -> ...

[KevinVandy]

I mean, when it comes to the CSS and logic of the sort icon, all of that logic is up to you. You control that code. What are you exactly asking for here?

[ArtemFedorchuk]

Thanks a lot, I understand

[oleg-kuibar]

You can handle the sort icon display based on the current sorting state and the enableSortingRemoval flag like this:

// MyComponent
<td>

{/* ... */}

{
  {
    asc: <ArrowUpwardOutlined />,
    desc: <ArrowDownwardOutlined />,
    false: enableSortingRemoval ? null : <ArrowUpwardOutlined />,
  }[header.column.getIsSorted() as string] || <ArrowUpwardOutlined />
}
{flexRender(header.column.columnDef.header, header.getContext())}

{/* ... */}

</td>

• When enableSortingRemoval is true, the sort icon will be hidden when the column has no sorting (false state), as null is returned in that case.
• When enableSortingRemoval is false, the sort icon will always show the upward arrow (<ArrowUpwardOutlined />) even when the column isn't sorted (false state), ensuring the icon is always visible.
• For both cases, when the column is sorted ascending (asc) or descending (desc), the respective arrow icons are displayed.