MUI X Data Grid中singleSelect列排序异常：sortComparator参数为undefined

问题原因 #

1. singleSelect列缺少必要配置：未定义valueOptions，Grid无法识别列的可选值集合，导致无法正确读取单元格值，传递给sortComparator的参数为undefined。
2. sortComparator参数签名错误：你只声明了单个参数，而该回调需要接收两个待比较的值（以及可选的额外参数）。
3. 额外：你的onCellEditStop回调存在语法错误，字符串拼接使用了.而非逗号。

修复方案 #

1. 补充singleSelect列的valueOptions配置 #

给status列添加valueOptions，明确列的可选值，并修正sortComparator逻辑：

{
  field: 'status',
  headerName: 'Status',
  width: 120,
  type: 'singleSelect',
  editable: true,
  valueOptions: ['accepted', 'rejected', 'pending'], // 新增可选值配置
  renderCell: (params) => <StatusControl ... />,
  sortComparator: (a, b) => {
    // 自定义排序优先级，示例：pending > accepted > rejected
    const priority = { pending: 0, accepted: 1, rejected: 2 };
    // 处理值为undefined的情况，默认排最后
    const valA = priority[a] ?? 3;
    const valB = priority[b] ?? 3;
    return valA - valB;
  }
}

2. 修正onCellEditStop的语法错误 #

onCellEditStop={(e) => {
  console.log('edit stop ', e); // 将`.`改为逗号，修复语法错误
}}

3. 检查rows数据完整性 #

确保所有row对象的status字段都包含有效值（accepted/rejected/pending），避免出现undefined值。如果存在缺失值，可在sortComparator中统一处理（如上述代码中的?? 3）。

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