启用行分组时如何调整MUI DataGrid的列顺序？

当启用行分组功能时，MUI Data Grid会自动将分组列移至表格最前列，哪怕它在列配置数组中是靠后的位置。要覆盖这个默认行为，有两种可行方案：

方案一：通过initialState强制指定列顺序 #

在DataGrid组件的initialState中显式定义columns.order数组，指定你想要的列ID顺序，这会直接覆盖行分组的自动调整逻辑。

示例代码：

<DataGrid
  rows={rows}
  columns={columns}
  initialState={{
    columns: {
      order: ['name', 'age', 'company'], // 按需求排列列ID
    },
  }}
  rowGroupingModel={[{ field: 'company' }]}
/>

方案二：使用columnOrder状态动态维护顺序 #

通过React状态管理列顺序，在分组模型变化时手动重置顺序，确保分组列不会被自动前置。

示例代码：

import { useState } from 'react';
import { DataGrid } from '@mui/x-data-grid';

export default function CustomColumnOrder() {
  const [columnOrder, setColumnOrder] = useState(['name', 'age', 'company']);
  const rows = [...]; // 你的数据行
  const columns = [...]; // 你的列配置

  return (
    <DataGrid
      rows={rows}
      columns={columns}
      columnOrder={columnOrder}
      rowGroupingModel={[{ field: 'company' }]}
      onRowGroupingModelChange={() => {
        setColumnOrder(['name', 'age', 'company']);
      }}
    />
  );
}

这两种方法都能让列顺序严格按照你的需求展示，不受行分组默认行为的影响。

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