Issues with dash_table updating through callback

Dash Python
1

I’m trying to fill and update a table using a callback, but I only get an empty table with the columns names. To check the interactivity, I added a html.Div that follows the same structure and prints the input to both callbacks. I also added a print() statement into the dataTable callback to be sure it was actually called, and it works well, however, no numbers appear on the table. I assume I have a problem with the syntax, but I cannot find out how to fix it.

This is the part of the code that deals with the table:

data = pd.DataFrame()
html.Div([
          html.Div(id='my-div'),
                                                                                                              
           dash_table.DataTable(id='table_upper',columns=[{"name": i, "id": i} for i in data.cols])
    ])


@app.callback(
    dash.dependencies.Output('table_upper', "data"),
    [dash.dependencies.Input('subject-dropdown', 'value')])

def update_table(subject):

    data = ML_subject[subject]['upper'].iloc[:2]   
    print(data)
    
    return data.to_dict('rows')

@app.callback(
    Output(component_id='my-div', component_property='children'),
    [Input('subject-dropdown', 'value')])
def update_output_div(subject):

    return 'You\'ve entered "{}"'.format(subject)
2

Hi Limmeridge,

I can’t see any issues with the components or callbacks, and I have successfully recreated an updating DataTable using the same syntax. I think the only difference could be:

a) the dataframe, and your filtering. Have you checked the filtering this way works in a regular notebook?

ML_subject[subject]['upper'].iloc[:2]

b) The dcc.Dropdown component. Can you post this please? The example I tested was as follows:

    dcc.Dropdown(
    id='subject-dropdown',
    options = [{'label': 'Subject 1', 'value' : 'subject1'},
               {'label': 'Subject 2', 'value' : 'subject2'}],
    value=['subject1']
)
1 Like
3

Hi tjb, thanks for your response,

I finally understood what was going on, I initialized the data variable at the beginning of the script and formatted the name of the columns:

data=ML_subject['001']['upper'].iloc[:2]
cols=['\n('.join(i.split('('))for i in data.columns]
data.columns=cols

but I didn’t change the name of the columns in the callback function:

@app.callback(
dash.dependencies.Output('Gait_table_upper','data'),
[dash.dependencies.Input('subject-dropdown','value')])

def update_table(subject):
      data=ML_subject[subject]['upper'].iloc[:2]`

return data.to_dict('rows')

apparently, you cannot provide different names for the columns on the fly, unless you maybe specify it somehow. In any case, this was not something I wanted to do.
Thanks anyway for offering your help!

1 Like