✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
⚾️ It's finally Baseball season! Root for the home team... & Register for our Sports Analytics Webinar!

Dynamically update a Dropdown from a table

Hi,

In my layout, I have 3 Dropdowns and 2 tables.
First, you choose one option in the first and the second DropDowns and an SQL query is created dynamically returning a dataframe. The first table is showing the dataframe using dash-table-experiments.
Now, I want to get a column of this dataframe(which was created dynamically) to be shown as the third Dropdown and I don’t know how to do that.

I saw in similar posts here in the forums that I should use

    dash.dependencies.Output('second-dropdown', 'options'),
    [dash.dependencies.Input('date-column-in-first-table', '-???-')]

but I don’t know how to address the dataframe as my input??

here is some of the code i wrote:


from datetime import datetime, timedelta

import dash
import dash_core_components as dcc
import dash_html_components as html
import dash_table_experiments as dt
from dash.dependencies import Input, Output, State

from my_project import my_module as pss

app = dash.Dash()


df_1 = pss.generate_df("some_parameters")
df_2 = pss.generate_df("some_parameters")



dataframes = {'option_1': df_1,
              'option_2': df2}

today = datetime.utcnow() + timedelta(-8)
days = [day.strftime("%Y-%m-%d") for day in (today + timedelta(-n) for n in range(14))]


def get_data_object(user_selection, start_date, num_of_days):
    """
    For user selections, return the relevant in-memory data frame.
    """
    num = int(num_of_days)
    if user_selection == 'option_1':
        dff = pss.generate_df('option_1', start_date, num)
    else:
        dff = pss.generate_df(, 'option_2', start_date, num)

    return dff


app.layout = html.Div([
    html.H4('Big Title'),
    html.Label('Medium Title:', style={'font-weight': 'bold'}),
    dcc.Dropdown(
        id='field-dropdown',
        options=[{'label': df, 'value': df} for df in dataframes],
        value='option_1',
        clearable=False
    ),
    dcc.Dropdown(
        id='my-dates',
        options=[{'label': i, 'value': i} for i in days],
        value='2018-05-03',
        clearable=False
    ),
    dcc.Input(id='num-of-days', value='5', type='text'),
    # dcc.Graph(id='graph-gapminder'),
    dcc.Dropdown(
        id='third-Dropdown',
    ),
    dt.DataTable(
        # Initialise the rows
        rows=[{}],
        row_selectable=False,
        filterable=True,
        sortable=True,
        # selected_row_indices=[],
        id='numeric-stats'
    ),
    html.Div(id='selected-indexes'),
    dt.DataTable(
        # Initialise the rows
        rows=[{}],
        # row_selectable=False,
        filterable=True,
        sortable=True,
        selected_row_indices=[],
        id='table_2'
    )
], className='container')


@app.callback(Output('third-Dropdown', 'options'), [Input(--???---)])


### some code to update table_2 with the third_Dropdown ###


@app.callback(Output('numeric-stats', 'rows'),
              [Input('field-dropdown', 'value'), Input('my-dates', 'value'), Input('num-of-days', 'value')])
def update_table(user_selection, start_date, num_of_days):
    df = get_data_object(user_selection, start_date, num_of_days)
    return df.to_dict('records')


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

1 Like