如何在MUI DataGrid中实现数组标签的单标签分组功能？

MUI DataGrid原生分组机制不支持一行数据同时归属多个分组（groupingValueGetter要求返回单个值），但可以通过数据预处理+配置调整实现需求，具体步骤如下：

1. 预处理源数据 #

将每个带多标签的条目拆分为多个独立行，每行对应一个标签，并生成唯一ID确保DataGrid能识别不同行：

// 源数据
const originalRows = [
  { id: 1, name: "Bob", tags: ["Small", "Fast"] },
  { id: 2, name: "Sam", tags: ["Small", "Slow"] }
];

// 预处理：将多标签条目拆分为单标签行
const rows = originalRows.flatMap(row =>
  row.tags.map(tag => ({
    ...row,
    id: `${row.id}-${tag}`, // 生成唯一ID，避免行冲突
    tag: tag // 新增单独的tag字段作为分组依据
  }))
);

2. 配置DataGrid列与分组 #

新增tag列作为分组字段，隐藏原tags列，并配置分组规则：

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

const columns: GridColDef[] = [
  { field: "name", headerName: "名称", width: 150 },
  { 
    field: "tag", 
    headerName: "标签", 
    width: 150,
    hideable: false
  },
  { field: "tags", headerName: "标签组", width: 200, hide: true } // 隐藏原标签组列
];

export default function App() {
  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        rows={rows}
        columns={columns}
        // 默认开启tag列分组
        initialState={{
          grouping: {
            model: { tag: true },
          },
        }}
        // 自定义分组行显示，添加统计数量
        groupingColDef={{
          valueFormatter: (params) => 
            `${params.value} (${params.groupingRow?.children.length} 个用户)`,
        }}
        disableRowSelectionOnClick
      />
    </div>
  );
}

3. 关键细节说明 #

• 唯一ID的必要性：拆分后的行必须有唯一id，否则DataGrid会出现行重复、渲染异常等问题
• 分组统计：通过groupingColDef.valueFormatter可以在分组行显示该标签下的用户数量，满足统计需求
• 行操作兼容：如果需要编辑/删除行，需额外处理回写逻辑——拆分后的行是源数据的副本，修改时要同步更新源数据中对应条目的标签信息
• 性能考量：数据量极大时，拆分后行数会翻倍，需评估内存占用和渲染性能，必要时配合分页优化

效果验证 #

处理后的数据分组后会呈现：

• Small分组：包含Bob、Sam两行
• Fast分组：包含Bob一行
• Slow分组：包含Sam一行

完全符合按单个标签分组并统计的需求。

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