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) => (

{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中实现自定义排序图标。