如何配置AG-Grid让分组行显示所有列完整内容？

预期效果 #

当前实现效果 #

当前配置 #

HTML代码 #

<ag-grid-angular class="ag-theme-material" [rowData]="rowData" [gridOptions]="gridOptions" />

TypeScript代码 #

gridOptions: GridOptions = {
  columnDefs: [
    { field: 'group', rowGroup: true, hide: true},
    { field: 'code', width: 100 },
    { field: 'description', flex: 1, minWidth: 300 },
    { field: 'from', width: 120 },
    { field: 'to', width: 120},
  ],
};
rowData = [
  { group: 100, code: 100, description: 'Group row 1', from: 0, to: 10 },
  { group: 100, code: 101, description: 'Child row 1', from: 1, to: 2 },
  { group: 100, code: 102, description: 'Child row 2', from: 2, to: 4 },
  { group: 200, code: 200, description: 'Group row 2', from: 10, to: 20 },
  { group: 200, code: 201, description: 'Child row 3', from: 12, to: 14 },
  { group: 200, code: 202, description: 'Child row 4', from: 14, to: 15 },
  { group: 200, code: 203, description: 'Child row 5', from: 15, to: 18 },
  { group: 300, code: 300, description: 'Group row 3', from: 20, to: 30 },
  { group: 400, code: 400, description: 'Group row 4', from: 30, to: 40 },
];

实现方案 #

这个需求完全可行，核心是让分组行绑定对应组的主数据，并自定义各列的渲染逻辑，具体配置如下：

修改后的TypeScript配置 #

gridOptions: GridOptions = {
  columnDefs: [
    { field: 'group', rowGroup: true, hide: true},
    { 
      field: 'code', 
      width: 100,
      cellRenderer: (params) => {
        // 分组行显示带展开/折叠图标的code
        if (params.node.group) {
          const icon = params.node.expanded ? '▼' : '▶';
          return `${icon} ${params.node.groupData.code}`;
        }
        // 普通行直接返回code
        return params.value;
      }
    },
    { 
      field: 'description', 
      flex: 1, 
      minWidth: 300,
      cellRenderer: (params) => {
        if (params.node.group) {
          return params.node.groupData.description;
        }
        return params.value;
      }
    },
    { 
      field: 'from', 
      width: 120,
      cellRenderer: (params) => {
        if (params.node.group) {
          return params.node.groupData.from;
        }
        return params.value;
      }
    },
    { 
      field: 'to', 
      width: 120,
      cellRenderer: (params) => {
        if (params.node.group) {
          return params.node.groupData.to;
        }
        return params.value;
      }
    },
  ],
  // 关闭默认分组计数显示
  suppressCount: true,
  // 为每个分组行绑定对应的主数据
  getGroupRowData: (params) => {
    // 从组内数据中找到与分组key匹配的主行
    const groupKey = params.key;
    return params.nodes.find(node => node.data.code === groupKey)?.data;
  },
};

原理说明 #

• getGroupRowData会为每个分组行匹配对应的主数据行，并将数据存储在params.node.groupData中，供渲染使用。
• 各列的cellRenderer判断当前行是否为分组行，若是则读取groupData中的对应字段值，非分组行保持默认渲染逻辑。
• suppressCount: true用于隐藏默认分组行后的(N)计数文本。

内容的提问来源于stack exchange，提问作者Øystein Amundsen