Grid unresponsive with large datasets when columns are set to autoSizeAll

[AnnMarieW]

Here is a demo app to reproduce:

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

app = dash.Dash(__name__)

df = pd.read_csv(
    "https://raw.githubusercontent.com/plotly/datasets/master/liquor_iowa_2021.csv"
)

app.layout = html.Div(
    [
        dcc.Markdown(
            "Switch between autosize and size to fit to see the columns respond. Columns can also be resized by dragging at their edge."
        ),
        dcc.RadioItems(
            id="columnSizing",
            options=[
                {"label": i, "value": j}
                for i, j in [
                    ("Auto size", "autoSizeAll"),
                    ("Size to fit", "sizeToFit"),
                ]
            ],
            value="autoSizeAll",
        ),
        dag.AgGrid(
            id="input",
            columnDefs=[{"field": i} for i in df.columns],
            rowData=df.to_dict("records"),
            columnSize="autoSizeAll",
            defaultColDef=dict(
                resizable=True,
                sortable=True,
                filter=True,
                minWidth=100
            ),
        ),
    ]
)

@app.callback(Output("input", "columnSize"), Input("columnSizing", "value"))
def column_sizing(size_type):
    return size_type

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

[BSd3v]

In the meantime, passing columnSize=None and then using a callback to set autoSizeAllColumns with True will perform the action when the grid is ready to receive updates and auto sizes the columns accordingly.

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

app = dash.Dash(__name__)

df = pd.read_csv(
    "https://raw.githubusercontent.com/plotly/datasets/master/liquor_iowa_2021.csv"
)

app.layout = html.Div(
    [
        dcc.Markdown(
            "Switch between autosize and size to fit to see the columns respond. Columns can also be resized by dragging at their edge."
        ),
        dcc.RadioItems(
            id="columnSizing",
            options=[
                {"label": i, "value": j}
                for i, j in [
                    ("Auto size", "autoSizeAll"),
                    ("Size to fit", "sizeToFit"),
                ]
            ],
            value="autoSizeAll",
        ),
        dag.AgGrid(
            id="input",
            columnDefs=[{"field": i} for i in df.columns],
            rowData=df.to_dict("records"),
            columnSize=None,
            defaultColDef=dict(
                resizable=True,
                sortable=True,
                filter=True,
                minWidth=100
            ),
        ),
    ]
)

@app.callback(Output("input", "columnSize"), Input("columnSizing", "value"), prevent_initial_call=True)
def column_sizing(size_type):
    return size_type

@app.callback(Output('input', 'autoSizeAllColumns'), Input('input','id'))
def autoSize(n):
    return True

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

[AnnMarieW]

Fixed in #28 :tada: