Web Components Row Grouping

    The Ignite UI for Web Components Data Table / Data Grid lets you group rows into a ‘sticky header’ Row Group. This is similar to the Group By feature in Microsoft Outlook, which is an easy way to visually group data based on your own criteria.

    Web Components Row Group-By Area Example

    Group-By Area

    Set IsGroupByAreaVisible property on the DataGrid to True, as shown in the example above, to the user interface. The group-by area allows users more options to group and sort columns without interact when interacting the DataGrid indirectly. Groups can be positioned and reordered based on the users needs. This area also populates when columns are programmatically added as groupDescriptions on the DataGrid as well.

    Using Group Descriptions Example

    Hierarchical Groups

    The groupHeaderDisplayMode property allows the groups to be hierarchical. By default, each group description that is added gets aggregated together. Setting the groupHeaderDisplayMode to Split will create a section header for ever group defined in groupDescriptions property of the IgcDataGridComponent.

    import { GroupHeaderDisplayMode } from 'igniteui-webcomponents-core';
    
    public connectedCallback() {
        // ...
        this.grid.groupHeaderDisplayMode = GroupHeaderDisplayMode.Split;
    }
    

    Collapsable Groups

    Also, the IgcDataGridComponent can display a toggle on each group section to allow the end user to expand or collapse the grouped data via the isGroupCollapsable property.

    public connectedCallback() {
        // ...
        this.grid.isGroupCollapsable = true;
    }
    

    Summary

    For your convenience, all above code snippets are combined into one code block below that you can easily copy to your project.

    import { IgcIgcColumnGroupDescription } from 'igniteui-webcomponents-grids';
    import { ListSortDirection } from 'igniteui-webcomponents-core';
    import { GroupHeaderDisplayMode } from 'igniteui-webcomponents-core';
    
    public connectedCallback() {
        const state = new IgcColumnGroupDescription();
        state.field = "Country";
        state.displayName = "Location";
        state.sortDirection = ListSortDirection.Descending;
        const city = new IgcColumnGroupDescription();
        city.field = "City";
        city.displayName = "";
        const income = new IgcColumnGroupDescription();
        income.field = "Income";
        income.displayName = "Income";
    
        this.grid = document.getElementById("grid") as IgcDataGridComponent;
        this.grid.groupDescriptions.add(state);
        this.grid.groupDescriptions.add(city);
        this.grid.groupDescriptions.add(income);
    
        this.grid.isGroupCollapsable = true;
        this.grid.groupHeaderDisplayMode = GroupHeaderDisplayMode.Split;
    }
    

    API Members