🚀 Gen 5 of the leading AI app deployment platform launches October 6. Click for the livestream.

Is it possible to dynamically load dcc.Dropdown option from values in Plotly Dash, dcc.store?

The application is built to store values from dcc.Input and display it on a dash_table . For the purpose of storing the input values dcc.store is being used.

Now I need to dynamically load the values of the first column i.e. “Student Name” in the dcc.Dropdown as options. Is there a possible way to share the data of the first column in dcc.store as an input to the options in dcc.Dropdown ?

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

user_key = 'Student Name'
# Setup table.
columns = ['Student Name', 
           'Age', 
           'Place',
           'Grade']

table = dash_table.DataTable(columns=[{"name": column, "id": column} for column in columns], 
                             data=[], id="table")
# Create app.


app = dash.Dash(prevent_initial_callbacks=True)
app.layout = html.Div([
    
                        html.Div([dcc.Input(id=column, value=column) for column in columns] +
                      [html.Button("Save", id="save"), dcc.Store(id="cache", data=[]), table]),
                        
                        html.Div([
                            
                            dcc.Dropdown(
                                            id='demo-dropdown',
                                            options=[
                                                        {'label': 'Mark', 'value': 'mrc'},

                                                        ],
                                                            value='mrc'
    )
                            
                            
                            
                            ])
                        
                        
                        
                        
                        ])


@app.callback(Output("table", "data"),
              [Input("save", "n_clicks")],
              [State("table", "data")] +
              [State(column, "value") for column in columns])



def update_table(n_clicks, data, *args):
    record = {columns[i]: arg for i, arg in enumerate(list(args))}
    
    try:
        record_index = [record[user_key] for record in data].index(record[user_key])
        data[record_index] = record
    
    except ValueError:
        data.append({columns[i]: arg for i, arg in enumerate(list(args))})
    
    return data


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

Hi @Anup1

Using the dcc.Store as input or state you can use their elements:

@app.callback(Output("your_output_id", "element_property"),
              [Input("table", "data")])
def use_table(data)
     print(data)

Data will be a variable that contains the dcc.Store elements :grinning: