Updating dropdown menu options dynamically together with a datatable

Dash Python
1

Hi there, I am a dash novice and have been wondering how I can update 3 dropdowns using another parent dropdown that controls a datatable:

In the first bit of code I have 4 dataframes that I load individually from excel for each currency: USD, EUR, GBP and AUD.

  ccy = ['USD','EUR','GBP','AUD']

 files = [file for x in ccy for file in glob.glob('*{} Master Report-en-us.xlsx'.format(x))]

 print(files)

df_usd = pd.read_excel(files[0], skiprows=2)
df_eur = pd.read_excel(files[1], skiprows=2)
df_gbp = pd.read_excel(files[2], skiprows=2)
df_aud = pd.read_excel(files[3], skiprows=2)

dfs = [df_usd,df_eur, df_gbp, df_aud]

Sample data for one the files is given below:

Dash Cap

I then use a parent dropdown (id = ‘titles’) with the 4 dfs above as options, this allows the user to select which currency df they want to load as an input and generate a datatable as an output:

  dbc.Row(
            dbc.Col(html.Div(dcc.Dropdown(id = 'titles', options = [{'label':i,'value':i} for i in ccy],
                      value=ccy[0], 
                        multi=False,
                        placeholder = 'Select currency'),
                             style={'padding-left':'10px'}),
                           width = {'size':2}))

Callback for generating datatable and the options for the other 3 dropdowns when user selects a currency from parent dropdown:

 @app.callback([Output('table_header','children'),Output('ticker','options'),
          Output('industry','options'),Output('rank','options'),
          Output('data_memory','data'),
          Output('my_table','tooltip_header')],
          [Input('titles', 'value')])
 def update_table_and_header(title):

 if title is None:
    raise PreventUpdate
 elif title == 'USD':
    df = df_usd
 elif title == 'EUR':
    df = df_eur
 elif title == 'GBP':
    df = df_gbp
 elif title == 'AUD':
    df = df_aud
    
ticker_o = [{'label':i,'value':i} for i in sorted(df.Ticker.unique())]

industry_o = [{'label':i,'value':i} for i in sorted(df['Lehman Industry'].unique())]

rank_o = [{'label':i,'value':i} for i in sorted([1,2,3,4,5])]



data = df.to_dict('records')

tooltip_header = {i: i for i in df.columns}

return dcc.Markdown(f'''{title} Rank File Table:'''), ticker_o, industry_o, rank_o, 
df.to_dict('records'),tooltip_header

Image of layout below:

Dash Cap2
Dash Cap21884×517 20 KB

The issue I am struggling with is that, once the user selects the file to load the datatable under the currency dropdown, I would also like the user to be able to filter the generated datatable by say Ticker and/or Indus and/or Index Rank. For example, if one selects AAPL from Ticker dropdown, then I would also want the Industry dropdown options to only have Tech, which is the corresponding value for the ticker and furthermore if a user selects Banking under Industry dropdown, then that should also dynamically update the options of the ticker dropdown and the Index rank dropdown while filtering the datatable at the sametime.

Hope my explanation is clear, my code attampt failed as I obviously could not update the options of a dropdown that are already defined in 2 callbacks @AnnMarieW

2

I think you need to generate another callback where the input will be ‘ticker’ ‘value’ and the output will be ‘industry’ ‘options’ and pass to the options only that it fit with the value selected by the user.

3

Thanks @Eduardo I considered that but that would mean i will have the same components as outputs in 2 callbacks.

4

Hey nickmuchi,

There are options to call the same component from a callback, see this interesting link:

1 Like