Sticky Headers and Footers

Overview

Keep grouped context visible while scrolling through large grouped datasets.

Sticky group headers stay pinned at the top of the DataGrid scroll container. Sticky group footers stay pinned at the bottom and require grouped footers to be enabled.

Related DataGrid topics

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

Enabling sticky group headers

Set stickyHeaders on [groupable] to keep each visible group header pinned to the top of the scroll container while that group's rows remain in view.

      <ngb-datagrid [groupable]="{ stickyHeaders: true }"></ngb-datagrid>

Enabling sticky group footers

Set stickyFooters together with showFooter to keep grouped footer summaries pinned to the bottom of the scroll container while that group's rows remain visible.

      <ngb-datagrid [groupable]="{ showFooter: true, stickyFooters: true }"></ngb-datagrid>

Live example

This example groups transaction records by account type and status, then keeps grouped headers and summary footers visible while you scroll through the dataset.

Loading interactive DataGrid example…

Combined configuration

      groupable: NgbDataGridGroupingSettings = {
  showFooter: true,
  stickyHeaders: true,
  stickyFooters: true,
};

group: NgbDataGridGroupDescriptor[] = [
  { field: 'accountType', dir: 'asc', aggregates: this.aggregates },
  { field: 'status', dir: 'asc', aggregates: this.aggregates },
];

API information

API	Type	Usage
`NgbDataGridGroupingSettings.stickyHeaders`	`boolean`	Pins visible grouped header rows to the top of the DataGrid scroll container.
`NgbDataGridGroupingSettings.stickyFooters`	`boolean`	Pins visible grouped footer rows to the bottom of the DataGrid scroll container.
`NgbDataGridGroupingSettings.showFooter`	`boolean`	Required when using sticky grouped footers because footer rows only render when grouped footers are enabled.
`[groupable]`	`boolean \| NgbDataGridGroupingSettings`	Pass an object to combine sticky grouped headers, sticky grouped footers, and grouped footers.

Usage notes

Sticky group headers and footers pin inside the DataGrid body scroll container, not the full page viewport.
Sticky footers require showFooter because the grid only renders footer rows when grouped footers are enabled.
Nested group headers and footers stack by group level, so parent and child grouped context remain readable together.
Keyboard navigation still uses the same grouped toggle buttons and row focus behavior because sticky mode reuses the real grouped rows.

Limitations

Sticky grouped rows are most useful when the grid body is scrollable and the dataset is large enough to scroll.
If your custom group templates render unusually tall content, nested sticky offsets may need follow-up styling to avoid overlap.

Continue through grouping

Move between the overview, templates, aggregates, and sticky grouped row guides without losing context.

Next guide