✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
🧬 Learn how to build RNA-Seq data apps with Python & Dash. Register for the May 20 Webinar!

How to return a datatable updated by 2 dropdowns as inputs in Plotly Python

As titled, i am creating a plotly dashboard with a data-table only. There will be 2 drop-downs as inputs, and the data-table will update according to the drown-downs. How do I set the layout and callbacks?

import pandas as pd
import dash
import dash_core_components as dcc
import dash_html_components as html
import dash_table as dt
from dash.dependencies import Input, Output, State

df = pd.read_csv(https://elartedm.com/wp-content/uploads/2020/03/data_hk.csv, header=0, encoding = 'utf8')

app = dash.Dash()
application = app.server

dropdown = html.Div([html.Label('district'),
             dcc.Dropdown(id='dropdown_d',
                          options=[{'label': i, 'value': i} for i in df["district"].unique()], value='中西區 Central &'),
             html.Label('address'),
             dcc.Dropdown(id='dropdown_a',
                          options=[{'label': i, 'value': i} for i in df["address"].unique()], value='第二街143號海昇大廈2座')])

final_table = html.Div([dash_table.DataTable(id="final_table")])

app.layout = html.Div([dropdown, final_table])

@app.callback(Output('final_table', 'data'),
          [Input('dropdown_d', 'value'),
           ])

def update_table(selected_value):
    df = pd.read_csv(https://elartedm.com/wp-content/uploads/2020/03/data_hk.csv, header=0, encoding = 'utf8')
    df_updated = df[df["district"] == selected_value]
    columns = [{'name': i, 'id': i} for i in df_updated.columns]
    data = df.to_dict('records')
    return columns, data

if __name__ == "__main__":
    app.run_server(debug=True, port=8055)

This is the farthest i can get. The code above is only trying to update the data-table from 1 dropdown value, but my goal is to update by 2 dropdown values.

any help is very much appreciated.
in case the data file is needed, here is the link to the data.

Add your other dropdown to the Input as shown below. Also note you need to pass in another arg to your update_table.

@app.callback(Output('final_table', 'data'),
          [Input('dropdown_d', 'value'),
           Input('dropdown_a', 'value'])
def update_table( selected_value, val_for_dropdown_a):

You can Input both dropdown value, and pass both arg to update_table.

@app.callback(
    Output('final_table', 'data'),
    [Input('dropdown_d', 'value'),
     Input('dropdown_a', 'value'),]
)
def update_table(dropdown_d, dropdown_a):
    ... other code...

Thank you guys for the answers, I will try it out when I m with my mac.

But allow me one more question before that, is
Output(‘final_table’, ‘data’) correct? Because the entire piece of code wasn’t working, and I saw some may use Output(‘final_table’, ‘children’) here.

Since your function as writen is returning data and columns, your Output should be:

@app.callback(
  [Output('final_table', 'data'),
  Output('final_table', 'columns')],   
  [Input('dropdown_d', 'value'),
  Input('dropdown_a', 'value'])
def update_table( selected_value, val_for_dropdown_a):
  ... your code...
  return data, columns

But if your columns are not changing, you can just return the data. It all depends on what you want/need to update.

yes, it solved my problem, thank you all!

1 Like