Antd表格：使用showSorterTooltip时按排序状态修改提示文本

问题描述 #

我想根据Antd表格的排序状态（升序、降序、取消排序）修改排序提示框的文本。原本通过Table组件的locale属性可以实现文本切换，示例代码如下：

<Table
  columns={columns}
  dataSource={data}
  locale={{
        triggerDesc: 'Click to sort descending',
        triggerAsc: 'Click to sort ascending',
        cancelSort: 'Click to cancel sorting'
      }}
/>

但因为需要调整提示框的位置等样式，改用了列配置中的showSorterTooltip属性，配置示例如下：

{
      title: 'Student name',
      dataIndex: 'name',
      key: 'name',
      sorter: (a: any, b: any) => a.name.localeCompare(b.name),
      render: val => val,
      onFilter: (value, record) => record.name.includes(value),
      showSorterTooltip: {
        title: <span className="sort-tooltip-background"> Click to sort </span>,
        placement: 'topRight',
        arrowPointAtCenter: false,
        autoAdjustOverflow: true,
        align: { offset: [20, 0] },
        color: '#fff'
      },
      width: '14vw'
},

现在showSorterTooltip的提示文本是固定的，请问如何实现像默认locale那样根据排序状态动态切换提示文本，同时保留showSorterTooltip的样式配置？

解决方案 #

核心思路是通过维护表格的排序状态，动态生成showSorterTooltip的title内容，同时保留原有样式配置，具体实现如下：

步骤说明 #

1. 维护排序状态：用状态变量记录当前表格的排序字段和方向
2. 动态计算提示文本：在列配置中根据当前排序状态，判断该列的排序情况并返回对应文本
3. 保留样式配置：将动态生成的title嵌入原有showSorterTooltip配置中

完整示例代码 #

import { useState } from 'react';
import { Table } from 'antd';

const App = () => {
  // 记录当前表格的排序状态：字段key、排序order（ascend/descend/空）
  const [sortState, setSortState] = useState({ key: '', order: '' });

  const columns = [
    {
      title: 'Student name',
      dataIndex: 'name',
      key: 'name',
      sorter: (a, b) => a.name.localeCompare(b.name),
      onFilter: (value, record) => record.name.includes(value),
      width: '14vw',
      showSorterTooltip: {
        // 动态生成提示文本
        title: (() => {
          const isCurrentSortCol = sortState.key === 'name';
          if (isCurrentSortCol) {
            if (sortState.order === 'ascend') {
              return <span className="sort-tooltip-background">Click to sort descending</span>;
            } else if (sortState.order === 'descend') {
              return <span className="sort-tooltip-background">Click to cancel sorting</span>;
            }
          } else {
            return <span className="sort-tooltip-background">Click to sort ascending</span>;
          }
          return <span className="sort-tooltip-background">Click to sort</span>;
        })(),
        // 保留原有的样式配置
        placement: 'topRight',
        arrowPointAtCenter: false,
        autoAdjustOverflow: true,
        align: { offset: [20, 0] },
        color: '#fff'
      }
    },
    // 其他列配置...
  ];

  // 表格排序变化时更新状态
  const handleTableChange = (pagination, filters, sorter) => {
    setSortState({
      key: sorter.field || '',
      order: sorter.order || ''
    });
  };

  const data = [
    { key: '1', name: 'John Doe' },
    { key: '2', name: 'Jane Smith' },
    { key: '3', name: 'Bob Johnson' }
  ];

  return (
    <Table
      columns={columns}
      dataSource={data}
      onChange={handleTableChange}
    />
  );
};

export default App;

自定义文本逻辑调整 #

如果需要更贴合locale的逻辑（未排序提示升序，升序提示降序，降序提示取消），可以直接修改title中的判断逻辑，完全匹配需求。

内容的提问来源于stack exchange，提问作者Anushka Subedi