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

Question

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

Can you provide a codesandbox example to reproduce the problem? — Giovanni Esposito, Aug 30 '20 at 15:05

Vladi Feldman · Accepted Answer · 2020-09-02T07:00:12.903

22

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

Here's the updated codesandbox

edited Sep 02 '20 at 07:00

answered Aug 30 '20 at 15:45

Vladi Feldman

872
1
8
16

2

Just for reference, this is due to this line in React Table source code: https://github.com/tannerlinsley/react-table/blob/v7.6.3/src/plugin-hooks/useSortBy.js#L51 – ghybs Feb 10 '21 at 06:22

score 2 · Answer 2 · answered Mar 14 '22 at 10:20

2

Or just overwrite the title like in:

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

answered Mar 14 '22 at 10:20

Obiwahn

2,677
2
26
36

score 0 · Answer 3 · answered May 23 '22 at 18:31

0

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}` : ""}>

answered May 23 '22 at 18:31

Ade Crown

1,120
14
16

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

3 Answers3