Update data and number and title of columns based on dropdown

Dash Python
1

The task is to update the table, when the value of the dropdown list is changed.
The number of columns is variable, because only unique values will be taken.
Total number of dropdowns -14
One table below.
I managed to create a new dataframe based on the dropdown list, but I cannot express this data as a result of callback. The table shows two rows -default column titles and empty data.
How to update the entire dash table, when new dataframe is created by dropdown?

   html.Div([
        html.Label(['Bin 14'], style={'font-weight': 'bold', 'display': 'inline-block'}),
        dcc.Dropdown(
            id='bin_14',
            options=[{'label': i, 'value': i} for i in available_indicators],
            multi=False,
            value=available_indicators[54]
        )
    ], style={'width': '7%', 'display': 'inline-block'}),

    html.Div([
        dash_table.DataTable(
            id='table',
            columns=[{"name": i, "id": i} for i in dff.columns],
            data=dff.to_dict('records'),
            style_header={'backgroundColor': 'rgb(30, 30, 30)'},
            style_cell={'backgroundColor': 'rgb(50, 50, 50)',
                        'color': 'white'}
        )
    ])

])

])

@ app.callback(
Output(‘table’, ‘data’),
Input(‘bin_1’, ‘value’),
Input(‘bin_2’, ‘value’),
Input(‘bin_3’, ‘value’),
Input(‘bin_4’, ‘value’),
Input(‘bin_5’, ‘value’),
Input(‘bin_6’, ‘value’),
Input(‘bin_7’, ‘value’),
Input(‘bin_8’, ‘value’),
Input(‘bin_9’, ‘value’),
Input(‘bin_10’, ‘value’),
Input(‘bin_14’, ‘value’),
Input(‘bin_12’, ‘value’),
Input(‘bin_13’, ‘value’),
Input(‘bin_14’, ‘value’))
def update_data_table(bin_1,bin_2,bin_3,bin_4,bin_5,bin_6,bin_7,bin_8,bin_9,bin_10,bin_11,bin_12,bin_13,bin_14):
myvalues = [parameter, bin_1, bin_2,bin_3, bin_4,bin_5,bin_6,bin_7,bin_8,bin_9,bin_10,bin_11,bin_12,bin_13,bin_14]
myvalues = list(dict.fromkeys(myvalues))
dff = pd.DataFrame(df[myvalues])
columns = [{“name”: i, “id”: i} for i in dff.columns]
data = dff.to_dict(‘records’)
return [dash_table.DataTable(data=data, columns=columns)]

Many thanks in advance!!!

2

Hi @Yuriy

I think the best way to work in your case is just bild the entire Dash data Table inside the callback and use an empty dcc.Div as output like:

        dcc.Div(id='my_output'),

In the callback use your dropdowns value to bild the dataframe and with the dataframe bild the entire Dash data table like:

my_table =  dash_table.DataTable(
            id="table",
            columns=[{"name": i, "id": i} for i in df.columns],
            data=df.to_dict("records"),
            )

And the return the table to the Div output:

      return my_table

Aditional tip: use this botton to copy and paste code in the forum:
image

3

Eduardo,

Thanks a lot!
It works.

In future I will insert the code in the proper way.

1 Like