Sticky Group Headers and FootersPremium
The KendoReact Grid supports sticky (pinned) group header and footer rows that remain visible at the top or bottom of the scrollable area while the user scrolls through grouped data. This makes it easy to always see which group the current data belongs to and what the aggregate values are.
Start Free Trial
The following example demonstrates a Grid with both sticky group headers and sticky group footers enabled. Scroll the Grid content to see the headers and footers pinned at the edges of the viewport.
Enabling Sticky Group Headers
To pin the group header row to the top of the Grid content area, set the stickyHeaders property of the groupable prop to true.
When the user scrolls down and the original group header row leaves the viewport, a sticky copy of it is displayed at the top of the visible area. As the user scrolls past the end of the group, the sticky header scrolls away with the group.
<Grid
groupable={{
enabled: true,
stickyHeaders: true
}}
// ...
>Enabling Sticky Group Footers
To pin the group footer row to the bottom of the Grid content area, set the stickyFooters property of the groupable prop to true. To display group footers, also set the footer option to 'visible' or 'always'.
When the user scrolls and the original group footer row is not yet in the viewport, a sticky copy of it is displayed at the bottom of the visible area.
<Grid
groupable={{
enabled: true,
footer: 'visible',
stickyHeaders: true,
stickyFooters: true
}}
// ...
>Sticky Group Headers and Footers Across Grouping Modes
You can keep group header and footer rows visible while scrolling across all four displayMode values.
The following example demonstrates a Grid with sticky group headers and footers that you can toggle on and off. Use the display mode selector to verify that stickiness is preserved in every grouping layout mode.