React Grid Collapsible Column Groups Overview

    The Ignite UI for React Collapsible Column Groups feature in React Grid allows you to organize and manage multiple levels of nested columns and column groups in the IgrGrid by grouping them together and providing the option to collapse or expand these groups for improved data visualization and navigation.

    React Grid Collapsible Column Groups Example

    Setup

    To get started with the IgrGrid and the Collapsible multi-column headers feature, first you need to install Ignite UI for React by typing the following command:

    npm install igniteui-react-grids

    For a complete introduction to the Ignite UI for React, read the getting started topic.

    Also, we strongly suggest that you take a brief look at multi-column headers topic, to see more detailed information on how to setup the column groups in your grid.

    Usage

    Collapsible Column Groups is a part of the multi-column headers feature which provides a way to collapse/expand a column group to a smaller set of data. When a column group is collapsed, a subset of the columns will be shown to the end-user and the other child columns of the group will hide. Each collapsed/expanded column can be bound to the grid data source, or it may be unbound, thus calculated.

    In order to define a column group as collapsible, you need to set the Collapsible property on the columnGroup to true.

    You need to define the property visibleWhenCollapsed to at least two child columns. At least one column must be visible when the group is collapsed (visibleWhenCollapsed set to true) and at least one column must be hidden when the group is expanded (visibleWhenCollapsed set to false), otherwise the collapsible functionality will be disabled. If visibleWhenCollapsed is not specified for some of the child columns, then this column will be always visible regardless of whether the parent state is expanded or collapsed.

    Let's see the markup below:

    <IgrColumnGroup collapsible="true" header="Customer Information">
    <IgrColumn field="CustomerName" header="Customer Name" visibleWhenCollapsed="true">
    </IgrColumn>
    <IgrColumn field="CustomerID" header="Customer ID" visibleWhenCollapsed="false">
    </IgrColumn>
    <IgrColumn field="CustomerFirstName" header="First Name" visibleWhenCollapsed="false">
    </IgrColumn>
    <IgrColumn field="CustomerLastName" header="Last Name" visibleWhenCollapsed="false">
    </IgrColumn>
    <IgrColumnGroup header="Customer Address">
        <IgrColumn field="CustomerAddress"  header="Full Address" width="250px" visibleWhenCollapsed="true">
        </IgrColumn>
        <IgrColumn field="Address" visibleWhenCollapsed="false">
        </IgrColumn>
        <IgrColumn  field="City" visibleWhenCollapsed="false">
        </IgrColumn>
        <IgrColumn field="Country" visibleWhenCollapsed="false">
        </IgrColumn>
        <IgrColumn field="PostalCode" header="Postal Code" visibleWhenCollapsed="false">
        </IgrColumn>
    </IgrColumnGroup>
</IgrColumnGroup>

    To summarize, every child column has three states:

    • Can be always visible, no matter the expanded state of its parent.
    • Can be visible, when its parent is collapsed.
    • Can be hidden, when its parent is collapsed.

    The initial state of the column group which is specified as collapsible is expanded set to true, but you can easily change this behavior by setting it to false.

    Expand/Collapse Indicator Template

    Default expand indicator for the IgrGrid is the following:

    Default collapse indicator for the IgrGrid is the following:

    Also, if you need to change the default expand/collapse indicator, we provide templating options in order to achieve this.

    <IgrColumnGroup id="info" header="Customer Information" collapsible="true" collapsibleIndicatorTemplate={this.collapsibleIndicatorTemplate}>
    <IgrColumn field="CustomerName" header="Fullname" dataType="String" visibleWhenCollapsed="true"></IgrColumn>
    <IgrColumn field="CustomerID" header="Customer ID" dataType="String" visibleWhenCollapsed="false"></IgrColumn>
    <IgrColumnGroup id="address" header="Customer Address" collapsible="true">
        <IgrColumn field="Country" header="Country" dataType="String" sortable="true" visibleWhenCollapsed="true"></IgrColumn>
        <IgrColumn field="City" header="City" dataType="String" sortable="true" visibleWhenCollapsed="false"></IgrColumn>
    </IgrColumnGroup>
</IgrColumnGroup>

function collapsibleIndicatorTemplate(e: { dataContext: IgrColumnTemplateContext }) {
    return (
    <div>
        <IgrIcon iconName={e.dataContext.column.expanded ? 'remove' : 'add'}></IgrIcon>
    </div>)
}

    Note Please keep in mind that initially collapse group option takes precedence over column hidden - If you declared your column to be hidden using the property hidden and you have a group defined where the same column should be shown, the column will be shown.

    API References

    Additional Resources

    Our community is active and always welcoming to new ideas.