Display ModesOpen
Choose group heading alignment and manage grouping fields and their order.
DataGrid grouping display modes
Choose how nested group headings are aligned, and let users manage grouping from the grid toolbar.
Standard indents each grouping level. Compact aligns group headings to save horizontal space. Both preserve the same hierarchy, sorting and expand/collapse behavior.
Display modes and grouping controls
The following example demonstrates the Group field picker, removable grouping chips and the three-dot menu for moving a grouping level earlier or later.
Loading grouping example…
Configuration
Set displayMode and showGroupButton on groupable. The default remains standard display with the existing drag panel.
<ngb-datagrid
[columns]="columns"
[data]="rows"
[groupable]="{ displayMode: 'compact', showGroupButton: true }"
[group]="groups"
(groupChange)="groups = $event.group"
[dataOperations]="true">
</ngb-datagrid>
Use groupChange to retain the selected order. For remote data, load once from dataStateChange; each add, remove or move resets to page one. Applications can also call moveGroupField(field, 'previous' | 'next').
Keyboard support
Tab to Group or a chip's actions button and press Enter or Space. In the open list, use Up/Down or Home/End to move between available actions. Escape closes the list and returns focus. First and last grouping levels disable unavailable moves.
Behavior and limitations
Display mode changes presentation only; it is separate from row density and is not stored in saved views. Group descriptors retain their direction and aggregates when moved. The picker lists visible configured fields. Existing requirements for remote grouped data, virtualization and custom templates still apply.
Continue through grouping
Move between the overview, display modes, templates, aggregates, and sticky grouped row guides without losing context.
Grouping Overview
Start with local and manual grouping, shared state, and the base grouped grid flow.
Custom Templates
Customize grouped headers, grouped cells, and grouped footer rows with public directives.
Aggregates
Add grouped totals, counts, averages, and min or max values to real grouped rows.
Sticky Headers and Footers
Keep grouped context pinned while scrolling through large grouped result sets.