Column Pinning

When you pin columns, the grid reorders columns putting those pinned "left" first, and those pinned "right" last.

Pin Columns

To pin a column it is possible to:

The following example shows how to pin columns using Column Definition at initialization and using Callbacks to update
the pinned parameter through Column State.

It is also possible to choose to clear or keep the current pinned columns when the pinned state is updated through the
callback using the two firsts buttons.

Note how pinned columns remain visible as you scroll through other columns.

Lock Pinning

You can prevent a user from modifying the pinning state of a column by setting lockPinned to True on its column

The following example shows the behavior of lock-pinned columns. Note the following:

View the CSS classes used for this example

These CSS classes must be added to any *.css file in the assets folder.
See Loading CSS files for more information.

span.legend-box {
    display: inline-block;
    border: 1px solid #aaa;
    height: 15px;
    width: 15px;
    margin-left: 15px;
    margin-right: 5px;

.lock-pinned {
    background: #119dff;

.lock-unpinned {
    background: #66c2a5;