如何在MUI X Data Grid Pro中编辑行后禁用自动重排序

直接使用MUI Data Grid Pro内置的disableSortingOnDataChange属性就能解决你的问题，它可以禁止表格在数据更新（比如编辑行）时自动套用当前排序规则，只有用户主动点击排序按钮才会重新执行排序。

修改后的代码示例 #

const [sortModel, setSortModel] = React.useState([]);

const onRowUpdate = (...) => {
  // 执行你的行更新逻辑，无需清空sortModel
};

const handleSortChange = (model) => {
  setSortModel(model);
};

return (
  <DataGridPro
    {...props}
    processRowUpdate={onRowUpdate}
    sortModel={sortModel}
    onSortModelChange={handleSortChange}
    // 核心属性：阻止数据变更时自动排序
    disableSortingOnDataChange
  />
);

逻辑说明 #

• 开启disableSortingOnDataChange后，用户编辑行（包括修改排序依据列）时，表格会保持当前的行顺序，不会自动把该行移到新的排序位置。
• 当用户需要重新排序时，再次点击列头的排序按钮，onSortModelChange会触发更新sortModel，表格会重新执行排序操作。
• 这种方案完全利用组件内置属性实现，不需要手动维护行顺序或修改底层排序逻辑，既简洁又能避免不必要的渲染问题。

如果需要更精细化的控制（比如仅在用户编辑期间禁用自动排序），可以结合状态变量动态控制该属性：

const [isEditing, setIsEditing] = React.useState(false);

const handleEditStart = () => {
  setIsEditing(true);
};

const handleEditStop = () => {
  setIsEditing(false);
};

// ...

<DataGridPro
  {...props}
  processRowUpdate={onRowUpdate}
  sortModel={sortModel}
  onSortModelChange={handleSortChange}
  disableSortingOnDataChange={isEditing}
  onEditStart={handleEditStart}
  onEditStop={handleEditStop}
/>

这样只有在用户处于编辑状态时才会禁用自动排序，其他场景下表格仍会正常响应数据变更后的排序逻辑。

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