如何使用MUI DataGrid在React JS中实现首列分组多行表格

1. 核心方案 #

Material UI DataGrid的**主从详情（Master-Detail）**功能完全匹配你要的首列对应多子行的结构，以下是可直接复用的代码示例和配置说明。

2. 完整代码实现 #

第一步：导入依赖组件 #

import { DataGrid, GridRowParams } from '@mui/x-data-grid';
import { Box, Typography } from '@mui/material';

第二步：定义主从结构数据 #

主行包含子行数据数组，方便后续渲染子表格：

const rows = [
  {
    id: 1,
    mainCategory: "电子产品",
    total: 15000,
    subRows: [
      { id: 11, name: "手机", price: 8000, quantity: 1 },
      { id: 12, name: "平板", price: 7000, quantity: 1 }
    ]
  },
  {
    id: 2,
    mainCategory: "家居用品",
    total: 5000,
    subRows: [
      { id: 21, name: "沙发", price: 3000, quantity: 1 },
      { id: 22, name: "茶几", price: 2000, quantity: 1 }
    ]
  }
];

第三步：配置主表格列与详情面板 #

// 主表格列配置
const columns = [
  { 
    field: 'mainCategory', 
    headerName: '分类', 
    width: 180,
    // 自定义首列样式，强化分组视觉
    renderCell: (params) => (
      <Typography variant="subtitle1" fontWeight="bold">
        {params.value}
      </Typography>
    )
  },
  { field: 'total', headerName: '总计', width: 120, type: 'number' }
];

// 生成子表格的详情面板内容
const getDetailPanelContent = (params: GridRowParams) => {
  // 子表格列配置
  const subColumns = [
    { field: 'name', headerName: '商品名称', width: 150 },
    { field: 'price', headerName: '单价', width: 100, type: 'number' },
    { field: 'quantity', headerName: '数量', width: 100, type: 'number' }
  ];

  return (
    <Box sx={{ p: 2 }}>
      <DataGrid
        rows={params.row.subRows}
        columns={subColumns}
        hideFooter
        autoHeight
      />
    </Box>
  );
};

第四步：渲染主表格 #

export default function MasterDetailGrid() {
  return (
    <Box sx={{ height: 400, width: '100%' }}>
      <DataGrid
        rows={rows}
        columns={columns}
        getDetailPanelContent={getDetailPanelContent}
        // 控制展开/收起的字段标识
        detailPanelExpandedField="isExpanded"
        // 可选：默认展开所有主行
        initialState={{
          detailPanel: { expandedRows: { 1: true, 2: true } }
        }}
      />
    </Box>
  );
}

3. 关键配置说明 #

• getDetailPanelContent：核心属性，接收主行参数并返回子表格的JSX，实现主从关联
• detailPanelExpandedField：指定用于存储展开状态的字段，支持点击主行切换展开/收起
• 自定义首列渲染：通过renderCell给主行首列加粗，强化分组标题的视觉层级
• 子表格优化：用hideFooter和autoHeight让子表格更贴合主行的分组结构

4. 扩展方案：首列单元格合并风格 #

如果需要首列单元格合并的视觉效果（而非展开面板），可以用DataGrid的**行分组（Row Grouping）**功能：

// 改成扁平数据结构
const flatRows = [
  { id:11, mainCategory:"电子产品", name:"手机", price:8000, quantity:1 },
  { id:12, mainCategory:"电子产品", name:"平板", price:7000, quantity:1 },
  { id:21, mainCategory:"家居用品", name:"沙发", price:3000, quantity:1 },
  { id:22, mainCategory:"家居用品", name:"茶几", price:2000, quantity:1 }
];

// 列配置开启分组
const columns = [
  { field: 'mainCategory', headerName: '分类', width: 180, rowGroup: true },
  { field: 'name', headerName: '商品名称', width: 150 },
  { field: 'price', headerName: '单价', width: 100, type: 'number' },
  { field: 'quantity', headerName: '数量', width: 100, type: 'number' }
];

// 渲染分组表格
<DataGrid
  rows={flatRows}
  columns={columns}
  rowGroupingColumnMode="single"
  showCellVerticalBorder
  // 可选：开启聚合计算，自动统计分组总计
  aggregationModel={{ price: { function: 'sum' } }}
/>

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