React-Table - How to remove the 'Toggle sortBy' tooltip from the column header?

user_11523019 0
Viewed 3424

In the latest version (7.5.x) of React-Table, when using the Material-UI Table components, is there a way to remove the 'Toggle sortBy' tooltip from the column header?

Two tooltips

I have a tooltip with the column header name. both tooltips appear upon hover. Take a look at this codesandbox

material-ui react-table-v7 react-table reactjs
3 Answers

Adding {...column.getHeaderProps(column.getSortByToggleProps({ title: undefined }))} did the trick.

Here's the updated codesandbox

user_115230190

Or just overwrite the title like in:

<span {...column.getGroupByToggleProps()} title="">
user_3724590

If you want to override it with your own label you can do this. You can also only show the label on columns that can be sorted.

<span {...column.getGroupByToggleProps()} title={column.canSort ? `Sort By ${column.id}` : ""}>
user_71391720
Related