I'm new using Antd, I've create a table with sort functionalities, but I need to change the text on the tooltip of the sorter.

Sorter tooltip:-

Thanks in advance, if you need any extra code snippet just please let me know.

I'm new using Antd, I've create a table with sort functionalities, but I need to change the text on the tooltip of the sorter.

Sorter tooltip:-

Thanks in advance, if you need any extra code snippet just please let me know.

• javascript
• antd

4 Answers 4

Based on this issue in github you can set locale property of Table to what you want

<Table 
      locale={{ 
          triggerDesc: 'descend sort text',
          triggerAsc: 'ascend sort text', 
          cancelSort: 'cancel sort text'
      }}
   />

Per the documentation, tables use the Sorter object, which implements a Tooltip.

You can find more information on the Table API here: https://ant.design/ponents/table/

And more on the Tooltip API here: https://ant.design/ponents/tooltip/#API

Essentially you'll want to set the yourTable.showSorterTooltip property to an object which contains the properties you want. It looks like the specific property you're looking for is just "title" but you can see the full list of properties in the Tooltip API

I was able to solve it this way:

<Table showSorterTooltip={{ title: 'Clic para ordenar' }}
       columns={tableColumn}
       dataSource={item}
       rowClassName='ps-pointer'
       rowKey={record => record.codigo_pedido_pra}
       style={{ cursor: 'pointer' }}
  />

The trick is to use the showSorterTooltip property.

If you want the same sorter message everywhere then you can just do:

<Table showSorterTooltip={true} />

or

<Table showSorterTooltip={{title: 'Sorter Title'}} />

but if you want to have different sorter message for different sort state in individual column ( when sort type is multiple ) then what you can do is:

• maintain the sort state for the columns
• Update the sort title as per the sort state in the column (ColumnType also has showSorterTooltip):
• showSorterTooltip: {{title: 'Individual title'}}