Sticky Columns
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.
Setup
To set the sticky state of the Grid columns:
- Use their
sticky
option. - Ensure that the Grid is
scrollable
(it is by default). - Set the
width
option 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.
Stick to the Start and End
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 true
.
The following example demonstrates this approach.
Known Limitations
- The detail template does not work with sticky columns.
- Using sticky columns alongside multi-column headers is not supported.