Angular Data Grid Sticky Group Headers and Footers
The Angular Grid supports sticky group headers and footers that remain visible as the user scrolls through grouped data. When a group header scrolls out of view, a pinned copy of that header stays at the top of the scroll container. This helps users maintain context about which group they are viewing, especially in large data sets. The feature also supports full keyboard navigation.
The following example demonstrates sticky group headers and footers with multiple group levels and aggregate calculations.
Enabling Sticky Headers
To enable sticky group headers, set the stickyHeaders property of the groupable setting to true. The group header row stays pinned at the top of the scroll container while its group's data rows are visible.
<kendo-grid [groupable]="{ stickyHeaders: true }">
</kendo-grid>Enabling Sticky Footers
To enable sticky group footers, set the stickyFooters property of the groupable setting to true. The group footer row stays pinned at the bottom of the scroll container while its group's data rows are visible. This option requires showFooter to be true.
<kendo-grid [groupable]="{ showFooter: true, stickyFooters: true }">
</kendo-grid>