How to connect between dropdown input to DataTable output in plotly Dash

Question

i try to build a dashboard with plotly dash that has a dropdown menu as input with years and the output is data frame which will be filtered by the input in the dropdown. When i run the App, nothing is happend.

This is my code:

app= dash.Dash(__name__)

app.layout= html.Div([
    html.H1("Total Medals of Each Country", style={'text-alugn':'center', 'color':'white'}),
    dcc.Dropdown(id='select_year',
                 options=np.array(medals_by_country.year.unique(), dtype=np.int64),
                 multi=True,
                 value= ' ',
                 style={'width':'40%'}
    ),
html.Br(),    
html.Div([
    dash_table.DataTable(
        id='datatable_id',
        data=medals_by_country.to_dict('records'),
        columns=[
            {"name":i, "id":i, "deletable":False, "selectable":False} for i in medals_by_country.columns
        ],
        editable=False,
#         filter_action="native",
#         sort_action="native",
#         sort_mode="multi",
        row_selectable="multi",
        row_deletable=False,
        selected_rows=[],
        page_action="native",
        page_current=0,
        page_size=6,
#         page_action='none',
#         style_cell={'whiteSpace': "normal"},
#         fixed_rows={'headers':True, 'data':0},
#         virtualization=False,
        style_cell_conditional=[{'width':'40%'}],
        )
]),

])

@app.callback(
    Output(component_id='datatable_id', component_property='selected_rows'),
    Input(component_id='select_year', component_property='value')
)
def update_table(option_selected):
    dff= medals_by_country.copy()
    dff= dff[dff['year']== option_selected]
    
    return dff

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

I can't figure out how to connect between the dropdown and the DataTable, any suggestons will help. Enother question: If my DataTable has the abillity to filter columns, filter_action="native", is my @app.callback needs an Input id from DataTable itself?

Thank you

Answer 1

With Dropdown that has option multi = True you can't use dff= dff[dff['year']== option_selected] in your code but isin.

Your callback should be as below:

@app.callback(
    Output('datatable_id', 'data'),
    Input('select_year', 'value')
)
def update_table(option_selected):
    dff= medals_by_country.copy()
    dff= dff[dff['year'].isin(option_selected)]
    
    return dff.to_dict('records)

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