Ag-Grid Angular分组行二级展开后三级数据对齐异常问题

针对你遇到的三级数据在二级分组展开后左偏、无法对齐列头的问题，给出以下几个可行方案：

方案1：统一配置分组缩进值 #

Ag-Grid默认的分组缩进逻辑可能导致深层级数据偏移，你可以通过groupIndentation属性设置每级分组的固定缩进宽度，确保所有层级数据对齐列头。

在表格配置中添加该属性：

gridOptions = {
  // 其他原有配置
  groupIndentation: 40, // 数值可根据你的列头位置自行调整
  columnDefs: [
    { field: 'level1', rowGroup: true, hide: true },
    { field: 'level2', rowGroup: true, hide: true },
    { field: 'dataColumn1', headerName: '数据列1' },
    { field: 'dataColumn2', headerName: '数据列2' }
  ]
};

方案2：自定义分组单元格渲染器 #

如果默认缩进无法满足需求，可自定义分组单元格的渲染逻辑，手动控制不同层级的缩进距离，精准保证三级数据与列头对齐。

先创建自定义渲染组件：

import { Component } from '@angular/core';
import { ICellRendererAngularComp } from 'ag-grid-angular';
import { ICellRendererParams } from 'ag-grid-community';

@Component({
  template: `<div [style.padding-left.px]="calculateIndent()">
    {{ params.value }}
  </div>`
})
export class CustomGroupCellRenderer implements ICellRendererAngularComp {
  params: ICellRendererParams;

  agInit(params: ICellRendererParams): void {
    this.params = params;
  }

  calculateIndent(): number {
    // 根据当前分组层级计算缩进，确保三级数据对齐列头
    const groupLevel = this.params.node.level;
    // 示例逻辑：一级、二级分组各缩进40px，三级数据缩进80px（与列头对齐）
    return groupLevel * 40;
  }

  refresh(params: ICellRendererParams): boolean {
    this.params = params;
    return true;
  }
}

然后在表格配置中引用该组件：

columnDefs = [
  { 
    field: 'level1', 
    rowGroup: true, 
    hide: true,
    cellRenderer: 'customGroupCellRenderer'
  },
  { 
    field: 'level2', 
    rowGroup: true, 
    hide: true,
    cellRenderer: 'customGroupCellRenderer'
  },
  // 你的数据列配置
];

frameworkComponents = {
  customGroupCellRenderer: CustomGroupCellRenderer
};

方案3：排查列宽与默认展开配置 #

检查数据列的宽度设置是否合理，避免因列宽不足导致内容挤压偏移；同时确认groupDefaultExpanded配置是否影响层级渲染逻辑：

gridOptions = {
  groupDefaultExpanded: 0, // 按需设置默认展开的层级
  columnDefs: [
    { field: 'dataColumn1', headerName: '数据列1', width: 180 },
    { field: 'dataColumn2', headerName: '数据列2', width: 180 }
  ]
};

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