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