咨询：点击表头实现Fixed Data Table排序的简易替代方案

嘿，我刚好有个轻量又好上手的实现方案，不用照搬官方那种复杂示例，核心就是靠React状态管理+原生数组排序，一步步来：

1. 初始化排序状态 #

先在组件里维护排序的字段和方向，优先默认给ID列升序：

// 函数组件用useState
const [sortConfig, setSortConfig] = useState({ key: 'id', direction: 'asc' });

// 如果是类组件，就放state里
// this.state = { sortConfig: { key: 'id', direction: 'asc' } };

2. 实现数据排序逻辑 #

用useMemo（函数组件）缓存排序后的结果，避免每次渲染都重复排序浪费性能：

const sortedData = useMemo(() => {
  // 先拷贝一份原数据，别直接修改原数组
  let sortedList = [...yourApiData];
  
  if (sortConfig.key) {
    sortedList.sort((a, b) => {
      // 如果是数字类型的ID，直接减更简洁
      if (typeof a[sortConfig.key] === 'number') {
        return sortConfig.direction === 'asc' 
          ? a[sortConfig.key] - b[sortConfig.key] 
          : b[sortConfig.key] - a[sortConfig.key];
      }
      // 字符串类型的话，用localeCompare处理大小写
      const comparison = a[sortConfig.key].localeCompare(b[sortConfig.key]);
      return sortConfig.direction === 'asc' ? comparison : -comparison;
    });
  }
  return sortedList;
}, [yourApiData, sortConfig]); // 依赖原数据和排序配置，变化时重新排序

3. 给表头加点击触发逻辑 #

写一个处理排序切换的函数，点击表头时切换升/降序，或者切换排序字段：

const handleHeaderClick = (columnKey) => {
  let newDirection = 'asc';
  // 如果点击的是当前排序的字段，就切换方向
  if (sortConfig.key === columnKey && sortConfig.direction === 'asc') {
    newDirection = 'desc';
  }
  setSortConfig({ key: columnKey, direction: newDirection });
  
  // 类组件的话就用this.setState
  // this.setState({ sortConfig: { key: columnKey, direction: newDirection } });
};

4. 改造表头渲染 #

把ID列的表头改成可点击的，还要加上排序方向的箭头提示：

<Column
  columnKey="id"
  headerRenderer={() => (
    <div 
      onClick={() => handleHeaderClick('id')}
      style={{ cursor: 'pointer', fontWeight: sortConfig.key === 'id' ? 'bold' : 'normal' }}
    >
      ID 
      {/* 显示当前排序方向的箭头 */}
      {sortConfig.key === 'id' && (sortConfig.direction === 'asc' ? ' ↑' : ' ↓')}
    </div>
  )}
  cellRenderer={({ cellData }) => cellData}
  width={120}
/>

5. 用排序后的数据渲染表格 #

最后把表格的rows属性换成我们处理好的sortedData就行，其他列如果要加排序，只要重复步骤4，把handleHeaderClick的参数换成对应字段名就OK。

这种方式完全不需要额外依赖，代码量少还容易理解，刚好满足你优先ID列排序的需求，要是有特殊类型的字段（比如日期），只要在sort函数里加对应的类型判断处理就行~

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