ag-grid开启showOpenedGroup后能否修改默认缩进？

问题说明 #

使用AG Grid单列分组的showOpenedGroup属性时，会显示与分组值相同的子项，但这些子项会被自动缩进一级——哪怕它们和分组并非父子关系（比如你遇到的"United States"分组与子项的情况）。

解决方法 #

1. 自定义单元格渲染器手动控制缩进 #

编写自定义单元格渲染器，判断当前行值是否与父分组值一致，直接将缩进设置为与分组行相同：

const CustomGroupCellRenderer = (params) => {
  const matchesGroupValue = params.value === params.node.parent?.key;
  // 固定padding值，和分组行缩进保持一致，替代默认的层级缩进逻辑
  const padding = matchesGroupValue ? '16px' : `${params.node.level * 16 + 16}px`;
  return `<div style="padding-left: ${padding};">${params.value}</div>`;
};

在列配置中应用该渲染器：

{
  field: 'yourGroupField',
  rowGroup: true,
  showOpenedGroup: true,
  cellRenderer: CustomGroupCellRenderer
}

2. 覆盖AG Grid默认CSS样式 #

直接修改控制分组缩进的CSS类，针对目标行调整缩进：

/* 匹配一级分组下的同名子项，将缩进设置为与分组行一致 */
.ag-row.ag-row-level-1 .ag-cell-group-indent {
  padding-left: 16px !important;
}

若需要更精准的匹配，可先给目标行添加自定义类：

// 在Grid配置中添加行类判断逻辑
getRowClass: (params) => {
  return params.value === params.node.parent?.key ? 'same-as-group' : '';
}

再编写对应CSS：

.ag-row.same-as-group .ag-cell-group-indent {
  padding-left: 16px !important;
}

3. 调整数据结构（可选） #

如果业务逻辑允许，将这类同名子项从分组的子数据集中移出，作为独立的顶级行处理，从根源上避免被分组逻辑自动缩进。

内容的提问来源于stack exchange，提问作者César Santos