React
Using ag-Grid with React: Columns

Expanding and Collapsing Groups

Let's learn how to programmatically expand and collapse column groups.

In the last video, we saw how the columnGroupShow property sets whether a column is visible when a column group is collapsed. We can also programmatically expand or collapse column groups.

First, we need to add a groupId to each group:

// src/App.js
{
 headerName: "Personal Information",
 groupId: "PersonalGroup",
 // rest unchanged
},
{
 headerName: "Address",
 groupId: "AddressGroup",
 // rest unchanged
},
{
  headerName: "Account Information",
  groupId: "AccountGroup",
 // rest unchanged
}

Then, we need to define a function to expand and collapse all the groups:

// src/App.js
toggleExpansion = expand => {
  let groupNames = ["PersonalGroup", "AddressGroup", "AccountGroup"];
  groupNames.forEach(groupId => {
    this.columnApi.setColumnGroupOpened(groupId, expand);
  });
};

Finally, we'll add two buttons above our grid to call the toggleExpansion function:

// src/App.js
<button type="button" onClick={() => this.toggleExpansion(true)}>
    Expand All
</button>
<button type="button" onClick={() => this.toggleExpansion(false)}>
     Collapse All
</button>

In the next video, we'll learn about moving columns around.