Row_selectable radio button does not update after rows have been sorted

Dash Python
1

I build a coronavirus monitor with a dash table to show the detailed cases numbers of each country/region.

The callback function used here is that when user select one row using the radio button, the map will automatically update to region that the selected row has. This works fine. However, I also add sort_action="native", once a sort event occurred, the rank of selected row changes based on its value (For example, originally the selected row is row 5 after sorting it is now row 15), but the map also updated to the region that the original row 15. This is not expected.

It looks like even though the rows have been sorted, the radio buttons are not, which are still associated with original rows.

Here is the code for dash table:

dash_table.DataTable(
                                      id='datatable-interact-location',
                                      # Don't show coordinates
                                      columns=[{"name": i, "id": i} for i in dfSum.columns[0:5]],
                                      # But still store coordinates in the table for interactivity
                                      data=dfSum.to_dict("rows"),
                                      row_selectable="single",
                                      #selected_rows=[],
                                      sort_action="native",
                                      style_as_list_view=True,
                                      style_cell={
                                          'font_family':'Arial',
                                          'font_size':'1.2rem',
                                          'padding':'.1rem',
                                          'backgroundColor':'#f4f4f2',
                                      },
                                      fixed_rows={'headers':True,'data':0},
                                      style_table={
                                          'maxHeight':'500px',
                                          #'overflowY':'scroll',
                                          'overflowX':'scroll',
                                      },
                                      style_header={
                                        'backgroundColor':'#f4f4f2',
                                        'fontWeight':'bold'},
                                      style_cell_conditional=[
                                          {'if': {'column_id':'Country/Regions'},'width':'28%'},
                                          {'if': {'column_id':'Remaining'},'width':'18%'},
                                          {'if': {'column_id':'Confirmed'},'width':'18%'},
                                          {'if': {'column_id':'Recovered'},'width':'18%'},
                                          {'if': {'column_id':'Deaths'},'width':'18%'},
                                          {'if': {'column_id':'Confirmed'},'color':'#d7191c'},
                                          {'if': {'column_id':'Recovered'},'color':'#1a9622'},
                                          {'if': {'column_id':'Deaths'},'color':'#6c6c6c'},
                                          {'textAlign': 'center'}
                                      ],
                                  )

Any help here would be greatly appreciated.

Thanks

2

you likely need to use something like row_selected_ids and pass in ids to your data via an “id” column (i’m on my phone, so i don’t have the details). the id could just be the data frame index or the country itself

4

Thanks Chris.

I finally figured it out.

First create an ‘id’ column in the data and set as index
Then add “selected_row_ids” as one input
Finally, extract location coordinate via dff.loc[selected_row_ids[0]].lat and dff.loc[selected_row_ids[0]].lon

@app.callback(
    Output('datatable-interact-map', 'figure'),
    [Input('datatable-interact-location', 'derived_virtual_selected_rows'),
     Input('datatable-interact-location', 'selected_row_ids')]
)

def update_figures(row_ids, selected_row_ids):
        
    if row_ids is None:
        row_ids = []
        
    dff = dfSum

Just trying to confirm that ‘selected_row_ids’ will automatically to look for an column with name ‘id’ in the data, right?