Black Lives Matter. Please consider donating to Black Girls Code today.

Datatable on dropdown menu

Hi there, it’s now 5 days since I m trying to understand how the hec can I add a datatable to a dropdown subtab.

This is where I m up to now (obvisouly not working…)

thanks Angelo

app.layout = html.Div(style={'backgroundColor': colors['background']},children=[
    html.H1(children='STOCK SCREENER -DASHBOARD',
            style={'textAlign': 'left', 'colour': colors['text']}),
    
    dcc.Interval(id='refresh', interval=200,),
    dcc.Input(id='input', value='input stock code', type='text', placeholder="stock code"),
    

    dcc.Tabs(id="tabs", value='tab', children=[
        
        dcc.Tab(label='SNAPSHOT', value='tab-1', style=TAB_STYLE,selected_style=SELECTED_STYLE, children=[
            html.Div(id='example-graph')]),
        
                 
        dcc.Tab(label='KEY STATS', value='tab-2',style=TAB_STYLE,selected_style=SELECTED_STYLE, children=[
            dcc.Dropdown(id='subtab-2', multi=True, options=[{'label': 'Key Stats', 'value': 'A'},
                                                 {'label': 'Key Stats Comparison', 'value': 'B'}])]),
        
        dcc.Tab(label='FINANCIALS', value='tab-3',style=TAB_STYLE,selected_style=SELECTED_STYLE,children=[
            dcc.Dropdown(id='subtab-3', options=[
                                                {'label': 'Balance Sheet', 'value': 'C'},
                                                dash_table.DataTable( id= 'datatable1', columns=[{"name": i, "id": i} for i in df_balance_sheet],
                                               data=df_balance_sheet.to_dict('records'))],
                        
            

                                                {'label': 'Income Statement', 'value': 'D'},
                                                {'label': 'Cash Flow', 'value': 'E'}],
                         
                                               )]),

Hi @angelo, the options of a dcc.Dropdown have to have plain text strings for their value key, you cannot have a DataTable as an option of the dropdown. Do you want each row of your dataframe to appear as an option of the dataframe or do you want the whole table to appear in the dropdown (I don’t think this is possible, but if you give us more details about what you want to do we can try to suggest workarounds)?

Hi Emmanuelle,
I have partially and roughly achieved having a dataframe in one of the dropdown options.

What I m trying to achieve is having a multi-dropdown where , for each ‘label’ in options I have a different output content; so in my case I would like to have a data table.

I have seen this few times but not able to implement it into my script.

thks for your help