DataTable: Front end sorting not working

Dash Python
1

Hey guys,

I’ve been trying to setup front-end sorting for a DataTable I dynamically create. Following the instructions from the guide, it seemed the only requirement was sorting=True or sorting=‘fe’ but I can’t make it work.

I checked the example from the guide (Sorting, Filtering, Selecting, and Paging Natively | Dash for Python Documentation | Plotly) and there’s something I don’t get:

The DataTable is generated in the layout
The callback takes the DataTable as input and fires output in another Div
There is no callbact output towards the DataTable
And yet… if I remove the callback from the code, the sorting/filtering stops working and it becomes impossible to interact with the table.

Now I could refer to part4 of the guide a create a callback for sorting/filtering (which I will do if I don’t find a solution). However, since there are few rows in this table (~10) I figured front-end process would be good enough.

Any help would be greatly appreciated

EDIT : for the record, my versions are:
dash==0.30.0
dash-html-components==0.13.2
dash-core-components==0.38.0
dash-table==3.1.6

2

This is a known issue with the DataTable:

3

Alright, thanks for the info!
I read the topic you linked and figured “what if I create a callback that does nothing”

I created a callback that take my datatable as input and does nothing (‘pass’). Because the datatable is now linked to a callback, the ‘front-end sorting’ is functionnal. I’ll symply remove this callback once the bug is fixed

Thanks again

1 Like
4

@Jordan I’m trying the same approach but the sorting still doesn’t work.

In the code snippet, I’m using a dummy callback function to take data_table as input.

    html.Div(id='table',
             children=dash_table.DataTable(id='df_table',
                                           columns=[{"name": i, "id": i} for i in df_sub.columns],
                                           data=df_sub.to_dict('records'),
                                           style_as_list_view=True,
                                           sorting=True
                                           )),

    html.Div(id='dummy_table', style={'display': 'none'})


@app.callback(Output('dummy_table', 'children'),
              [Input('df_table', 'data_timestamp')])
def dummy_fx(timestamp):
    pass

Did you do something similar? Any pointers as to why this is not working.

The issue (https://github.com/plotly/dash-table/issues/202#issuecomment-436750407) is supposed to be fixed, but it’s still not working.

Appreciate your help!

5

@Jordan hi, do you know how to implement ‘sort’ for a specific column?