Learn how to use Dash Bio for next-gen sequencing & quality control. 🧬 Register for the Oct 27 webinar.

Bug when one DataTable is used to generate another DataTable

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:

  1. Selection in the upper table works but instantly the row is deselected again.
  2. 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!

Thanks for reporting! This indeed looks like a bug to me. I’ve created an issue in dash-table here to discuss with engineering: https://github.com/plotly/dash-table/issues/323

1 Like

Hi @chriddyp, any news on this one? Just to know if it is something you think may be fixed soon or if we need to switch to a different way of doing. Thanks!