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.

Demo

Multiple Groups

import { ColumnGroupDescription } from "igniteui-react-grids/ES5/igr-column-group-description";
import { ListSortDirection } from "igniteui-react-core/ES5/ListSortDirection";

public componentDidMount() {
    window.addEventListener('load', this.onLoad);
}

public onLoad() {
    const state = new ColumnGroupDescription();
    state.propertyPath = "Country";
    state.displayName = "Location";
    state.sortDirection = ListSortDirection.Descending;
    const city = new ColumnGroupDescription();
    city.propertyPath = "City";
    city.displayName = "";
    const income = new ColumnGroupDescription();
    income.propertyPath = "Income";
    income.displayName = "Income";

    this.grid.groupDescriptions.add(state);
    this.grid.groupDescriptions.add(city);
    this.grid.groupDescriptions.add(income);
}
import { ColumnGroupDescription } from "igniteui-webcomponents-grids/ES2015/igc-column-group-description";
import { ListSortDirection } from "igniteui-webcomponents-core/ES2015/ListSortDirection";

public connectedCallback() {
    const state = new ColumnGroupDescription();
    state.propertyPath = "Country";
    state.displayName = "Location";
    state.sortDirection = ListSortDirection.Descending;
    const city = new ColumnGroupDescription();
    city.propertyPath = "City";
    city.displayName = "";
    const income = new ColumnGroupDescription();
    income.propertyPath = "Income";
    income.displayName = "Income";

    this.grid = document.getElementById("grid") as IgcLiveGridComponent;
    this.grid.groupDescriptions.add(state);
    this.grid.groupDescriptions.add(city);
    this.grid.groupDescriptions.add(income);
}

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 IgcLiveGridComponent.

import { DataSourceSectionHeaderDisplayMode } from "igniteui-webcomponents-core/ES5/DataSourceSectionHeaderDisplayMode";

public connectedCallback() {
    // ...
    this.grid.groupHeaderDisplayMode = DataSourceSectionHeaderDisplayMode.Split;
}

Collapsable Groups

Also, the IgcLiveGridComponent 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 { ColumnGroupDescription } from "igniteui-react-grids/ES5/igr-column-group-description";
import { ListSortDirection } from "igniteui-react-core/ES5/ListSortDirection";
import { DataSourceSectionHeaderDisplayMode } from "igniteui-react-core/ES5/DataSourceSectionHeaderDisplayMode";

public componentDidMount() {
    window.addEventListener('load', this.onLoad);
}

public onLoad() {
    const state = new ColumnGroupDescription();
    state.propertyPath = "Country";
    state.displayName = "Location";
    state.sortDirection = ListSortDirection.Descending;
    const city = new ColumnGroupDescription();
    city.propertyPath = "City";
    city.displayName = "";
    const income = new ColumnGroupDescription();
    income.propertyPath = "Income";
    income.displayName = "Income";

    this.grid.groupDescriptions.add(state);
    this.grid.groupDescriptions.add(city);
    this.grid.groupDescriptions.add(income);

    this.grid.isGroupCollapsable = true;
    this.grid.groupHeaderDisplayMode = DataSourceSectionHeaderDisplayMode.Split;
}
import { ColumnGroupDescription } from "igniteui-webcomponents-grids/ES2015/igc-column-group-description";
import { ListSortDirection } from "igniteui-webcomponents-core/ES2015/ListSortDirection";
import { DataSourceSectionHeaderDisplayMode } from "igniteui-webcomponents-core/ES5/DataSourceSectionHeaderDisplayMode";

public connectedCallback() {
    const state = new ColumnGroupDescription();
    state.propertyPath = "Country";
    state.displayName = "Location";
    state.sortDirection = ListSortDirection.Descending;
    const city = new ColumnGroupDescription();
    city.propertyPath = "City";
    city.displayName = "";
    const income = new ColumnGroupDescription();
    income.propertyPath = "Income";
    income.displayName = "Income";

    this.grid = document.getElementById("grid") as IgcLiveGridComponent;
    this.grid.groupDescriptions.add(state);
    this.grid.groupDescriptions.add(city);
    this.grid.groupDescriptions.add(income);

    this.grid.isGroupCollapsable = true;
    this.grid.groupHeaderDisplayMode = DataSourceSectionHeaderDisplayMode.Split;
}