Grouping Custom Templates

Overview

Use public group header and footer templates with a realistic transaction dataset.

This example groups transactions by account type and status, then uses template directives to show clearer grouped summaries inside the grid.

Related DataGrid topics

Use these guides when grouping needs to work together with the rest of the grid workflow.

Group header template

ngbDatagridGroupHeaderTemplate customizes the main grouped field/value row. Here it turns the banking dataset into a more readable operational summary by showing the active group, record count, and total grouped amount.

Group header column template

ngbDatagridGroupHeaderColumnTemplate="field" renders inside the grouped row cell for a specific column. This example uses the amount column to show the current grouped total without replacing the built-in label cell.

Group footer template

Turn on [groupable]="{ showFooter: true }" and use ngbDatagridGroupFooterTemplate="field" for audit-style footer content. The same grouped rows render the footer automatically.

Loading interactive DataGrid example…

API information

API	Type	Usage
`ngbDatagridGroupHeaderTemplate`	`directive`	Customizes the main grouped field/value row and receives `field`, `value`, `count`, `level`, `items`, and `aggregates`.
`ngbDatagridGroupHeaderColumnTemplate="field"`	`directive`	Renders inside the grouped row cell for a specific column.
`ngbDatagridGroupFooterTemplate="field"`	`directive`	Renders inside the grouped footer row cell for a specific column when footers are enabled.
`[groupable]`	`boolean \| NgbDataGridGroupingSettings`	Use an object to enable grouped footer rows with `showFooter`.

Usage notes

The main group header template customizes the grouped field/value row and still keeps the built-in collapse toggle.
Header-column and footer templates are column-specific, so they render in the matching grouped row cell instead of a full-width marketing banner.
Group footer rows render only when showFooter is enabled on [groupable].
Nested groups render nested footer rows automatically when multiple group descriptors are active.

Limitations

Footer templates render per column. If a column has no footer template, its grouped footer cell stays empty.
Grouped footers follow the current grouped rows. If the current page excludes a leaf row, that row is not counted in the rendered footer result.

Example

      <ngb-datagrid
  [data]="transactions"
  [columns]="columns"
  [groupable]="{ showFooter: true }"
  [group]="group">

  <ng-template
    ngbDatagridGroupHeaderTemplate
    let-field="field"
    let-value="value"
    let-count="count"
    let-aggregates="aggregates">
    {{ field }}: {{ value }} ({{ count }} transactions)
    Volume {{ formatAmount(aggregates.amount.sum) }}
  </ng-template>

  <ng-template
    ngbDatagridGroupHeaderColumnTemplate="amount"
    let-aggregates="aggregates">
    Running total {{ formatAmount(aggregates.amount.sum) }}
  </ng-template>

  <ng-template
    ngbDatagridGroupFooterTemplate="amount"
    let-aggregates="aggregates">
    Footer total {{ formatAmount(aggregates.amount.sum) }} • Count {{ aggregates.amount.count }}
  </ng-template>

</ngb-datagrid>