Grouping Styles in Angular Data Grid

24 Aug 20261 minute to read

Customize the appearance of grouping elements in the Angular Data Grid using CSS. The following examples demonstrate styling the group drop area, group expand and collapse icons, group caption rows, and group indent cells.

Customize the group drop area header

Use the .e-groupdroparea class to style the group header element.

.e-grid .e-groupdroparea {
    background-color: #132f49;
}

Group header

Customize the group expand and collapse icons

Use the .e-icon-gdownarrow and .e-icon-grightarrow classes to style the expand and collapse icons.

.e-grid .e-icon-gdownarrow::before {
    content:'\e7c9';
}
.e-grid .e-icon-grightarrow::before {
    content:'\e80f';
}

In this example, the content property is modified to change the icon displayed. Use the appropriate Syncfusion® icon based on the active theme

Group expand or collapse icons

Customize the group caption row

Use the .e-groupcaption class to style the group caption row element, and the .e-recordplusexpand and .e-recordpluscollapse classes are used for the icons indicating record expansion or collapse.

.e-grid .e-groupcaption {
    background-color: #deecf9;
}

.e-grid .e-recordplusexpand,
.e-grid .e-recordpluscollapse {
    background-color: #deecf9;
}

Group caption row

Customize the grouping indent cell

Use the .e-indentcell class to style the indent cell that appears in grouped grid rows.

.e-grid .e-indentcell {
    background-color: #deecf9;
}

Grouping indent cell