Hi there,
We’ve been using DataTables and they are really great. Just one thing happenned recently and I cannot understand why. It seems to me it is a bug. I’ve constructed a minimalistic example based on the same data as in the user guide here.
Here is a screenshot of the app:
What I intend is that, when someone clicks on a row in the upper table, the lower table displays all countries in the selected continent (and may select a new representative country for the country, that is brought back to the upper table - this last bit is not done here).
Two bugs (I think) happen with the code:
- Selection in the upper table works but instantly the row is deselected again.
-
Even though the lower table is generated with the option
selected_rows=[0], the default selected row is always the last one that was selected: if you select Benin for Africa, and then switch to Asian countries, then Bangladesh will be selected and not Afghanistan (see below).
Here Benin is selected. Now if I switch to Asian countries (by selecting Asia in the upper table), I should see Afghanistan selected (considering what my callback returns - see code at the end). But Bangladesh is.
(Also, see how no row is selected in the upper table…)
Am i missing something?
Here is my code:
import dash
from dash.dependencies import Input, Output
import dash_table
import dash_core_components as dcc
import dash_html_components as html
import pandas as pd
df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/gapminder2007.csv')
df_regions = df.groupby('continent')['country'].first().reset_index()
df_regions.rename(columns={'country': 'representative'}, inplace=True)
app = dash.Dash(__name__)
app.layout = html.Div([
dash_table.DataTable(
id='datatable-regions',
columns=[
{"name": i, "id": i, "deletable": True} for i in df_regions.columns
],
data=df_regions.to_dict("rows"),
row_selectable="single",
selected_rows=[0],
),
html.Div(id='datatable-countries-container')
])
@app.callback(
Output('datatable-countries-container', "children"),
[Input('datatable-regions', "data"),
Input('datatable-regions', "selected_rows")])
def serve_representative_country_selection_table(data, rows):
selected_row = rows[0]
selected_continent = data[selected_row]['continent']
c = (df['continent'] == selected_continent)
dft = df.loc[c].drop(columns=['continent'])
table = dash_table.DataTable(
id='datatable-countries',
columns=[
{"name": i, "id": i, "deletable": True} for i in dft.columns
],
data=dft.to_dict("rows"),
row_selectable="single",
selected_rows=[0],
)
return html.Div([html.P(f"Please select a representative for {selected_continent}:"), table])
if __name__ == '__main__':
app.run_server(debug=True)
Thanks!