Updating Column Definitions

The Column Definitions page demonstrated how to set the
initial column definitions for a grid. Here, we look at how to update column definitions after they’ve been initially

Add and Remove Columns

To add or remove columns, use a callback to update the grid’s column definitions by using the grid’s columnDefs
property as an output.

In this example, you can use the button to toggle between including and excluding the columns that show the numbers for
each medal type. Note how any state applied to a column (for example, sort, filter, and width) is retained if the column
still exists after the new definitions are applied.

Update Properties

All properties of a column definition can be updated. For example, if you want to change the header name of a column,
update the headerName on its column definition within a callback and use the grid’s columnDefs as an output on the

The example below demonstrates updating column definitions to change how columns are configured.

Note the following:

Partial Update

Dash 2.9 introduced Partial Property Updates using the Patch

This feature allows to update only a part of a property of a component. Thus, it is possible to use a Patch to make a
partial update on the columnDefs.

Here is an example using the Patch class to update only the header of the first column.

Update Stateful Properties

Some column properties are stateful properties, meaning their values can change while the user is interacting with the grid.
Those properties are handled by the grid property columnState. See
the Column State page for more information.

They can be defined with columnDefs using either their Initial Attribute or their Stateful Attribute:

The stateful properties of columnDefs and their corresponding initial properties are listed below:

Stateful Attribute Initial Attribute Description
aggFunc initialAggFunc The function to aggregate this column by if row<br>grouping or pivoting.
flex initialFlex The flex value for setting this column’s width.
hide initialHide Whether this column should be hidden.
pinned initialPinned Whether this column should be pinned.
pivot initialPivot If this column should be a pivot.
pivotIndex initialPivotIndex Whether this column should be a pivot and in what order.
rowGroup initialRowGroup Whether this column should be a row group.
rowGroupIndex initialRowGroupIndex Whether this column should be a row group and in what order.
sort initialSort The sort to apply to this column.
sortIndex initialSortIndex The order to apply sorting, if multi column sorting.
width initialWidth Width of the column.

Here is an example showing the difference between initial and stateful column definition properties.

Note the following:

If only stateful properties should be updated, consider to use columnState instead of columnDefs.
(see Column State page)

Maintain Column Order

When Column Definitions are provided to the grid, the order of the columns inside the grid is set to match the order of
the newly provided Column Definitions. This means every time columns are set, the order is guaranteed to match the order
of the Column Definitions. This is usually the desired and expected behaviour.

You may wish for the order of the columns to not match the Column Definitions. For example suppose the user has
rearranged columns to their desired order, and then the application updates the Column Definitions (for example, changes the
Cell Renderer used), then it would be undesirable to reset the column order, as the user’s arranged order would be lost.

If the desired behaviour is that column’s order should be maintained, set the grid property :

dashGridOptions = {"maintainColumnOrder": True}

Here is an example showing the difference between maintaining the column order or not while setting columnDefs.

Note the following:

If there are new columns added (for example, the new set of columnDefs has additional columns to those currently present),
then these new columns will always be added at the end.

Update Column Groups

Column groups can be updated in the same way as columns, by updating the column group definition.

Here is an example switching between two columnDefs sets using column groups.
These two sets are the same except that the first has the additional column group property 'openByDefault': True for
both groups which expands the groups when setting columnDefs

For expandable groups, to maintain the open/closed state while switching columnDefs, the column group
property groupId have to be assigned in the column group definition.

columnDefs = [
        "headerName": "Group A",
        "groupId": "groupA",
        "children": [
            {"field": "name"},
            {"field": 'age', "columnGroupShow": "open"}

The following example shows this behavior using groupId.