如何在Angular版AG-Grid行分组中添加嵌套行

针对你的层级结构数据集（包含children子节点），可以通过AG Grid的Tree Data模式快速实现主项展开显示子项，且子项与主项使用完全相同的列定义，具体实现步骤如下：

1. 组件类核心配置 #

在Angular组件中配置Grid的Tree Data模式、列定义及数据：

import { Component } from '@angular/core';
import { ColDef, GridOptions } from 'ag-grid-community';

@Component({
  selector: 'app-nested-grid',
  templateUrl: './nested-grid.component.html'
})
export class NestedGridComponent {
  // 你的原始数据集
  rowData = [
    {
      "name": "Test A",
      "id": 10,
      "desc": "test description",
      "status": "Valid",
      "children": [
        {
          "name": "Test Child A-1",
          "id": 100,
          "desc": "test description",
          "status": "Invalid"
        },
        {
          "name": "Test Child A-2",
          "id": 88,
          "desc": "test description",
          "status": "Valid"
        }
      ]
    },
    {
      "name": "Test B",
      "id": 68,
      "desc": "test description",
      "status": "Valid",
      "children": [
        {
          "name": "Test Child B-1",
          "id": 45,
          "desc": "test description",
          "status": "Valid"
        },
        {
          "name": "Test Child B-2",
          "id": 35,
          "desc": "test description",
          "status": "Valid"
        }
      ]
    }
  ];

  // 统一列定义：主项和子项共用
  columnDefs: ColDef[] = [
    { field: 'id', headerName: 'ID', width: 80 },
    { field: 'desc', headerName: '描述' },
    { field: 'status', headerName: '状态', width: 100 }
  ];

  gridOptions: GridOptions = {
    // 开启Tree Data模式
    treeData: true,
    // 指定子节点获取逻辑
    getChildNodes: (node) => node.data.children || [],
    // 自定义自动分组列（展开/折叠列）
    autoGroupColumnDef: {
      headerName: '名称',
      cellRendererParams: {
        innerRenderer: (params) => params.data.name
      }
    },
    defaultColDef: { flex: 1, resizable: true },
    animateRows: true
  };
}

2. 模板文件 #

在组件HTML中添加AG Grid标签：

<ag-grid-angular
  style="width: 100%; height: 500px;"
  class="ag-theme-alpine"
  [rowData]="rowData"
  [columnDefs]="columnDefs"
  [gridOptions]="gridOptions"
></ag-grid-angular>

关键细节说明 #

• Tree Data模式：AG Grid Enterprise原生支持层级数据展示，无需手动配置行分组，通过treeData: true开启即可。
• getChildNodes：必须配置该函数，告知Grid每个节点的子节点来源（这里对应数据中的children数组）。
• autoGroupColumnDef：Tree Data会自动生成一个带展开/折叠按钮的列，通过此配置可以自定义该列的表头和显示内容（这里显示name字段），其他列（ID、描述、状态）对主项和子项完全复用。
• 子节点会自动继承主节点的列定义，无需额外编写子列配置。

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