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.