Dash DataTable - Retaining sorted order with interval update

Dash Python
1

Hi, I’m using dash-table-experiments to display live data that is continuously being updated using the interval component. However, whenever I sort the table, the table is reset to its original order after the interval update. Is there a workaround or some way to retain the sorted order of the data table while data is still being updated using the interval component? Thanks for the help in advance!

2

Are you updating the rows property of the DataTable? If so, then I believe that you would need your function to do the sorting server side before sending it back (by including sortColumn and sortDirection as State inside your callback). I haven’t tested the sortColumn or sortDirection properties so this may not work.
Right now, sorting modifies the rows property directly rather than updating some other property. Which in turn means that if you update the rows property, the component doesn’t apply another transformation on top of it. It sounds like we might need some type of untransformed_rows property that designates the data without any client-side operations applied on it yet (i.e without the filters or sorting applied to it).

3

Chris, the data table filters reset when I click on any other element on the dash; not just interval stuff.

4

I’m using the sortColumn and sortDirection variables when creating my table (entire table creation below), but they are not being used. "Task" is the name of my first column, and "ASC" is the key for ascending, according to the sort source code.

    return dt.DataTable(
                rows=data_dict,  # Table data
                columns=list(data_dict[0].keys()),  # Column names
                row_selectable=True,  # Able to select independent rows
                filterable=True,  # Able to filter columns by value
                # debounced=True,  # Delay after filtering before callback
                sortable=True,  # Able to sort by column values
                editable=False,  # Not able to edit values
                resizable=True,  # Able to resize columns to fit data
                max_rows_in_viewport=5,  # Scroll if more than 5 rows
                selected_row_indices=selected_indices,  # selected rows
                sortColumn='Task',  # set sorting by task
                sortDirection='ASC',  # set increasing order for sort
                id='table-clowdrexp')  # Use the same ID for callbacks
5

Hi Chris,

is there a control component that drives the sorting of the rows property and is there a name and i.d for that control component. When the end user clicks on the experiments table headers and the rows property sorts that list of dictionaries what’s the lever being pulled on to effect that sort.

6

In the new DataTable (https://dash.plot.ly/datatable), the sorting properties are available as sorting_settings and the sorting property (https://dash.plot.ly/datatable/reference)

1 Like
7

That’s fantastic news. I will dive into it. Thanks Chris.

1 Like