React中Material-UI DataGrid如何创建带column span的多级表头

使用 @mui/x-data-grid v6.0.0 及以上版本即可原生实现该效果，低版本无内置列分组跨距能力，手动改CSS兼容虚拟滚动、列拖拽的成本极高，建议先升级依赖。
注：列跨距多级表头是社区免费版自带功能，不需要购买Pro/Premium授权。

• 多级表头+列跨距不需要引入第三方插件，通过组件自带的columnGroupingModel配置+列/分组的colSpan属性即可完成。
• 先按常规方式定义最底层的列配置，每个列保证field字段唯一。
• 传入columnGroupingModel数组配置上层表头分组，每个分组支持以下核心配置：
  • groupId: 分组唯一标识，对应上层表头单元格
  • headerName: 上层表头显示文本
  • children: 分组覆盖的范围，既可以传底层列的field，也可以嵌套其他分组id，实现任意层级的多级表头
  • colSpan: 自定义列跨距，默认会自动按children包含的列数计算跨距，需要动态调整跨列规则时传函数即可，入参包含当前分组关联的所有列、列宽等信息。

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

// 最底层列配置
const columns = [
  { field: 'id', headerName: 'ID', width: 90 },
  { field: 'name', headerName: '姓名', width: 150 },
  { field: 'age', headerName: '年龄', width: 100 },
  { field: 'registerTime', headerName: '注册时间', width: 180 },
  { field: 'status', headerName: '账号状态', width: 120 },
  { field: 'action', headerName: '操作', width: 150 },
];

// 多级表头跨距配置
const columnGroupingModel = [
  {
    groupId: 'basicInfo',
    headerName: '个人信息',
    // 默认自动按children列数计算跨距，这里自动跨2列
    children: [{ field: 'name' }, { field: 'age' }],
  },
  {
    groupId: 'accountInfo',
    headerName: '账户信息',
    // 自定义跨距示例，这里固定跨3列，也可以根据参数动态返回
    colSpan: () => 3,
    children: [
      { field: 'registerTime' },
      { field: 'status' },
      { field: 'action' }
    ],
  },
];

// 模拟表格行数据
const rows = [
  { id: 1, name: '张三', age: 25, registerTime: '2023-01-12', status: '正常', action: '编辑' },
  { id: 2, name: '李四', age: 30, registerTime: '2022-11-03', status: '封禁', action: '编辑' },
];

export default function MultiSpanHeaderGrid() {
  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        rows={rows}
        columns={columns}
        columnGroupingModel={columnGroupingModel}
        sx={{
          // 可选：给上层表头加样式区分层级
          '& .MuiDataGrid-columnHeader--filledGroup': {
            backgroundColor: '#f5f5f5',
            fontWeight: 600,
          }
        }}
      />
    </div>
  );
}

• 实现3级及以上表头时，直接在分组的children里嵌套子分组配置即可，没有层级数量限制。
• 不要通过强制写CSS宽度、合并DOM的方式模拟跨距，会和DataGrid内置的虚拟滚动、列宽拖拽、固定列逻辑冲突，出现布局错位，用原生colSpan配置不会有这类问题。
• 需要给上层表头加整组排序、筛选、自定义操作按钮时，给分组配置renderHeader属性即可，入参能拿到分组下所有列的API方法。
• 如果需要隐藏某一层的表头分隔线，给对应分组加headerAlign: 'center'调整样式即可。

内容的提问来源于stack exchange，提问作者sahana h m