TanStack Table V8自定义排序：单元格含双值时如何实现列排序？

完全可行，TanStack Table V8支持通过自定义排序规则处理对象类型的单元格值，以下是两种常见实现方案：

方案1：固定排序依据（比如按count排序） #

直接通过sortKey字段指定排序时使用的具体数值，让表格明确排序逻辑：

columnHelper.accessor('violations', {
  id: 'violations',
  header: () => <p>Violations</p>,
  cell: (info) => (
    <div>
      <p>{info.getValue().count}</p>
      <p>{info.getValue().percent}%</p>
    </div>
  ),
  // 映射排序用的字段：按count数值排序
  sortKey: (row) => row.violations.count,
  // 如果要按percent排序，替换成：row.violations.percent
}),

sortKey的作用是将整行数据映射为单一排序值，表格会自动基于这个值执行升序/降序排序。

方案2：支持切换排序依据（count/percent切换） #

如果需要让用户手动切换排序的字段，可以结合状态管理+自定义sortFn实现：

步骤1：添加状态管理排序字段 #

import { useState } from 'react';

// 记录当前排序依据，默认按count排序
const [activeSortField, setActiveSortField] = useState('count');

步骤2：配置列的自定义排序与表头交互 #

columnHelper.accessor('violations', {
  id: 'violations',
  header: () => (
    <div style={{ cursor: 'pointer' }}>
      <p>Violations</p>
      {/* 添加切换按钮，让用户选择排序依据 */}
      <button 
        onClick={() => setActiveSortField(prev => 
          prev === 'count' ? 'percent' : 'count'
        )}
        style={{ border: 'none', background: 'transparent', cursor: 'pointer' }}
      >
        当前按：{activeSortField === 'count' ? '数量' : '百分比'}
      </button>
    </div>
  ),
  cell: (info) => (
    <div>
      <p>{info.getValue().count}</p>
      <p>{info.getValue().percent}%</p>
    </div>
  ),
  // 自定义排序函数，根据当前选择的字段比较
  sortFn: (rowA, rowB) => {
    const valA = rowA.getValue('violations')[activeSortField];
    const valB = rowB.getValue('violations')[activeSortField];
    // 数值类型直接做差实现升序，降序可反转return valB - valA
    return valA - valB;
  },
}),

这样用户点击表头的按钮就能切换排序依据，表格会自动按照当前选择的字段重新排序。

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