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

Abierto
  • ¿Algo no está bien?
#318 1 comentario 1 reacción 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
3/5
Tiempo estimado
1-2 días
Aptitud para principiantes
42/100
Tipo de issue
Error
Claridad
Bastante claro
Estado de actividad
Estancado
Stack tecnológico
javascript, python
Área
frontend, web-dev

Línea de trabajo

Comienza con la reproducción proporcionada de Dash y AgGrid y, a continuación, rastrea DashAgGrid.updateColumnWidths() y la llamada interna a gridApi.autoSizeAllColumns(skipHeader) durante una actualización del filtro. Se considera terminado cuando los anchos de las columnas se calculan a partir de la rowData más reciente en lugar de los datos filtrados anteriormente, y la reproducción ya no muestra un dimensionamiento obsoleto.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

bug P3
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

Lenguaje dominante
Python
Estrellas
239
Forks
48
Sin PR fusionados en 30 d

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de plotly/dash-ag-grid

Todos los issues de plotly/dash-ag-grid

Issues similares

Más issues de Python

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.