Column Sizing

The width of the columns can be set using a given value through columnDefs or columnState (
see Column Definitions, Updating Column Definitions
and Column State). It is also
possible to let Dash AG Grid calculate the width of the columns with the columnSize property and allow the user to
resize the columns by dragging the top right portion of the column.

Sizing

Column resizing is enabled by default for all columns. To control resizing for individual columns, set the
boolean resizable property in the column definitions.

The snippet below allows all columns except Address to be resized.

columnDefs = [
    { "field": "name"},
    { "field": "age" },
    { "field": "address", "resizable": False},
]

The snippet below allows only the Address to be resized by setting resizable=False on the default column
definition and then resizable=True on the Address column.

defaultColDef = {
    "resizable": False,
}
columnDefs = [
    { "field": "name" },
    { "field": "age" },
    { "field": "address", "resizable": True },
]

columnSize property

To set the column size, use the columnSize property, along with columnSizeOptions to customize the columnSize
operation.

Note that columnSize and columnSizeOptions are Dash properties only. You won’t find these properties defined the
same way in the AG Grid documentation.

columnSize takes one of the following:

The following example shows how to make columns adjust to fit either the screen or their contents. With each option, try
resizing the columns (by dragging the column header) and resize the browser width to see how the grid responds.

import dash_ag_grid as dag
from dash import Dash, html, dcc, Input, Output, callback

app = Dash(__name__)

rowData = [
    {"make": "Toyota", "model": "Celica", "price": 35000},
    {"make": "Ford", "model": "Mondeo", "price": 32000},
    {"make": "Porsche", "model": "Boxster", "price": 72000},
]

columnDefs = [
    {"field": "make", "headerName": "Make of the Car"},
    {"field": "model", "headerName": "Model"},
    {"field": "price", "headerName": "Price"},
]

app.layout = html.Div(
    [
        dcc.RadioItems(
            id="radio-column-sizing-basic",
            options=[
                {"label": "Auto size", "value": "autoSize"},
                {"label": "Auto size skip header", "value": "autoSizeSkipHeader"},
                {"label": "Size to fit", "value": "sizeToFit"},
                {"label": "Responsive Size to fit", "value": "responsiveSizeToFit"}
            ],
            value="autoSize",
        ),
        dag.AgGrid(
            id="column-sizing-basic",
            rowData=rowData,
            columnDefs=columnDefs,
            defaultColDef={"filter": True},
            style={'height': 200},
            dashGridOptions={"animateRows": False}
        ),
    ],
)


@callback(
    Output("column-sizing-basic", "columnSize"),
    Output("column-sizing-basic", "columnSizeOptions"),
    Input("radio-column-sizing-basic", "value"),
)
def update_column_size(column_size_value):
    if column_size_value == "autoSizeSkipHeader":
        return "autoSize", {"skipHeader": True}
    return column_size_value, {"skipHeader": False}


if __name__ == "__main__":
    app.run(debug=True)

Autosize

Setting columnSize="autoSize" will auto-size all columns based on its contents. Note that, just like Excel, each
column can also be auto-resized by double-clicking the right side of the header rather than dragging it.

Autosize and Virtualisation

Notes about autosizing and Virtualisation:

Skip header on autosize

By default, the grid will also resize the column to fit the header. If you do not want the headers to be included in
the autosize calculation, set the grid option:

dashGridOptions = {"skipHeaderOnAutoSize": True}
Autosize a subset of columns

Using columnSize="autoSize", it is possible to apply the auto-size to only a subset of columns or to not take into
account the headers when calculating the column size, it is possible to use columnSizeOptions with the following
parameters:

Note that Column Groups are never considered when calculating the column widths.

Size to Fit and Responsive Size to Fit

Setting columnSize="sizeToFit" makes the columns fit the width of the grid. However, unlike "responsiveSizeToFit",
this is only done once when the grid is rendered. If the browser window changes, or the user changes the column width,
the columns will not be continually resized. But it is possible to set again "sizeToFit" to recalculate the width of
the columns when needed, see
example Size to Fit Triggered by Callback Example

Setting columnSize="responsiveSizeToFit" makes the currently visible columns fit the screen. The columns will scale (
growing or shrinking) to fit the available width.

Note that when columnSize="responsiveSizeToFit", the column default widths, rather than current widths, are
used while calculating the new widths. This ensures the result is deterministic and does not depend on any Column
resizing the user may have manually done.

Skip columns on resize

For both columnSize options, if you don’t want a particular column to be included in the resize, then set the column
definition suppressSizeToFit=True. This is helpful if, for example, you want the first column to remain fixed width,
but all other columns to fill the width of the grid.

Set a minimum and maximum width on resize

It is also possible to set minimum and maximum width when calculating the column sizes using columnSizeOptions with
the following parameters:

Example Size to Fit Using Options

This example shows how to set options with "sizeToFit", note the following:

import dash_ag_grid as dag
from dash import Dash, html
import pandas as pd

app = Dash(__name__)

df = pd.read_csv(
    "https://raw.githubusercontent.com/plotly/datasets/master/ag-grid/olympic-winners.csv"
)

columnDefs = [
    {'field': 'athlete', 'width': 150, 'suppressSizeToFit': True},
    {'field': 'age', 'width': 50, 'maxWidth': 50},
    {'colId': 'country', 'field': 'country', 'maxWidth': 300},
    {'field': 'year', 'width': 90},
    {'field': 'date', 'width': 110},
    {'field': 'sport', 'width': 110},
    {'field': 'gold', 'width': 100},
    {'field': 'silver', 'width': 100},
    {'field': 'bronze', 'width': 100},
    {'field': 'total', 'width': 100},
]

app.layout = html.Div(
    [
        dag.AgGrid(
            id="column-sizing-size-to-fit",
            rowData=df.to_dict("records"),
            columnDefs=columnDefs,
            defaultColDef={"filter": True},
            columnSize="sizeToFit",
            columnSizeOptions={
                'defaultMinWidth': 100,
                'columnLimits': [{'key': 'country', 'minWidth': 900}],
            },
            dashGridOptions={"animateRows": False}
        ),
    ],
)

if __name__ == "__main__":
    app.run(debug=True)

Example Size to Fit Triggered by Callback

This example adds a button so the user can resize the grid. Try changing a column width or the browser window then
hit the “Resize” button.

import dash_ag_grid as dag
from dash import Dash, html, Input, Output, callback

app = Dash(__name__)

rowData = [
    {"make": "Toyota", "model": "Celica", "price": 35000},
    {"make": "Ford", "model": "Mondeo", "price": 32000},
    {"make": "Porsche", "model": "Boxster", "price": 72000},
]

columnDefs = [
    {"headerName": "Make of the Car", "field": "make"},
    {"headerName": "Model", "field": "model"},
    {"headerName": "Price", "field": "price"},
]

app.layout = html.Div(
    [
        html.Button("resize", id="button-size-to-fit-callback"),
        dag.AgGrid(
            id="column-sizing-size-to-fit-callback",
            columnDefs=columnDefs,
            rowData=rowData,
            columnSize="sizeToFit",
            defaultColDef={"filter": True},
            dashGridOptions={"animateRows": False}
        ),
    ],
)


@callback(
    Output("column-sizing-size-to-fit-callback", "columnSize"),
    Input("button-size-to-fit-callback", "n_clicks"),
)
def update_column_size_callback(_):
    return "sizeToFit"


if __name__ == "__main__":
    app.run(debug=True)

Shift Resize

If you hold the <kbd>Shift<kbd> key while dragging the resize handle, the column will take space away from the column
adjacent to it. This means the total width for all columns will be constant.

You can also change the default behavior for resizing. To have shift resizing as the default and normal resizing to
happen when the <kbd>Shift<kbd> key is pressed, set the grid option:

dashGridOptions = {"colResizeDefault": 'shift'}

Resize Groups

When you resize a group, it will distribute the extra room to all columns in the group equally. In the example below,
the groups can be resized as follows:

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;
}

.resizable-header {
    background-color: #66c2a5 !important;
}

.fixed-size-header {
    background-color: #e78ac3 !important;
}
import dash_ag_grid as dag
from dash import Dash, html
import pandas as pd

app = Dash(__name__)

df = pd.read_csv(
    "https://raw.githubusercontent.com/plotly/datasets/master/ag-grid/olympic-winners.csv"
)

columnDefs = [
    {
        "headerName": "Everything Resizes",
        "children": [
            {"field": "athlete", "headerClass": "resizable-header"},
            {"field": "age", "headerClass": "resizable-header"},
            {"field": "country", "headerClass": "resizable-header"},
        ],
    },
    {
        "headerName": "Only Year Resizes",
        "children": [
            {"field": "year", "headerClass": "resizable-header"},
            {"field": "date", "headerClass": "fixed-size-header", "resizable": False},
            {"field": "sport", "headerClass": "fixed-size-header", "resizable": False},
        ],
    },
    {
        "headerName": "Nothing Resizes",
        "children": [
            {"field": "gold", "headerClass": "fixed-size-header", "resizable": False},
            {"field": "silver", "headerClass": "fixed-size-header", "resizable": False},
            {"field": "bronze", "headerClass": "fixed-size-header", "resizable": False},
            {"field": "total", "headerClass": "fixed-size-header", "resizable": False},
        ],
    },
]

app.layout = html.Div(
    [
        html.Div([
            html.Span(className="legend-box resizable-header"), "Resizable Column",
            html.Span(className="legend-box fixed-size-header"), "Fixed Width Column",
        ]),
        dag.AgGrid(
            id="column-sizing-groups",
            rowData=df.to_dict("records"),
            columnDefs=columnDefs,
            defaultColDef={"width": 150},
            dashGridOptions={"animateRows": False}
        ),
    ],
)

if __name__ == "__main__":
    app.run(debug=True)
Resizable Column Fixed Width Column

Column Flex

It’s often required that one or more columns fill the entire available space in the grid. For this scenario, it is
possible to use the flex parameter. Some columns could be set with a regular width parameter, while other columns
would have a flex parameter.

Flex sizing works by dividing the remaining space in the grid among all flex columns in proportion to their flex value.
For example, suppose the grid has a total width of 450px and it has three columns: the first with width: 150 the
second with flex: 1 and third with flex: 2.
The first column will be 150px wide, leaving 300px remaining. The column with flex: 2 has twice the size
with flex: 1. So final sizes will be: 150px, 100px, 200px.

The flex parameter does not work with a width parameter in the same column. If you need to provide a
minimum width for a column, you should use flex and the minWidth parameter. flex will also take maxWidth
into account.

If you manually resize a column with flex either via the API or by dragging the resize handle, flex will
automatically be disabled for that column.

In the example below, note the following:

from dash import Dash, html
import dash_ag_grid as dag

app = Dash(__name__)

rowData = [
    {"a": "width 300px", "b": "flex 2 minWidth 200px maxWidth 350px", "c": "flex 1"}
]

columnDefs = [
    {"field": "a", "width": 300},
    {
        "headerName": "Flexed Columns",
        "children": [
            {
                "field": "b",
                "minWidth": 200,
                "maxWidth": 350,
                "flex": 2,
                "wrapText": True,
                "autoHeight": True,
            },
            {"field": "c", "flex": 1},
        ],
    },
]

app.layout = html.Div(
    [
        dag.AgGrid(
            id="column-sizing-flex1",
            columnDefs=columnDefs,
            rowData=rowData,
            dashGridOptions={"animateRows": False}
        ),
    ],
)

if __name__ == "__main__":
    app.run(debug=True)

This second example has flex in all columns. Try changing the browser window size and note how the proportions of the
columns
are maintained.

from dash import Dash, html
import dash_ag_grid as dag
import pandas as pd

app = Dash(__name__)

flex_widths = {"a": 750, "b": 750, "c": 750, "d": 750, "e": 1000, "f": 1000, "g": 1000, "h": 750, "i": 2500, "j": 1000,
               "k": 750, "l": 750, }

df = pd.DataFrame({i: list(range(12)) for i in flex_widths})

app.layout = html.Div(
    [
        dag.AgGrid(
            id="column-sizing-flex2",
            rowData=df.to_dict("records"),
            columnDefs=[{"headerName": i, "field": i, "flex": flex_widths[i]} for i in df.columns],
            dashGridOptions={"animateRows": False}
        )
    ],
)

if __name__ == "__main__":
    app.run(debug=True)