Update DataTable with callback not working

Dash Python
1

Hi , i would like to update a second DataTable based on the selection of the first datatable.
however as the layout has a html.Div with just the table id in it , as i create the tables using a function …
i seem to get an error … how should i work out that problem ? thank you

error:

screen
screen1881×695 33.6 KB

layout code:

app.layout = html.Div([
    html.Div([
    html.Div([
        dcc.Dropdown(id='dropdown',
                    options=[
                        {'label':'Daily','value':0}, # what value to pass ?
                        {'label':'Weekly','value':1}],
                    value = 0,
                    multi=False,
                    clearable=False),
    ],className='six columns'),
    ],className='row'),
    
    html.Div([
    html.Div([ html.Div(id='table1'),
    ],className='six columns'),
        
    html.Div([html.Div(id='table2'),
    ],className='six columns'),
    ],className='row'),
    
])

callback code for dropdown selection: (works)

@app.callback(
    Output("table1", "children"),
    [Input("dropdown", "value")])

def update_table(selection):
    if selection == 0:
        rsc_daily = rsc_algo_test(sectors_df,daily)
        rsc_daily_sector = pd.DataFrame(rsc_daily,columns=['Ticker','RSC','Price','Percent Change','Index'])
        data=rsc_daily_sector.to_dict('rows')
        columns=[{"name": i, "id": i, "deletable": False, "selectable": False} for i in rsc_daily_sector.columns]
        return create_table(data,columns)
    if selection == 1:
        rsc_weekly = rsc_algo_test(sectors_df,weekly)
        rsc_weekly_sector = pd.DataFrame(rsc_weekly,columns=['Ticker','RSC','Price','Percent Change','Index'])
        data=rsc_weekly_sector.to_dict('rows')
        columns=[{"name": i, "id": i, "deletable": False, "selectable": False} for i in rsc_weekly_sector.columns]
        return create_table(data,columns)

callback code for second table: (doesent work) the None value comparison is just for initialization

@app.callback(
    Output("table2", "children"),
    [Input("table1", "selected_row"),
    Input('dropdown','value')])

def update_table2(selection,chosen_row):
    if  chosen_row == None and selection == 0:
        df_filtered_daily = rsc_algo_test(xlk_df,daily)
        rsc_daily_xlk = pd.DataFrame(df_filtered_daily,columns=['Ticker','RSC','Price','Percent Change','Index'])
        data=rsc_daily_xlk.to_dict('rows')
        columns=[{"name": i, "id": i, "deletable": False, "selectable": False} for i in rsc_daily_xlk.columns]
        return create_table(data,columns)
2

Hi @MrktWzrd and welcome to the Dash community :slight_smile:

In order to use the properties of a table in a callback, the table needs to have an id. You can add the id as an argument to your create_table function.

Your second callback could look something like:

@app.callback(
    Output("table2", "children"),
    [Input("id_table1", "selected_row"),
    Input('dropdown','value')])


def update_table2(selection,chosen_row):
    if  chosen_row == None and selection == 0:
        df_filtered_daily = rsc_algo_test(xlk_df,daily)
        rsc_daily_xlk = pd.DataFrame(df_filtered_daily,columns=['Ticker','RSC','Price','Percent Change','Index'])
        data=rsc_daily_xlk.to_dict('rows')
        columns=[{"name": i, "id": i, "deletable": False, "selectable": False} for i in rsc_daily_xlk.columns]
        id = 'id_table2'
        return create_table(data,columns, id)

And the first callback would have

        id='id_table1'
        return create_table(data,columns, id)

One more thing to check: When you have multiple inputs (or outputs) the order of the arguments in the callback matters. In this callback function it looks like you intend for the dropdown to be the first argument and the selected rows to be the second.

def update_table2(selection,chosen_row):

But under the decorator, it’s the opposite. The order needs to match otherwise you might spend time chasing mysterious bugs :slight_smile:

    [Input("id_table1", "selected_row"),
    Input('dropdown','value')])
1 Like
3

Hi @AnnMarieW thank you very much for the warm welcome and the quick answer!
you are awesome!

cheers

1 Like