TanStack Table自定义状态排序函数异常及可扩展性优化问题

问题1：修复排序函数实现预期顺序 #

你的排序函数问题在于**statusOrder数组缺少了'none'状态**，导致indexOf('none')返回-1，打乱了排序逻辑。同时需要确保所有状态都被包含在排序顺序中，才能实现none -> single -> complicated -> relationship的排序。

修改后的排序函数如下：

const sortStatusFn: SortingFn<Person> = (rowA, rowB, _columnId) => {
  const statusA = rowA.original.status;
  const statusB = rowB.original.status;
  // 包含所有需要排序的状态，按预期顺序排列
  const statusOrder = ['none', 'single', 'complicated', 'relationship'];
  
  // 获取每个状态的索引，处理未定义状态（默认放到最后）
  const indexA = statusOrder.indexOf(statusA);
  const indexB = statusOrder.indexOf(statusB);
  
  return (indexA === -1 ? statusOrder.length : indexA) - (indexB === -1 ? statusOrder.length : indexB);
};

这样修改后，所有状态都会按照你预期的顺序排序，未在statusOrder中定义的状态会被默认放到排序结果的末尾。

问题2：提升排序函数的可扩展性 #

为了方便后续添加更多状态，建议将排序权重与排序逻辑分离，使用**映射表（Map或对象）**来存储状态对应的排序权重，这样新增状态时只需修改映射表，无需改动排序函数本身。

方案1：使用Map存储权重（推荐，支持任意键类型）

// 单独维护排序权重配置，新增状态直接添加键值对即可
const statusSortWeights = new Map([
  ['none', 0],
  ['single', 1],
  ['complicated', 2],
  ['relationship', 3],
  // 示例：新增状态
  ['divorced', 4]
]);

const sortStatusFn: SortingFn<Person> = (rowA, rowB, _columnId) => {
  const statusA = rowA.original.status;
  const statusB = rowB.original.status;
  
  // 获取权重，未定义状态默认使用最大权重（放到最后）
  const weightA = statusSortWeights.get(statusA) ?? statusSortWeights.size;
  const weightB = statusSortWeights.get(statusB) ?? statusSortWeights.size;
  
  return weightA - weightB;
};

方案2：使用对象存储权重（适合字符串类型状态）

// 排序权重配置对象
const statusSortWeights = {
  none: 0,
  single: 1,
  complicated: 2,
  relationship: 3,
  divorced: 4 // 新增状态
};

const sortStatusFn: SortingFn<Person> = (rowA, rowB, _columnId) => {
  const statusA = rowA.original.status;
  const statusB = rowB.original.status;
  
  const weightA = statusSortWeights[statusA as keyof typeof statusSortWeights] ?? Object.values(statusSortWeights).length;
  const weightB = statusSortWeights[statusB as keyof typeof statusSortWeights] ?? Object.values(statusSortWeights).length;
  
  return weightA - weightB;
};

这两种方案都能让你在不修改排序函数核心逻辑的前提下，快速扩展支持新的状态值。

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