DataTable dropdown option update callback output function

📊 Plotly Python
1 
import dash
from dash import Dash, dash_table, dcc, html, Input, Output, State, no_update, callback
import dash_bootstrap_components as dbc
import pandas as pd

app = dash.Dash(__name__)

# Create a sample DataFrame
df = pd.DataFrame({'TeamID': [1, 2, 3, 4],
                   'TeamName': ['Team 1', 'Team 2', 'Team 3', 'Team 4'],
                   'Finished': [1,1,0,1]})

team_select_table = dash_table.DataTable(
        id='team-selection-table',
        editable=True,
        column_selectable="single",
        row_selectable="multi",
        row_deletable=False,
        selected_columns=[],
        page_action="native",
        page_current= 0,
        page_size= 100,
        style_table={'minWidth': '100%'},
        dropdown={},

        style_header={
            'backgroundColor': 'rgb(30, 30, 30)',
            'color': 'white',
            'fontWeight': 'bold',
            'textAlign': 'center'
        },
        style_data={
            'whiteSpace': 'normal',
            'backgroundColor': 'rgb(50, 50, 50)',
            'color': 'white'
        },
        style_data_conditional=[
            {'if': {'column_id': 'TeamID'},
            'width': '10%'},
            {'if': {'column_id': 'TeamName'},
            'width': '10%'},
        ],
        style_cell_conditional=[
            {
                'if': {'column_id': c},
                'textAlign': 'center'
            } for c in ['TeamID', 'TeamName']
        ],
    )

app.layout = html.Div([
    team_select_table,
    html.Div(id='dummy_div'),
])

@app.callback(
    Output('team-selection-table', 'data'),
    Output('team-selection-table', 'columns'),
    Output('team-selection-table', 'dropdown'),
    Output('team-selection-table', 'style_data_conditional'),
    Input('dummy_div', 'children'),
    prevent_initial_call=False,
    background=False,
)
def load_teams(dummy):
    df['Finished'] = df['Finished'].map({1: True, 0: False})  # Convert to boolean values

    df_columns = [{'name': col, 'id': col} for col in df.columns]
    df_data = df.to_dict(orient='records')

    dropdown = {
        'TeamID': {'options': [{'label': str(val), 'value': val} for val in df['TeamID'].unique()]},
        'Finished': {'options': [{'label': 'Yes', 'value': True}, {'label': 'No', 'value': False}]}
    }

    style_data_conditional = [
        {
            'if': {'column_id': 'Finished'},
            'presentation': 'dropdown'
        }
    ]

    return df_data, df_columns, dropdown, style_data_conditional



if __name__ == '__main__':
    app.run(host="0.0.0.0", port=8020,debug=True)

Given the code above, I’ve been trying to update the dropdown options inside the datatable for the ‘Finished’ column. I cannot find an example online of someone doing this but following the references for the datatable, it should be possible. Could someone shed some light on what I’m missing?

2

Found a solution:

import dash
from dash import Dash, dash_table, dcc, html, Input, Output, State, no_update, callback
import dash_bootstrap_components as dbc
import pandas as pd

app = dash.Dash(__name__)

# Create a sample DataFrame
df = pd.DataFrame({'TeamID': [1, 2, 3, 4],
                   'TeamName': ['Team 1', 'Team 2', 'Team 3', 'Team 4'],
                   'Finished': [1,1,0,1]})

team_select_table = dash_table.DataTable(
        id='team-selection-table',
        editable=True,
        column_selectable="single",
        row_selectable="multi",
        row_deletable=False,
        selected_columns=[],
        page_action="native",
        page_current= 0,
        page_size= 100,
        style_table={'minWidth': '100%'},
        dropdown={},

        style_header={
            'backgroundColor': 'rgb(30, 30, 30)',
            'color': 'white',
            'fontWeight': 'bold',
            'textAlign': 'center'
        },
        style_data={
            'whiteSpace': 'normal',
            'backgroundColor': 'rgb(50, 50, 50)',
            'color': 'white'
        },
        style_data_conditional=[
            {'if': {'column_id': 'TeamID'},
            'width': '10%'},
            {'if': {'column_id': 'TeamName'},
            'width': '10%'},
        ],
        style_cell_conditional=[
            {
                'if': {'column_id': c},
                'textAlign': 'center'
            } for c in ['TeamID', 'TeamName']
        ],
    )

app.layout = html.Div([
    team_select_table,
    html.Div(id='dummy_div'),
])

@app.callback(
    Output('team-selection-table', 'data'),
    Output('team-selection-table', 'columns'),
    Output('team-selection-table', 'dropdown'),
    Input('dummy_div', 'children'),
    prevent_initial_call=False,
    background=False,
)
def load_teams(dummy):
    df['Finished'] = df['Finished'].map({1: True, 0: False})  # Convert to boolean values

    df_columns=[{"name": column, "id": column, "presentation": "dropdown"} for column in df.columns]
    df_data = df.to_dict(orient='records')

    dropdown = {
        'Finished': {'options': [{'label': 'Yes', 'value': True}, {'label': 'No', 'value': False}]}
    }


    return df_data, df_columns, dropdown



if __name__ == '__main__':
    app.run(host="0.0.0.0", port=8020,debug=True)