Columns marked as "sticky" are visible at all times while the user scrolls the Grid horizontally. They are stacked at the start or end of the Grid, depending on the scrolling direction.
Sticky columns are similar to locked columns, and you can use them to achieve the same effect. They also support placing columns to either side of the viewport. But the two features are not completely interchangeable, see known limitations.
To set the sticky state of the Grid columns:
- Use their
- Ensure that the Grid is
scrollable(it is by default).
- Set the
widthoption of all columns so that the Grid is able to adjust the positions of the sticky columns.
The following example demonstrates how to make certain columns sticky so that they are always visible during horizontal scrolling.
Sticky columns can be used to emulate the behavior of
locked columns with the addition of the ability to position columns at either end. To achieve this, make sure that the desired columns are placed at the beginning or end of the columns list and set their
sticky option to
The following example demonstrates this approach.
- The detail template does not work with sticky columns.
- Using sticky columns alongside the virtual columns functionality is not supported.
- The sticky columns functionality is not supported in Internet Explorer. It relies on CSS position: sticky which is not supported in IE.