MUI DataGrid排序时如何始终将"untouched"行固定在列底部？

这个问题我之前也踩过坑！MUI DataGrid的自动反转排序确实会打乱自定义的排序逻辑，尤其是当我们想把特殊值固定在某个位置的时候。

先给你分析下原来的方法为什么失效：当你切换到降序排序时，DataGrid会自动把sortComparator的返回结果反转。比如你原来的逻辑里，如果v1是"untouched"、v2是有效日期，会返回1（表示v1排在v2后面），但降序时这个结果会被改成-1，直接导致"untouched"跑到最前面，完全违背了你的需求。

解决方法其实很简单：利用sortComparator的第三个参数sortDirection，这个参数会告诉我们当前的排序方向，这样我们就能自己控制比较逻辑，不用依赖DataGrid的自动反转了。

直接上可用的代码：

sortComparator: (v1, v2, sortDirection) => {
  // 两个都是"untouched"，保持相对位置不变
  if (v1 === "untouched" && v2 === "untouched") return 0;

  // 核心逻辑：不管升序/降序，"untouched"永远排在另一个值的后面
  if (v1 === "untouched") {
    return 1; // v1是untouched，让它在v2后面
  }
  if (v2 === "untouched") {
    return -1; // v2是untouched，让它在v1后面
  }

  // 处理有效日期的比较，根据当前排序方向返回对应结果
  const date1 = new Date(v1);
  const date2 = new Date(v2);
  
  if (sortDirection === "asc") {
    return date1 - date2; // 升序：早的日期在前
  } else {
    return date2 - date1; // 降序：晚的日期在前
  }
}

我来拆解下这个逻辑：

1. 先处理两个值都是"untouched"的情况，直接返回0，保证它们的相对位置不会乱。
2. 只要其中一个值是"untouched"，不管当前是升序还是降序，都固定让它排在另一个值的后面——这样不管怎么切换排序方向，"untouched"永远不会跑到前面。
3. 对于有效日期的部分，我们根据当前的排序方向直接返回正确的比较结果：升序用date1 - date2，降序就反过来用date2 - date1，完全绕开DataGrid的自动反转逻辑。

这样调整后，不管你点升序还是降序，所有带有效日期的行都会按要求排序，而"untouched"的行就乖乖待在最底部了！

另外给你提个小优化建议：如果你的项目需要兼容旧版浏览器，可能会出现日期字符串解析失败的情况，这时候可以用date-fns的parse方法来更稳妥地解析，比如：

import { parse } from 'date-fns';
const date1 = parse(v1, "d MMMM yyyy, h:mm a", new Date());

不过现代浏览器对你用的这种日期格式支持已经很好了，这个属于可选优化。

内容来源于stack exchange