AG Grid需求：列选择器保留分组，表格列扁平化显示

核心实现逻辑 #

要达成列选择器保留分组结构，同时表格仅展示子列、不显示父分组列的效果，核心是让父分组列仅承担列选择器的分组容器角色，不渲染到表格中。

具体配置方案 #

1. 定义父分组列时隐藏表格渲染、保留工具面板显示 #

在列定义中，给父分组列设置hide: true让表格不渲染该列，同时设置suppressColumnsToolPanel: false确保它能在列选择器（工具面板）中正常作为分组容器展示：

const columnDefs = [
  {
    headerName: 'Participant',
    hide: true,
    suppressColumnsToolPanel: false,
    children: [
      { field: 'name', headerName: 'Name' },
      { field: 'age', headerName: 'Age' }
    ]
  },
  {
    headerName: 'Game of Choice',
    hide: true,
    suppressColumnsToolPanel: false,
    children: [
      { field: 'game', headerName: 'Game' },
      { field: 'genre', headerName: 'Genre' }
    ]
  }
];

2. 配置工具面板启用列分组展示 #

在gridOptions中开启工具面板，并指定列选择器以分组模式展示：

const gridOptions = {
  columnDefs: columnDefs,
  enableToolPanel: true,
  defaultToolPanel: 'columns',
  columnToolPanelParams: {
    suppressRowGroups: true,
    suppressValues: true,
    suppressPivots: true,
    suppressPivotMode: true,
    groupColumns: true // 强制列选择器展示分组结构
  }
};

3. 补充注意事项 #

• 父分组列在工具面板中默认支持折叠/展开，无需额外配置。
• 子列的显示/隐藏状态可直接通过自身的hide属性控制，不会影响父分组在工具面板的结构。

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