当然可以在react-admin的DataGrid组件中实现分组功能啦！其实react-admin里的DataGrid底层依托的是Material-UI的DataGrid组件，而MUI的DataGrid本身就支持行分组能力，咱们完全可以基于这个特性来做出你想要的分组效果～

1. 准备合适的依赖版本 #

如果想要完整的分组功能（比如拖拽列头分组、折叠/展开分组、自定义分组头），建议安装@mui/x-data-grid-pro（Pro版的DataGrid提供了更完善的分组能力），命令如下：

npm install @mui/x-data-grid-pro
# 或者用yarn
yarn add @mui/x-data-grid-pro

2. 在react-admin中引入Pro版DataGrid #

react-admin默认导出的DataGrid是基于Community版的，所以要使用分组功能，咱们需要直接导入Pro版本的组件：

import { DataGridPro } from '@mui/x-data-grid-pro';
import { List, useListContext } from 'react-admin';

export const PostList = () => {
    const { data, total, isLoading } = useListContext();
    const rows = data ? data.map(row => ({ ...row, id: row.id })) : [];

    return (
        <List>
            <DataGridPro
                rows={rows}
                columns={columns}
                loading={isLoading}
                rowCount={total}
                // 设置默认分组字段，比如按category分组
                groupingModel={[{ field: 'category' }]}
            />
        </List>
    );
};

3. 配置可分组的列 #

在列配置中，给需要支持分组的字段加上groupable: true，这样用户还能手动拖拽列头来切换分组维度：

const columns = [
    { field: 'title', headerName: '文章标题', width: 250 },
    { field: 'category', headerName: '文章分类', width: 180, groupable: true },
    { field: 'author', headerName: '作者', width: 150, groupable: true },
    { field: 'publishDate', headerName: '发布日期', width: 180, type: 'date' },
];

4. 自定义分组头样式（可选） #

如果想让分组行的显示更贴合你的业务需求，可以用renderGroupHeaderCell来自定义内容：

const renderGroupHeaderCell = (params) => {
    return (
        <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
            <span>【{params.groupingField}】</span>
            <strong>{params.value}</strong>
            <span style={{ color: '#666' }}>共{params.children.length}条内容</span>
        </div>
    );
};

// 在DataGridPro中添加这个属性
<DataGridPro
    // ...其他属性
    renderGroupHeaderCell={renderGroupHeaderCell}
/>

5. 控制分组的展开/折叠状态（可选） #

你还可以通过expandedRowGroups来控制默认展开哪些分组，或者监听展开状态的变化：

import { useState } from 'react';

export const PostList = () => {
    // 默认展开分类为"技术"的分组
    const [expandedGroups, setExpandedGroups] = useState(['category:技术']);
    const { data, total, isLoading } = useListContext();
    const rows = data ? data.map(row => ({ ...row, id: row.id })) : [];

    return (
        <List>
            <DataGridPro
                rows={rows}
                columns={columns}
                loading={isLoading}
                rowCount={total}
                groupingModel={[{ field: 'category' }]}
                expandedRowGroups={expandedGroups}
                onExpandedRowGroupsChange={(newGroups) => setExpandedGroups(newGroups)}
            />
        </List>
    );
};

如果暂时不想用Pro版，Community版的DataGrid没有原生分组能力，这时候得自己预处理数据（比如把同组数据合并，手动添加分组头行），但这种方式比较繁琐，不如Pro版省心高效。

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