plotly / plotly/dash-ag-grid

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

Open
#318 1 comment 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

bug P3
Dominant language
Python
Stars
241
Forks
47
PR merge metrics
No merged PRs in 30d

Description

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

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the provided Dash and AgGrid reproduction, then trace DashAgGrid.updateColumnWidths() and the inner gridApi.autoSizeAllColumns(skipHeader) call during a filter update. Done means column widths are calculated from the latest rowData rather than the previous filtered data, and the reproduction no longer shows stale sizing.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, python
Domain
frontend, web-dev
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.