如何阻止Antd Table中特定分组行参与排序？

核心思路 #

给分组行添加专属标识字段，在Table的排序回调中分离分组行与非分组行，仅对非分组行执行排序逻辑，最后将分组行固定在顶部合并数据源。

具体步骤 #

1. 标记分组行
   在groupedData的每条数据中添加isGroupRow: true标识，非分组行无需添加（或设为false）：

const groupedData = [
  { key: 'client', name: 'Client', isGroupRow: true, spend: 1200, impressions: 50000 },
  { key: 'campaign', name: 'Campaign', isGroupRow: true, spend: 800, impressions: 35000 },
  { key: 'plan', name: 'Plan', isGroupRow: true, spend: 400, impressions: 15000 },
];

const nonGroupedData = [
  { key: '1', name: 'Ad 1', spend: 300, impressions: 10000 },
  { key: '2', name: 'Ad 2', spend: 250, impressions: 8000 },
  // ... 其他非分组数据
];

2. 维护排序后数据源状态
   使用useState管理最终渲染的数据源，初始值为分组行加非分组行的合并结果：

const [sortedData, setSortedData] = useState([...groupedData, ...nonGroupedData]);

3. 自定义排序处理逻辑
   在Table的onChange回调中，分离分组行与非分组行，仅对非分组行执行排序：

const handleTableChange = (_, __, sorter) => {
  // 提取固定在顶部的分组行
  const fixedGroupRows = sortedData.filter(item => item.isGroupRow);
  // 提取需要排序的非分组行
  let sortableRows = sortedData.filter(item => !item.isGroupRow);

  // 根据当前排序规则处理非分组行
  if (sorter.field && sorter.order) {
    sortableRows = [...sortableRows].sort((a, b) => {
      const valueA = a[sorter.field];
      const valueB = b[sorter.field];
      
      if (sorter.order === 'ascend') {
        return valueA > valueB ? 1 : -1;
      } else {
        return valueA < valueB ? 1 : -1;
      }
    });
  }

  // 合并分组行与排序后的非分组行，更新状态
  setSortedData([...fixedGroupRows, ...sortableRows]);
};

4. 配置Table组件
   将dataSource设为排序后的状态值，绑定onChange回调，并给需要支持排序的列开启sorter: true：

<Table
  dataSource={sortedData}
  columns={[
    { title: '名称', dataIndex: 'name', key: 'name' },
    { title: '花费', dataIndex: 'spend', key: 'spend', sorter: true },
    { title: '曝光量', dataIndex: 'impressions', key: 'impressions', sorter: true },
  ]}
  onChange={handleTableChange}
/>

说明 #

• 分组行通过isGroupRow标识被筛选出来，始终固定在数据源最顶部，不受任何排序操作影响。
• 非分组行会根据用户选择的排序列和排序方向（升序/降序）单独排序，排序后追加在分组行下方。
• 如果需要更复杂的排序规则（比如字符串多维度排序、数字精度处理），可以在sort回调中针对性调整比较逻辑。

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