Possible bug in dash-ag-grid row sorting?

Dash Python
1

Hi friends,

I’m trying to alter the row sorting of dash-ag-grid using callbacks. I have been successful so far, but it only seems to work if I have columnSize=“sizeToFit”. Conversely it does not seem to work if I have columnSize=“reponsiveSizeToFit”. Is this a bug?? (Not sure where is best to report this)

Example below. Alter the columnSize argument to see the bug in action.

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

app = Dash(__name__)


df = pd.read_csv(
    "https://raw.githubusercontent.com/plotly/datasets/master/ag-grid/olympic-winners.csv"
)


app.layout = html.Div(
    [
        html.Button("Sort Athlete Ascending", id="sort-athlete-asc"),
        dag.AgGrid(
            id="grid",
            rowData=df.to_dict("records"),
            columnDefs=[
                {"field": "athlete", "sortable": True},
                {"field": "age"},
                {"field": "country"},
                {"field": "year"},
                {"field": "sport"},
                {"field": "total"},
            ],
            columnSize="sizeToFit",
            # columnSize="responsiveSizeToFit",
            dashGridOptions={"animateRows": False},
        ),
    ]
)


@callback(
    Output("grid", "columnState"),
    Input("sort-athlete-asc", "n_clicks"),
    prevent_initial_call=True,
)
def sort_athlete_column(_):
    return [{"colId": "athlete", "sort": "asc"}]


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

Thanks

2

Hello @dsmi90,

This is a result of you not passing the whole columnState for all the columns, I think. If you were to provide all then the columnState wouldn’t be incomplete.

However, I will point out that responsive size to fit is the same as providing a defaulColDef with flex: 1. Which I recommend using over the responsive size to fit. As flex is using native functionality from the grid vs calling a code any time there is an update.

1 Like