如何在MUI DataGrid的sortModel中配置多列初始排序？

我有一个可接收不同数据的DataGrid组件，对应两个表格——一个包含“Modify Date”列，另一个包含“Start Date”列。我希望通过initialState属性将两个表格的日期列都设置为降序，但目前发现MUI似乎只允许配置一个排序项。

我的简化代码如下：

<DataGrid
  autoHeight
  pagination
  initialState={{
    sorting: {
      sortModel: [{ field: "startDate", sort: "desc" }],
    },
  }}
/>

我尝试添加另一个排序项，修改为：

sortModel: [{ field: "startDate", sort: "desc" }, { field: "modifyDate", sort: "desc" }],

请问这种配置是否可行？或者有没有办法设置首列始终按降序排序？

解决方案 #

MUI DataGrid的sortModel本身支持配置多个排序项，你尝试的写法是完全可行的——只要确保对应表格的列字段名（field）和数据中的字段完全匹配，就能实现多列的默认降序排序。

针对不同表格单独配置默认排序 #

如果是两个独立的DataGrid实例，分别对应含“Start Date”和“Modify Date”的表格，可以给每个组件单独配置initialState：

• 含“Start Date”列的表格：

<DataGrid
  autoHeight
  pagination
  initialState={{
    sorting: {
      sortModel: [{ field: "startDate", sort: "desc" }],
    },
  }}
  // 其他表格配置props
/>

• 含“Modify Date”列的表格：

<DataGrid
  autoHeight
  pagination
  initialState={{
    sorting: {
      sortModel: [{ field: "modifyDate", sort: "desc" }],
    },
  }}
  // 其他表格配置props
/>

锁定首列始终降序 #

如果需要让某个表格的首列始终保持降序（不受用户其他排序操作影响），可以通过onSortModelChange事件强制锁定首列的排序规则：

const handleSortModelChange = (newSortModel) => {
  const targetField = "startDate"; // 替换为你的首列实际字段名
  let updatedModel = [...newSortModel];
  
  // 检查首列是否在排序模型中
  const targetIndex = updatedModel.findIndex(item => item.field === targetField);
  if (targetIndex === -1) {
    // 不在则添加到排序模型最前面
    updatedModel.unshift({ field: targetField, sort: "desc" });
  } else {
    // 存在则强制设置为降序
    updatedModel[targetIndex].sort = "desc";
  }
  
  // 这里可以将updatedModel更新到组件状态（如果用受控模式）
};

<DataGrid
  autoHeight
  pagination
  initialState={{
    sorting: {
      sortModel: [{ field: "startDate", sort: "desc" }],
    },
  }}
  onSortModelChange={handleSortModelChange}
  // 其他表格配置props
/>

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