React+MUI X DataGrid：如何切换表头至第一列（顶部转左侧）

MUI X DataGrid 没有现成的Props直接支持将表头切换到左侧，核心实现思路是对表格的列配置和行数据进行转置，通过状态切换两种模式的数据源。

实现步骤 #

• 维护一个状态变量控制表头模式：

  const [isVerticalHeader, setIsVerticalHeader] = useState(false);
  

• 编写转置函数，将原表格的列与行数据转换为左侧表头的格式：
  • 转置后的列：以原行的ID作为新列的字段，行序号作为列标题
  • 转置后的行：以原列的标题作为左侧表头内容，原行的对应字段值填充单元格

完整示例代码 #

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

// 原顶部表头的列配置
const originalColumns = [
  { field: 'name', headerName: '姓名', width: 150 },
  { field: 'age', headerName: '年龄', width: 110 },
  { field: 'email', headerName: '邮箱', width: 200 },
];

// 原行数据
const originalRows = [
  { id: 1, name: '张三', age: 25, email: 'zhangsan@example.com' },
  { id: 2, name: '李四', age: 30, email: 'lisi@example.com' },
];

// 转置表格数据与列配置的工具函数
const transposeTable = (columns, rows) => {
  // 生成左侧表头模式的列配置
  const transposedColumns = [
    { field: 'header', headerName: '', width: 150 },
    ...rows.map(row => ({
      field: `row-${row.id}`,
      headerName: `行 ${row.id}`,
      width: 180,
    })),
  ];

  // 生成左侧表头模式的行数据
  const transposedRows = columns.map(col => ({
    id: col.field,
    header: col.headerName,
    ...rows.reduce((acc, row) => {
      acc[`row-${row.id}`] = row[col.field];
      return acc;
    }, {}),
  }));

  return { transposedColumns, transposedRows };
};

export default function HeaderToggleGrid() {
  const [isVerticalHeader, setIsVerticalHeader] = useState(false);
  const { transposedColumns, transposedRows } = transposeTable(originalColumns, originalRows);

  return (
    <div style={{ height: 400, width: '100%' }}>
      <Button 
        onClick={() => setIsVerticalHeader(!isVerticalHeader)} 
        style={{ marginBottom: 16 }}
      >
        {isVerticalHeader ? '切换为顶部表头' : '切换为左侧表头'}
      </Button>
      <DataGrid
        columns={isVerticalHeader ? transposedColumns : originalColumns}
        rows={isVerticalHeader ? transposedRows : originalRows}
        disableRowSelectionOnClick
      />
    </div>
  );
}

注意事项 #

• 若原列包含复杂配置（如自定义renderCell、过滤器、排序器），需要在转置时同步迁移这些逻辑到新的列/行配置中
• 大数据量场景下，建议缓存转置后的结果，避免每次渲染重复计算
• 左侧表头模式下，排序、筛选等交互功能需要重新适配，因为数据结构已发生变化

内容的提问来源于stack exchange，提问作者emir alp aksungur