Dash AG Grid and callback component_property

Dash Python
1

Hi there,

I am new in Dash applications and I wish to create a AG Grid which is sorted by the values of a dataframe column in ascending or descending order. Here are the steps I am following:

  1. import a csv and convert it into a pandas dataframe (df).
  2. create a dropdown component that recognizes df’s columns labels (id = “dropdown”).
  3. create a radiobutton component that allows me to toggle between ascending/descending order (id = “radio_button”).
  4. create the callback:

@callback(
Output(component_id=“sorted-parameters-table”, component_property=“children”),
Input(component_id=“dropdown”, component_property=“value”),
Input(component_id=“radio_button”, component_property=“value”)
)
def update_output(sort_dropdown, sort_radio):
asc_order=False
if sort_radio==“Ascending”: asc_order = True
df_sorted = df.sort_values(by=sort_dropdown, ascending=asc_order)
grid = dag.AgGrid(
columnDefs=[{“field”: x} for x in df_sorted.columns],
rowData=df_sorted.to_dict(“records”),
dashGridOptions={“pagination”:True}
)
return grid

Here is my question:

  1. ideally I wouldn’t like the dag.AgGrid to be located inside the update_output method, but I don’t know what to use as a component_property for the Output @callback.
  2. Assuming that the dag.AgGrid stays inside the update_output method, why the following code does not show me the AgGrid? Any help/hints would be much appreciated.

Regards,
jm

2

Hi @johnmirts and welcome to the dash community :slight_smile:

By default, you can sort simply by clicking on the column headings. If you would like to sort using a callback, you can find an example on this page of the docs:

1 Like
3

Much easier than I initially thought! Thanks @AnnMarieW for pointing me to the right direction.

1 Like