dash-ag-grid icon indicating copy to clipboard operation
dash-ag-grid copied to clipboard

Column widths incorrectly calculated based on previous rowData when using autoSize in AgGrid

Open petar-qb opened this issue 6 months ago • 1 comments

Description

I'm using AgGrid component with columnSize="autoSize" configuration. When the data filter value is changed, the grid column widths are calculated based on the previous instead on the latest rowData.

It seems like the DashAgGrid.updateColumnWidths() (and the inner gridApi.autoSizeAllColumns(skipHeader)) are called before the most recent rowData is set.

Expected behavior would be that the column widths are always aligned with the latest rowData.


How to Reproduce

Package version: dash-ag-grid==31.2.0

After running the code below, adjust the range slide filter as it's showed in the screen recoding (video below the code section):

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


# Initialize the Dash app
app = dash.Dash(__name__)


# Sample data
df = pd.DataFrame({
    'Column 1': [1, 2, 3, 4, 5, 6],
    'Column 2': ['A', 'B', 'C', 'VeryLongStringInputCell_VeryLongStringInputCell_VeryLongStringInputCell', 'D', 'E'],
    'Column 3': [10.5, 20.1, 30.2, 40.3, 50.4, 60.5],
})

# Layout
app.layout = html.Div([
    html.H1('Grid Page'),
    html.Div(id="outer_div_grid_id"),
    dcc.RangeSlider(id="filter_column_1_dropdown", min=1, max=6, step=1, value=[1, 6]),
])


@callback(
    Output("outer_div_grid_id", "children"),
    Input("filter_column_1_dropdown", "value"),
)
def update_outer_grid(dropdown_value):
    df_filtered = df[df["Column 1"].between(dropdown_value[0], dropdown_value[1], inclusive="both")]

    return [dag.AgGrid(
        id='grid_id',
        columnDefs=[{'field': col} for col in df.columns],
        columnSize="autoSize",
        rowData=df_filtered.to_dict('records'),
        defaultColDef={'resizable': True},
    )]


if __name__ == "__main__":
    app.run_server(debug=True, port=8051)

https://github.com/user-attachments/assets/ffa449c4-4219-42ef-bf0e-a152449b0c58

petar-qb avatar Aug 08 '24 09:08 petar-qb