How can you autoSize ag.Grid columns while still fitting columns to the width of the grid?

Dash Python
1

I want to auto size columns based on cell contents (ie columnSize=“autoSize”) while still fitting the columns to the width of the grid (ie columnSize=“sizeToFit”). Basically, I want my app to say “fit these columns to the width of the grid, but make sure each column is sized such that its contents can be seen”.

I tried this with a combination of flex, autoSize, sizeToFit, responsiveSizeToFit, etc and have not been successful. Is what I am proposing possible? Or am I better off manually setting min/max widths with some combination of autoSize/sizeToFit/flex? Thanks

Code below

defaultColDef = {
        "resizable": True,
        "sortable": True,
        "editable": False,
        # "flex": 1,
        "wrapHeaderText": True,
        "autoHeaderHeight": True
    }
    getRowStyle = {
        "styleConditions": [
            {
                "condition": f"params.data['Days on Service'] < {dos}",
                "style": {"backgroundColor": "#ffd7b5"},
            },
        ],
    }

    grid = dag.AgGrid(
        id='dwell-on-the-beauty-of-life',
        rowData=data.to_dict('records'),
        columnDefs=columnDefs,
        defaultColDef=defaultColDef,
        columnSize="autoSize",
        columnSizeOptions={"skipHeader":True},
        # columnSize="responsiveSizeToFit",
        getRowStyle=getRowStyle,
        dashGridOptions={'animateRows': False, "tooltipShowDelay": 400, "suppressColumnVirtualisation": True},
        # dashGridOptions={'animateRows': False, "tooltipShowDelay": 400},
        style={"height": "500px", "width": "100%"},
    )
2

Hi @bchurn

I typically use "flex:1 and "minWidth" in the column definitions. This will make the grid width responsive when the screen size changes, plus if the user changes the width manually then it won’t resize that column.