# Angular Data Grid Group Templates

The [Angular Grid](https://www.telerik.com/kendo-angular-ui/components/grid) provides built-in group templates that let you customize the content of generated group headers and footers. Depending on the template, you can customize the group label, display aggregate values, or render custom footer content.

The available group templates are:

* [Customizing the group label](https://www.telerik.com/kendo-angular-ui/components/grid/grouping/templates#customizing-the-group-label)
* [Adding aggregates to group header cells](https://www.telerik.com/kendo-angular-ui/components/grid/grouping/templates#adding-aggregates-to-group-header-cells)
* [Customizing generated group columns](https://www.telerik.com/kendo-angular-ui/components/grid/grouping/templates#customizing-generated-group-columns)
* [Adding aggregates to group footer cells](https://www.telerik.com/kendo-angular-ui/components/grid/grouping/templates#adding-aggregates-to-group-footer-cells)

## Customizing the Group Label

The [`GroupHeaderTemplateDirective`](https://www.telerik.com/kendo-angular-ui/components/grid/api/groupheadertemplatedirective) customizes the grouped value displayed in the group header for the grouped column. Use this template to customize how the grouped value is rendered.

The following example demonstrates how to change the group header text.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/grid/grouping/templates/header/source.txt)

## Adding Aggregates to Group Header Cells

The [`GroupHeaderColumnTemplateDirective`](https://www.telerik.com/kendo-angular-ui/components/grid/api/groupheadercolumntemplatedirective) renders content in the group header cell of a specific data column. This template is commonly used to display aggregate values, such as averages, sums, or maximum values, within group headers.

Check the [Aggregates](https://www.telerik.com/kendo-angular-ui/components/grid/grouping/aggregates) section for further details on how to use `average`, `min`, `max`, and other aggregates in the Grid.

The following example demonstrates the `kendoGridGroupHeaderColumnTemplate` used in the **Amount** column.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/grid/grouping/templates/column-header/source.txt)

## Customizing Generated Group Columns

When the Grid uses the `singleColumn` or `multipleColumns` grouping display modes, use the [`GroupColumnGroupHeaderTemplateDirective`](https://www.telerik.com/kendo-angular-ui/components/grid/api/groupcolumngroupheadertemplatedirective) to customize the generated group column.

The template replaces only the group column text while preserving the built-in expand and collapse icons.

The following example demonstrates a sales order grid grouped by region and category. The `kendoGridGroupColumnGroupHeaderTemplate` renders a contextual icon alongside each group value — a globe icon for region and a folder icon for category.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/grid/grouping/templates/group-column/source.txt)

## Adding Aggregates to Group Footer Cells

The [`GroupFooterTemplateDirective`](https://www.telerik.com/kendo-angular-ui/components/grid/api/groupfootertemplatedirective) renders content in the group footer cell of the corresponding data column. This template displays aggregate values at the bottom of each group.

Check the [Aggregates](https://www.telerik.com/kendo-angular-ui/components/grid/grouping/aggregates) section for further details on how to use `average`, `min`, `max`, and other aggregates in the Grid.

To render group footers, enable the [`showFooter`](https://www.telerik.com/kendo-angular-ui/components/grid/api/groupablesettings#showFooter) option of the `GroupableSettings` configuration object.

```html
<kendo-grid [groupable]="{ showFooter: true }" ... >
    ...
</kendo-grid>
```

The following example demonstrates the `kendoGridGroupFooterTemplate` in action.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/grid/grouping/templates/footer/source.txt)

## Suggested Links

* [Manual Grouping](https://www.telerik.com/kendo-angular-ui/components/grid/grouping/manual-grouping)
* [Aggregates](https://www.telerik.com/kendo-angular-ui/components/grid/grouping/aggregates)
* [Control the Expanded State](https://www.telerik.com/kendo-angular-ui/components/grid/grouping/expanded-state)
* [API Reference of the GridComponent](https://www.telerik.com/kendo-angular-ui/components/grid/api/gridcomponent)
* [API Index of the Grid](https://www.telerik.com/kendo-angular-ui/components/grid/api)