Sticky Group Headers and FootersPremium
The KendoReact Data 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
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
}}
// ...
>Example
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.