Ag-Grid列工具面板分组显示切换功能是否原生支持？

AG-Grid原生就支持控制列工具面板里分组的显示/隐藏，不用手动去增删列选择器数组元素，用自带的API就能搞定。

具体实现步骤 #

1. 给目标分组添加唯一标识 #

在定义列分组时，为需要控制的分组设置唯一的groupId，示例如下：

const columnDefs = [
  {
    headerName: 'participant',
    groupId: 'participant-group',
    children: [/* 你的子列定义 */]
  },
  {
    headerName: 'game of choice',
    groupId: 'game-choice-group',
    children: [/* 你的子列定义 */]
  },
  // 其他列或分组
];

2. 调用原生API动态切换状态 #

获取AG-Grid的columnApi实例后，直接调用setColumnGroupVisible方法即可切换分组的显示/隐藏：

// 隐藏指定分组
columnApi.setColumnGroupVisible('participant-group', false);
columnApi.setColumnGroupVisible('game-choice-group', false);

// 显示指定分组
columnApi.setColumnGroupVisible('participant-group', true);
columnApi.setColumnGroupVisible('game-choice-group', true);

调用该方法后，AG-Grid会自动处理DOM的渲染与移除，完全无需手动操作DOM或修改列数组。

补充说明 #

如果需要彻底从工具面板中移除分组（而非仅隐藏），也可以动态更新columnDefs后调用gridApi.setColumnDefs()，但这种方式效率不如原生API——setColumnGroupVisible是AG-Grid优化过的方法，不会触发整个列结构的重渲染。

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