How to make Dash Ag-Grid column wider?

Dash Python
1

I’m making a table in Dash Ag-Grid and I can’t seem to make a column wider. I’ve got lots of extra space to the right, and I thought columnSize=auto-size or columnSize=sizeToFit would make the table fill the entire space.

image
image3729×617 126 KB

Here’s the column for columnDefs:

        {
            "field": "description",
            "headerName": "Part Description",
            "headerTooltip": "More information about the part",
            "wrapText": True,
            "autoHeight": True,
            "cellDataType": "text",
            "sortable": True,
            "resizable": True,
            "filter": True,
            # note my attempts at setting width params below:
            "minWidth": 100,
            "width": 180,
            "maxWidth": 400,
        },

Here’s the AgGrid itself:

AgGrid(
    id="inventory_ag_grid",
    rowData=df.to_dict("records"),
    columnDefs=get_inventory_columns(df=df),
    # Default theme is "ag-theme-quartz"
    className="ag-theme-quartz",
    dashGridOptions={
        # allow the grid to auto-size its height to fit rows
        # "domLayout": "autoHeight"
        # Default tooltip show delay is 2000 ms (2 seconds)
        "tooltipShowDelay": 100,
        "animateRows": True,
        "pagination": True,
        "skipHeaderOnAutoSize": True,
    },
    # 80vh is 80% of the viewport height
    style={
        "height": "80vh",
        "width": "100%",
    },
    # https://dash.plotly.com/dash-ag-grid/column-sizing
    columnSize="sizeToFit",
    # columnSize="autoSize",
    # columnSizeOptions={
    #     "defaultMinWidth": 100,
    #     # "columnLimits": [{"key": "description", "maxWidth": "30%"}],
    # },
    defaultColDef={"resizable": True},
    getRowStyle={
        "styleConditions": [
            {
                # Set every 2nd row to have a background color
                "condition": "params.rowIndex % 2 === 0",
                "style": {
                    "backgroundColor": "rgba(0, 0, 0, 0.05)",
                },
            },
        ]
    },
)

Documentation:

Here’s a reproducible example to play with:

import dash
import pandas as pd
from dash import html
from dash_ag_grid import AgGrid

# Sample DataFrame
df = pd.DataFrame(
    {
        "id": [1, 2, 3],
        "description": [
            "Short description",
            "Medium description with a bit more text",
            "Long description with a lot of text",
        ],
    }
)

# Dash app
app = dash.Dash(__name__)

app.layout = html.Div(
    [
        html.H1("Ag-Grid Example"),
        AgGrid(
            id="inventory_ag_grid",
            columnDefs=[
                {"field": "id", "headerName": "ID", "maxWidth": 400,},
                {
                    "field": "description",
                    "headerName": "Part Description",
                    "headerTooltip": "More information about the part",
                    "wrapText": True,
                    "autoHeight": True,
                    "cellDataType": "text",
                    "sortable": True,
                    "resizable": True,
                    "filter": True,
                    "minWidth": 100,
                    "width": 180,
                    "maxWidth": 800,
                },
            ],
            rowData=df.to_dict("records"),
            # Default theme is "ag-theme-alpine"
            className="ag-theme-alpine",
            style={
                "height": "500px",
                "width": "100%",
            },
            columnSize="sizeToFit",
            defaultColDef={"resizable": True},
        ),
    ]
)

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

Hi @seanrez

In your sample app, you set a maxWidth=400 on the first column maxWidth=800 on the second, so any unused space after 1200 will be blank.

3

I found the solution.

In production, I’m actually updating the “rowData” and “columnDefs” in a callback. Since they’re not available when the “auto-size” is run, it doesn’t actually work. The “columnSize” needs to be set after the “rowData” and “columnDefs” are set, in a chained callback.

This works:

    @dash_app.callback(
        Output("inventory_ag_grid", "columnSize"),
        Input("inventory_ag_grid", "columnDefs"),
        prevent_initial_call=True,
    )
    def set_column_size_after_columnDefs_and_rowData(_):
        """Must set the column size after the columnDefs and rowData; otherwise it won't work!"""
        # autoSize fits the column width to its content
        return "autoSize"

I found the solution in this other question:

1 Like