Column Moving

Columns can be moved in the grid by:

Dragging the column header with the mouse or through touch.
Updating columnDefs or columnState in a callback.
(See details in Updating Column Definitions
and Column State pages)

Moving Animation

Column animations happen when you move a column. The default is for animations to be turned on. It is recommended that
you leave the column move animations ON unless your target platform (browser and hardware) is too slow to manage the
animations. To turn OFF column animations, set the Grid Option:

dashGridOptions = {"suppressColumnMoveAnimation": True}

The move column animation transitions the column’s position only, so when you move a column, it animates to the new
position. No other attribute apart from position is animated.

Suppress Hide Leave and Lock Visible

By default, the grid property suppressDragLeaveHidesColumns is set to True, which prevents hiding a column when
dragging it outside the grid. This is handy if the user moves a column outside the grid by accident while moving a
column but doesn’t intend to make it hidden.

It is possible to disable this behavior, making it possible to hide columns by dragging them outside the grid, by
setting suppressDragLeaveHidesColumns=False.

If suppressDragLeaveHidesColumns=False, but some columns need to always stay visible, it is possible to set the
Column Definition property lockVisible=True. This property locks the hide Column State, thus, when dragging a column with lockVisible=True outside the grid, this column will not be hidden.

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-visible-col {
    background: #66c2a5;
}

Suppress Movable

The Column Property suppressMovable changes whether the column can be dragged. The column header cannot be dragged by
the user to move the columns when suppressMovable=True. However, the column can be moved by placing other columns
around it thus only making it practical if all columns have this property.

Lock Position

The column property lockPosition locks columns to one side of the grid. When lockPosition is set as either "left"
or "right", the column will always be locked to that position, cannot be dragged by the user, and cannot be moved out
of position by dragging other columns.

Suppress Movable and Lock Position Example

The example below demonstrates these properties as follows:

The Age column is locked "left" as the first column in the scrollable area of the grid. It is not possible to
move this column, or have other columns moved over it to impact its position. As a result, the Age column marks
the beginning of the scrollable area regardless of its position within the column definitions.
The Total column is locked "right" and likewise its position can not be impacted by moving other columns.
The Athlete column has moving suppressed. It is not possible to move this column, but it is possible to move other
columns around it.
The grid has suppressDragLeaveHidesColumns set to True so columns dragged outside the grid are not hidden
(normally dragging a column out of the grid will hide the column).
The defaultColDef has lockPinned set to True, so it is not possible to pin columns.

You can also try the behavior of the option Suppress Column Move Animation.

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-position-col {
    background: #e78ac3;
}

.suppress-movable-col {
    background: #fc8d62;
}

Advanced Locked Position Example

Below is a more real-world example of where locked columns would be used. The first column is a row number, similar to
the row column in Excel. The second column is a buttons column - an application could have buttons for actions, for
example, ‘Delete’, ‘Buy’, ‘Sell’ etc.

They cannot be moved out of place, and other columns cannot be moved around them, but as demonstrated by this example,
the pinned state take precedence over the lockPosition property. Thus, to keep those columns locked in their position
when other columns are pinned, they also hve to be pinned.

From the example the following can be noted:

The first two columns are locked into first position by setting their Column Definition
property lockPosition='left'.
The pinned state of these columns can be set with the two first options.
The third option will automatically pin the locked columns if another column is pinned, and un-pin them if no other
column is pinned.

Once the option chosen, try to pin/un-pin a not locked column to test the different behaviors, either by using the
button to pin/un-pin the Athlete column, or, you can pin/un-pin any column by dragging it to the left border of the
grid.

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-position-col {
    background: #e78ac3;
}

.suppress-movable-col {
    background: #fc8d62;
}

View Custom Cell Renderer used for this example

This JavaScript function must be added to the dashAgGridComponentFunctions.js file in the assets folder.
See Custom Components for more
information.

var dagcomponentfuncs = (window.dashAgGridComponentFunctions = window.dashAgGridComponentFunctions || {});

dagcomponentfuncs.TripleButtonsCellRenderer = function (props) {
    return React.createElement('div', {}, [
        React.createElement('button', {style: {padding: ".2em 1em"},}, 'A'),
        React.createElement('button', {style: {padding: ".2em 1em"},}, 'B'),
        React.createElement('button', {style: {padding: ".2em 1em"},}, 'C'),
    ])
};