Aggregate Customization in React Grid Component

18 Nov 20181 minute to read

The appearance of aggregate elements in the React Data Grid component can be customized using CSS. Below are examples for customizing the aggregate root element and the aggregate cell elements.

Customizing the aggregate root element

The .e-gridfooter class is used to style the aggregate root element in the grid footer.

.e-grid .e-gridfooter {
    font-family: cursive;
}

Customize aggregate root element

Customizing the aggregate cell elements

The .e-summaryrow class is used to style the summary row, and the .e-summarycell class is used to style individual aggregate cells.

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

Customize aggregate cell element