Dynamically add columns in datatable based on selected dropdown values

Dash Python
1

Hello everyone,

I want to dynamically add columns based on selected dropdown values. I tried the example that is in Adding or removing columns section, but this works only when you try to add columns using a button.
My table is created also dynamically based on two dropdowns (I have a callback that returns the whole datatable definition).

My code for adding the columns:

@app.callback(
[Output(‘main_table’, ‘columns’)],
[Input(‘second_dropdown’, ‘value’)],
[State(‘main_data’, ‘data’), State(‘main_table’, ‘columns’)]
)
def add_columns(values, data, existing_columns):
if existing_columns is None:
return None
for value in values:
if value not in existing_columns:
existing_columns.append({
‘id’: value,
‘name’: value
})
print(existing_columns)
return existing_columns

I searched for something similar to my problem but I didn’t succeed.
I’m new to Dash so any kind of help would be really appriciated.

Best regards

2

Here’s an example where selecting a value in a dropdown adds a column in the table. Let me know if it helps.

import dash
from dash.dependencies import Input, Output, State
from dash.exceptions import PreventUpdate

from dash_table import DataTable, FormatTemplate
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash(__name__)

app.layout = html.Div([
    dcc.Dropdown(
        id='dropdown',
        options=[{
            'label': 'label: ' + id,
            'value': id
        } for id in ['b', 'c', 'd', 'e', 'f']]
    ),
    DataTable(
        id='table',
        columns=[{
            'name': x,
            'id': x,
            'selectable': True
        } for x in ['a']],
        column_selectable="single",
        data=[{
            'a': 'a' + str(x),
            'b': 'b' + str(x),
            'c': 'c' + str(x),
            'd': 'd' + str(x),
            'e': 'e' + str(x),
            'f': 'f' + str(x)
        } for x in range(0,100)]
    )
])

@app.callback(
    Output('table', 'columns'),
    [Input('dropdown', 'value')],
    [State('table', 'columns')]
)
def update_columns(value, columns):
    if value is None or columns is None:
        raise PreventUpdate

    inColumns = any(c.get('id') == value for c in columns)

    if inColumns == True:
        raise PreventUpdate

    columns.append({
        'label': 'label: ' + value,
        'id': value
    })

    return columns

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

dropdown_columns

3

I had to rewrite it to work for my case but it works like a charm. Thank you :slight_smile: