Aggregate Customization in React Grid Component

11 Jun 20261 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;
}

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;
}