Storing the row dropdown selected option into a list

Hi, I am new to Dash, and this is a follow-up question from the post here.

I have an app with a dropdown menu on each row, and I would like to store the selected values in a list for future use. Ideally, I would like this list to be updated every 5 minutes as long as the app is running (but is not critical).

This is my code:

# Sample DataFrame
df = pd.DataFrame({
    'ID': [1, 2, 3, 4],
    'Name': ['A', 'B', 'C', 'D'],
    'Previous status': ['New', 'In Progress', 'New', 'In Progress']
})

app = dash.Dash(__name__)

app.layout = html.Div(
    [
        dash_table.DataTable(
            id='table-dropdown',
            data=df.to_dict('records'),
            style_table={'overflowX': 'auto', 'minWidth': '50%'},
            style_cell={'textAlign': 'left'},
            columns=[{'id': 'status-dropdown', 'name': 'Status', 'presentation': 'dropdown'}] +
                    [{'id': col, 'name': col} for col in df.columns],
            style_data_conditional=[
                {
                    'if': {'filter_query': '{Previous status} = "In Progress"'},
                    'backgroundColor': 'red',
                    'color': 'white'
                },
                {
                    'if': {'filter_query': '{Previous status} = "New"'},
                    'backgroundColor': 'orange',
                    'color': 'white'
                },
                {
                    'if': {'filter_query': '{status-dropdown} = "New" && {Previous status} != "PLACE_HOLDER"'},
                    'backgroundColor': 'green',
                    'color': 'white'
                },
                {
                    'if': {'filter_query': '{status-dropdown} = "In Progress" && {Previous status} != "PLACE_HOLDER"'},
                    'backgroundColor': 'yellow',
                    'color': 'black'
                }
            ],
            editable=True,
            dropdown={
                'status-dropdown': {
                    'options': [
                        {'label': "In Progress ", 'value': "In Progress"},
                        {'label': "New", 'value': "New"},
                    ],
                    'clearable': True,
                },
            },
        ),
        html.Div(id='table-dropdown-container'),
    ]
)


# Initialize list to save selected dropdown values
selected_values = []


@app.callback(
    Output('table-dropdown-container', 'children'),
    Input('table-dropdown', 'data_previous'),
    State('table-dropdown', 'data')
)
def update_selected_values(previous_data, current_data):
    global selected_values
    if previous_data != current_data:
        selected_values = [row['status-dropdown'] for row in current_data]
    return selected_values


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

this code was working at the beginning, but now it gives me the following error:

Traceback (most recent call last):
  File "C:\Users\simone.diclaudio\OneDrive - ARCADIS\Zimo\S&B\FPI invoices dashboard\test.py", line 74, in update_selected_values
    selected_values = [row['status-dropdown'] for row in current_data]
                      ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  File "C:\Users\simone.diclaudio\OneDrive - ARCADIS\Zimo\S&B\FPI invoices dashboard\test.py", line 74, in <listcomp>
    selected_values = [row['status-dropdown'] for row in current_data]
                       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
KeyError: 'status-dropdown'

I tried to call row['Status] but again I got:

Traceback (most recent call last):
  File "C:\Users\simone.diclaudio\OneDrive - ARCADIS\Zimo\S&B\FPI invoices dashboard\test.py", line 74, in update_selected_values
    selected_values = [row['Status'] for row in current_data]
                      ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  File "C:\Users\simone.diclaudio\OneDrive - ARCADIS\Zimo\S&B\FPI invoices dashboard\test.py", line 74, in <listcomp>
    selected_values = [row['Status'] for row in current_data]
                       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
KeyError: 'Status'

How can I access the selected value from each dropdown and dynamically store it in a list?

Thanks

Simone

Hi @zimo

Modify the callback to use the ‘get’ method to retrieve the value of ‘status-dropdown’ from each row, and if it doesn’t exist it will return ‘PLACE_HOLDER’ as a default value.

@app.callback(
    Output('table-dropdown-container', 'children'),
    Input('table-dropdown', 'data_previous'),
    State('table-dropdown', 'data')
)
def update_selected_values(previous_data, current_data):
    global selected_values
    if previous_data != current_data:
        selected_values = [row.get('status-dropdown', 'PLACE_HOLDER') for row in current_data]
    return selected_values

The code ran successfully without errors when I tried this, hopefully behaving as you’re expecting it to.

2 Likes