St_aggrid - Unable to get columns to autofit contents by default

Custom Components streamlit-aggrid
1

Hi, I’m trying to configure st_aggrid to automatically size all grid column widths (both visible and off screen which require scrolling) based on the data contained in each column. However, the following configuration options are not working and there is quite a bit of wasteful white space being displayed. The only way that I’m able to get the column widths that I want is to manually select Autosize All Columns once the grid is rendered. Has anybody had success in getting these widths set automatically? I’m using streamlit-aggrid==0.3.4.post2 and streamlit==1.20.0. Thanks!

from st_aggrid import (
    GridOptionsBuilder,
    AgGrid,
    ColumnsAutoSizeMode,
    JsCode
) 

    gb = GridOptionsBuilder.from_dataframe(df)
    gb.configure_side_bar(columns_panel=False)  <- this also doesn't seem to work

    # Add resizable option to defaultColDef
    defaultColDef = {"resizable": True, "initialFlex":True}
    gb.configure_default_column(**defaultColDef)
    gridOptions = gb.build()
    gridOptions["autoSizeAllColumns"] = True
    gridOptions["scrollbarWidth"] = 8
    gridOptions["alwaysShowHorizontalScroll"] = True

    custom_css = {
        ".ag-row-hover": {"background-color": "#4895ef !important"},
        ".ag-row-odd": {"background-color": "#2c2d30"},
        ".ag-row-even": {"background-color": "#232323"},
        ".ag-root-wrapper": {"border": "3px solid #2c2d30"},
        ".ag-header": {"background-color": "#2c2d30"},
        ".ag-status-bar": {"background-color": "#232323"},
        ".ag-right-cols-container": {"background-color": "#232323"},
        ".ag-side-buttons": {"background-color": "#2c2d30"},
        ".ag-paging-panel": {"background-color": "#2c2d30"},
        ".ag-root": {"background-color": "#232323"},
        ".ag-cell-focus .ag-cell-value": {"background-color": "#4895ef !important"},
        ".ag-root": {"background-color": "#232323"},
        ".ag-cell-focus .ag-cell-value": {"background-color": "#4895ef !important"},
        ".ag-row-selected": {"color": "#4895ef !important"},
        ".ag-theme-streamlit": {'transform': "scale(0.8)", "transform-origin": '0 0'}
    } 

    grid_response = AgGrid(
        df,
        gridOptions=gridOptions,
        data_return_mode="AS_INPUT",
        update_on="GridUpdateMode.SELECTION_CHANGED",
        theme="streamlit", 
        enable_enterprise_modules=True,
        height=grid_height,
        width="100%",
        reload_data=True,
        custom_css=custom_css,
        columns_auto_size_mode=ColumnsAutoSizeMode.FIT_CONTENTS,
        allow_unsafe_jscode=True
    )

Using “fit_columns_on_grid_load=True” only makes things worse/ugly.

2

To answer my own question, use a loop to individually set the column widths:

        gridOptions = gb.build() 
        column_defs = gridOptions["columnDefs"]
        for col_def in column_defs:
            col_name = col_def["field"]
            max_len = df[col_name].astype(str).str.len().max() # can add +5 here if things are too tight
            col_def["width"] = max_len