StickyCells

Feature

A feature which pins cell content to the top of the grid while the row scrolls off the top but is still visible. Very similar to native position: sticky, which because of Grid's multiple-region setup unfortunately cannot be used to achieve the same effect.

When a row is partially scrolled off the top of the viewport, the content of each sticky cell is translated downward to remain visible. When the remaining visible row height is less than the content height, the content scrolls out naturally.

All columns have sticky content by default when this feature is enabled. To opt out a specific column, set stickyContent to false.

For example:

new Grid({
    features : {
        stickyCells : true
    },
    columns : [
        { field : 'name', text : 'Name' },
        { field : 'age', text : 'Age', stickyContent : false } // Opt out of stickiness
    ]
});

Note that if you have custom CSS targeting cell content, you may need to adjust it to account for the additional wrapper element added by this feature when stickyContent is true. The wrapper has the class .b-sticky-cell-content. The DOM structure of a sticky cell looks like this:

<!-- Without StickyCells or with stickyContent: false -->
<div class="b-grid-cell" data-column-id="name">
    Alice
</div>

<!-- With StickyCells and stickyContent: true -->
<div class="b-grid-cell" data-column-id="name">
    <div class="b-sticky-cell-content">
        Alice
    </div>
</div>

This feature is disabled by default.

See also

• MergeCells - Merge consecutive equal-value cells
• Column - Base column class