Semi-Design Table组件自定义排序顺序的实现方案

背景介绍

Semi-Design是一个优秀的企业级设计系统，其中的Table组件提供了丰富的功能，包括排序、筛选等。在实际业务场景中，我们经常需要对表格数据进行排序操作。默认情况下，Table组件的排序顺序是：不排序 -> 升序 -> 降序。但在某些业务场景下，降序的需求可能远大于升序，每次都需要切换两次才能到达降序状态，这会影响用户体验。

技术实现方案

受控组件原理

在React中，受控组件是指组件的状态完全由React的state控制。对于Table组件的排序功能，我们可以通过控制sortOrder属性来实现自定义的排序顺序切换逻辑。

实现步骤

1. 状态管理：首先需要在组件中定义并管理排序状态
2. 事件监听：通过Table的onChange回调监听排序变化
3. 自定义逻辑：在回调函数中实现自定义的排序顺序切换逻辑

代码示例

import React, { useState } from 'react';
import { Table } from '@douyinfe/semi-ui';

function CustomSortTable() {
    const [sortOrder, setSortOrder] = useState('ascend');
    
    const columns = [
        {
            title: '大小',
            dataIndex: 'size',
            sorter: (a, b) => a.size - b.size,
            sortOrder: sortOrder,
        },
        // 其他列配置...
    ];
    
    const handleTableChange = (data) => {
        const nextSortOrder = data.sorter.sortOrder;
        if (nextSortOrder !== sortOrder) {
            // 自定义排序顺序切换逻辑
            let newOrder;
            if (sortOrder === 'ascend') {
                newOrder = 'descend';
            } else if (sortOrder === 'descend') {
                newOrder = undefined; // 不排序
            } else {
                newOrder = 'ascend';
            }
            setSortOrder(newOrder);
        }
    };
    
    return <Table columns={columns} onChange={handleTableChange} />;
}

进阶技巧

自定义排序图标

除了控制排序顺序外，还可以完全自定义排序图标的渲染：

{
    title: '自定义排序',
    dataIndex: 'custom',
    sorter: true,
    renderSorter: ({ sortOrder }) => {
        // 完全自定义排序图标的渲染
        return (
            <div onClick={handleCustomSort}>
                {sortOrder === 'ascend' && <IconAscend />}
                {sortOrder === 'descend' && <IconDescend />}
                {!sortOrder && <IconDefault />}
            </div>
        );
    }
}

多列排序控制

如果需要实现更复杂的多列排序控制，可以在state中维护一个排序状态对象：

const [sortStates, setSortStates] = useState({
    size: undefined,
    date: undefined,
    // 其他列...
});

const handleMultiSort = (data) => {
    const { field, sortOrder } = data.sorter;
    setSortStates(prev => ({
        ...prev,
        [field]: sortOrder
    }));
};

性能优化建议

1. 避免不必要的渲染：使用React.memo或useMemo优化列配置
2. 大数据量处理：对于大数据集，考虑实现服务端排序
3. 状态管理：在复杂场景下，可以考虑使用状态管理库如Redux管理排序状态

总结

通过Semi-Design Table组件的受控属性，我们可以灵活地实现各种自定义排序需求。无论是简单的顺序调整，还是复杂的多列排序控制，都可以通过合理利用React的状态管理机制来实现。这种方案不仅保持了组件的灵活性，还能很好地与现有功能集成，是处理表格排序需求的推荐做法。

在实际项目中，开发者可以根据具体业务需求，选择最适合的实现方式，平衡开发效率和用户体验。