Ag Grid无限行模型（Infinite RowModelType）下列分组功能失效问题

核心问题分析 #

你的代码存在几处关键错误，同时结合无限行模型（infinite）的特性，需要服务端配合才能实现分组功能：

1. autoGroupColumnDef 配置语法错误 #

你在props里直接写了return { ... }，这是语法错误——JSX的props值如果是对象，直接定义对象即可，不需要额外的return语句。

2. 缺少明确的分组列配置 #

你提到设置了rowGroup: true的列，但代码里没有给出columnDefs配置。必须在列定义中明确指定哪些列作为分组列，否则Grid无法识别分组规则。

3. 无限行模型下的分组依赖服务端逻辑 #

使用rowModelType="infinite"时，Ag Grid不会在客户端执行分组操作，所有分组、分页、排序逻辑都需要服务端处理。你的数据源必须返回分组后的结构化数据，并且正确实现数据拉取的方法。

4. setDataSource 参数错误 #

params.api.setDataSource需要传入符合Ag Grid要求的数据源对象，而不是字符串。这个对象必须包含getRows方法，用来从服务端获取分页、分组后的 data。

修正后的代码示例 #

<AgGridReact 
    rowSelection="multiple"
    groupSelectsChildren={true}
    groupDisplayType="singleColumn"
    rowModelType="infinite"
    // 修正autoGroupColumnDef的写法，注意字段名是field而非fieldName
    autoGroupColumnDef={{
        headerName: "Resource",
        field: "Name",
        cellRenderer: 'agGroupCellRenderer'
    }}
    // 新增分组列配置，设置rowGroup为true并隐藏原列
    columnDefs={[
        { field: "category", rowGroup: true, hide: true },
        { field: "Name" },
        // 其他业务列定义...
    ]}
    onGridReady={params => {
        // 配置正确的数据源对象，实现getRows方法处理服务端请求
        params.api.setDataSource({
            getRows: (gridParams) => {
                // 调用服务端接口，传递分组、分页参数
                fetch(`/your-api-url?startRow=${gridParams.startRow}&endRow=${gridParams.endRow}&groupKeys=${gridParams.groupKeys}`)
                    .then(res => res.json())
                    .then(response => {
                        // 将服务端返回的数据和总条数传给Grid
                        gridParams.successCallback(response.rows, response.totalRows);
                    })
                    .catch(() => {
                        gridParams.failCallback();
                    });
            }
        });
    }}
/>

关键注意事项 #

• 服务端需处理分组请求：无限模型下，服务端要根据Grid传递的groupKeys参数返回对应的分组数据，数据结构需包含group、children等Ag Grid识别的分组字段。
• 分组列需显式配置：在columnDefs中设置rowGroup: true的列，通常会将其隐藏（hide: true），因为分组后的内容会显示在自动生成的分组列中。
• 字段名注意规范：列定义中使用field而非fieldName，这是Ag Grid的标准属性名。

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