Ag-Grid - 列工具面板 - 隐藏组

Question

在上面提供的图片中，您可以观察到“栏目部分”下有两个不同的组，即“参与者”和“选择的游戏”。

我正在寻找一个切换功能，当设置为“false”时，将避免在文档对象模型（DOM）中渲染上述组。相反，当此函数设置为“true”时，它应该在 DOM 中呈现这些组。

他们在 AG-grid 中是否有类似的功能，或者我们必须手动完成

从发送到列选择器的数组中删除并添加回元素

Answer 1

基本上，您每次都需要设置列定义。

这就是我们在列工具面板中更改运动员列的可见性的方法

const toggleAthleteColumn = useCallback(() => {
  var columnDefs = gridRef.current.api.getColumnDefs();
  columnDefs.forEach(function (colDef, index) {
    if (colDef.colId === 'athlete') {
      colDef.suppressColumnsToolPanel = !colDef.suppressColumnsToolPanel;
    }
  });
  gridRef.current.api.setColumnDefs(columnDefs);
}, []);

单击“切换运动员栏”按钮查看其实际效果：https://plnkr.co/edit/EgqBuTnm9gAUgGKl?preview