antd table 自定义排序图标

要在Ant Design的Table组件中自定义排序图标，可以使用sorter和sortDirections属性来实现自定义排序逻辑和图标。以下是一个示例，演示如何在Ant Design的Table中自定义排序图标：

import React, { useState } from 'react';

import { Table, Space } from 'antd';

import { CaretUpOutlined, CaretDownOutlined } from '@ant-design/icons';

const data = [

  {

    key: '1',

    name: 'John Brown',

    age: 32,

  },

  {

    key: '2',

    name: 'Jim Green',

    age: 42,

  },

  // 添加更多数据

];

const columns = [

  {

    title: 'Name',

    dataIndex: 'name',

    key: 'name',

    sorter: (a, b) => a.name.localeCompare(b.name),

    sortDirections: ['ascend', 'descend'],

    render: (text, record) => (

      <Space size="middle">

        {text}

        {record.name === 'John Brown' && (

          <span>{record.age > 35 ? <CaretUpOutlined /> : <CaretDownOutlined />}</span>

        )}

      </Space>

    ),

  },

  {

    title: 'Age',

    dataIndex: 'age',

    key: 'age',

    sorter: (a, b) => a.age - b.age,

    sortDirections: ['ascend', 'descend'],

  },

];

const CustomSortIconsTable = () => {

  const [sortedInfo, setSortedInfo] = useState({});

  const handleChange = (pagination, filters, sorter) => {

    setSortedInfo(sorter);

  };

  return (

    <Table

      columns={columns}

      dataSource={data}

      onChange={handleChange}

      pagination={false}

      showSorterTooltip={false} // 隐藏默认的排序提示

    />

  );

};

export default CustomSortIconsTable;

在上述示例中，我们创建了一个名为CustomSortIconsTable的函数组件，该组件包含一个Ant Design的Table。在columns配置中，我们定义了两列，分别是“Name”和“Age”。我们使用sorter属性来指定自定义的排序逻辑，然后使用sortDirections属性来指定排序的方向（升序和降序）。

在“Name”列中，我们还使用了render属性来自定义渲染单元格内容，并根据条件显示不同的排序图标。在这个示例中，我们检查了名字是否是“John Brown”，如果是，则根据年龄的条件显示升序或降序图标。

最后，我们使用Table组件来呈现表格，并将onChange回调用于处理排序事件。这样，你就可以在Ant Design的Table中实现自定义排序图标。