# Sticky Group Headers and Footers

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.

<CtaPanelOverview></CtaPanelOverview>

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.

[Demo Source](https://demos.telerik.com/kendo-react-ui/grid/sticky-group-headers/func/source.txt)

## Enabling Sticky Group Headers

To pin the group header row to the top of the Grid content area, set the [`stickyHeaders`](https://www.telerik.com/kendo-react-ui-develop/components/grid/api/gridgroupablesettings#stickyheaders) property of the [`groupable`](https://www.telerik.com/kendo-react-ui-develop/components/grid/api/gridprops#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.

```tsx
<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`](https://www.telerik.com/kendo-react-ui-develop/components/grid/api/gridgroupablesettings#stickyfooters) property of the [`groupable`](https://www.telerik.com/kendo-react-ui-develop/components/grid/api/gridprops#groupable) prop to `true`. To display group footers, also set the [`footer`](https://www.telerik.com/kendo-react-ui-develop/components/grid/api/gridgroupablesettings#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.

```tsx
<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.

[Demo Source](https://demos.telerik.com/kendo-react-ui/grid/grouping/sticky-headers-footers/source.txt)

## Suggested Links

* [Overview of Grouping](https://www.telerik.com/kendo-react-ui-develop/components/grid/grouping)
* [Grouping Aggregates](https://www.telerik.com/kendo-react-ui-develop/components/grid/grouping/grouping)
* [Locked Group Headers](https://www.telerik.com/kendo-react-ui-develop/components/grid/grouping/locked-group-headers)
* [API Reference of the Grid Component](https://www.telerik.com/kendo-react-ui-develop/components/grid/api/gridprops)