Dash: Second table is not updating after first callback from initial table

Dash Python
1

I have two tables where the input of the first one (let’s call it A) creates a second table (B). The first callback works fine, but after the second callback of clicking A, B is not updating anymore. Does anything have to be specified in the callback for the table to update? Below is a small example that demonstrates the issue (clicking once Texas for example creates a second table, but clicking Nevada afterwards does nothing). Any help would be appreciated. Thanks!

P.s. crossposting from here

import dash
from dash import html, dcc, Output, Input, State, Dash
import dash_bootstrap_components as dbc
import pandas as pd
from dash.exceptions import PreventUpdate

app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])
df = pd.read_csv(
    'https://raw.githubusercontent.com/plotly/datasets/master/solar.csv')
df['user'] = '-'
df['date'] = '-'
data = {'State':  ['Texas', 'Texas', 'Texas', 'Nevada', 'Nevada', 'Nevada'],
        'Number of Solar plants': [12, 10, 13, 10, 9, 11]
        }

df2 = pd.DataFrame(data)

@app.callback(
        Output('selected_cell', 'children'),
        Output('tbl2', 'children'),
        Input('tbl', 'active_cell'),
        State('tbl', 'data')
)
def get_selected_cell(active_cell, data):
    if active_cell:
        col = active_cell['column_id']
        row = active_cell['row']
        cellData = data[row][col]
        # only if column relevant
        if active_cell['column_id'] == 'State':
            subset = df2[df2['State'] == cellData]
            selected_cell_element= html.P(cellData, id='selected_cell')
            selected_subset_table = html.Div(dash.dash_table.DataTable(
                data=subset.to_dict('records'),
                columns=[{"name": i, "id": i} for i in subset.columns],
                id='tbl2'
            ))
            return selected_cell_element,selected_subset_table
    else:
        raise PreventUpdate
    
app.layout = html.Div([
    dbc.Label('Click a cell in the table:'),
    dash.dash_table.DataTable(
        data=df.to_dict('records'),
        columns=[{"name": i, "id": i} for i in df.columns],
        id='tbl'),
    dbc.Alert(id='tbl_out'),
    html.Div(id='selected_cell'),
    html.Div(id='tbl2')
])

if __name__ == '__main__':
    app.run_server(debug=True, port=9100)
2

Hi @mizzlosis and welcome to the Dash community :slightly_smiling_face:

The reason the table is not updating after the first callback, is that the second table has the same id as the output div - both are called tbl2

All id’s must be unique - if you change one of the duplicates, the callback will work :tada:

1 Like
3

Ah how could I miss that! Thanks a lot!

1 Like