dash-ag-grid
dash-ag-grid copied to clipboard
Column widths incorrectly calculated based on previous rowData when using autoSize in AgGrid
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