Updating data table from dropdown component and callbacks

Dash Python
1

Hello All,
I am having issue on displaying table using dropdown component and callbacks,
Values do not get displayed, just dropdown menu and headers get visible

df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/gapminderDataFiveYear.csv')

dash.register_page(__name__,
                   path='/analytics-dashboard',
                   title='Our Analytics Dashboard',
                   name='Our Analytics Dashboard',
                   location="sidebar")



layout = html.Div([
    dcc.Store(id='store', data=df.to_dict('records')),
    html.Div([
        html.H1('Full table', style={'textAlign': 'center'}),
        html.Br(),
        dash_table.DataTable(data=[], id='table', page_size=10),
        html.Br(),
        html.Br()]),
    html.Div([
        html.H2('Table from selected continent'),
        dcc.Dropdown(id='dropdown-continent', options=df['continent'].unique(), value='Europe'),
        html.Br(),
        html.Br(),
        dash_table.DataTable(
            id='table-continent',
            columns=[{"name":i, "id": i} for i in df.columns]),
        ]),
    ])
        
        
        
@callback(
    Output('table', 'data'),
    Input('store', 'data'))
def fn_table(data):
    return data



@callback(
    Output('table-continent', 'data'),
    Input('dropdown-continent', 'value'))
def fn_dropdown(continent):
    df_c = df[[df['continent'] == continent]]
    return df_c.to_dict('records')

Would you have ideas on why it is not working ?

Many thanks for your time !

2

hi @Olivier_fr
Can you try to return the column data as well and see if that works?

@callback(
    Output('table-continent', 'data'),
    Output('table-continent', 'columns'),
    Input('dropdown-continent', 'value'))
def fn_dropdown(continent):
    df_c = df[[df['continent'] == continent]]
    return df_c.to_dict('records'), [{"name":i, "id": i} for i in df_c.columns]
3

Hello Adam,
Many thanks for your time !

Very strange behavior…I made changes as you mentioned and it works !

@callback(
    [Output('table-continent', 'data'),
      Output('table-continent', 'columns')],
    Input('dropdown-continent', 'value'))
def fn_dropdown(continent):
    df_c = df[df['continent'] == continent]
    return df_c.to_dict('records'), [{"name":i, "id": i} for i in df_c.columns]

Then, I revert changes and it continues to work !

Can you tell me why adding this line of code Output('table-continent', 'columns') fixes the problem?

Thank you again !

4

I’m not a 100%. But from my experience, to update the DataTable in the apps I made I always needed to update both row and column data.

5

@Olivier_fr it should work without any changes to you current setup you are just not boolean indexing correctly in Pandas. You are doing df_c = df[[df['continent'] == continent]] when you need to be doing df_c = df[df['continent'] == continent]

from dash import dash, html, dcc, dash_table, Input, Output, callback
import pandas as pd

df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/gapminderDataFiveYear.csv')

app = dash.Dash(__name__, title='Our Analytics Dashboard')

app.layout = html.Div([
    dcc.Store(id='store', data=df.to_dict('records')),
    html.Div([
        html.H1('Full table', style={'textAlign': 'center'}),
        html.Br(),
        dash_table.DataTable(data=[], id='table', page_size=10),
        html.Br(),
        html.Br()]),
    html.Div([
        html.H2('Table from selected continent'),
        dcc.Dropdown(id='dropdown-continent', options=df['continent'].unique(), value='Europe'),
        html.Br(),
        html.Br(),
        dash_table.DataTable(id='table-continent'),
    ]),
])


@callback(
    Output('table', 'data'),
    Input('store', 'data'))
def fn_table(data):
    return data


@callback(
    Output('table-continent', 'data'),
    Input('dropdown-continent', 'value'))
def fn_dropdown(continent):
    df_c = df[df['continent'] == continent]  # --> correct boolean indexing
    return df_c.to_dict('records')

if __name__ == '__main__':
    app.run(debug=True)
6

Thank you for your reply, Adam