igGrid Collapsible Column Groups feature

Ignite UI Team / Monday, November 14, 2016

You asked for it and we are delivering! igGrid Collapsible Column Groups is now here, giving you additional grid functionalities for greater productivity.

The multi-column headers feature in igGrid provides the ability to group columns under the same header. Collapsible column groups is a part of that feature and provides a way to collapse/expand a column group.

Generally a column group consists of two or more columns. Each column group could be marked as collapsible. Each column in this group can be configured to be shown or hidden when the group is collapsed or expanded. Each collapsed/expanded column can be bound to the data source of the grid, or it may be unbound.

Use Cases...or why you really need this

There are several use cases in which a user will need collapsible column groups in igGrid.

When a user defines a grid with a lot of columns and have them in column groups (multi-column headers), he/she should be able to collapse the column groups, leaving one or more columns per group and having the overall column count greatly reduced. This would lead to improved grid readability - only the important information for each group will be displayed. If a user wants additional information, he/she could expand the particular group.

Additionally, when we collapse a column group, there should be a way of defining new bound/unbound column/s to be shown. In this way we will have a summary column/s when we collapse a column group.


A column group can be collapsed/expanded by clicking on its expand/collapse header indicator.

Here is a sample with 3 collapsible column groups. All of the columns in the grid are 9. You have to scroll to see some of them. When we collapse the three column groups, we get a readable grid with 4 columns.

API and Documentation

Collapsible column groups functionality could be controlled using the following group options properties: expanded, allowGroupCollapsing and hidden.

A detailed documentation of the group options property could be found here.

A topic explaining more regarding the collapsible column groups could be found here.