DataTable Dropdowns

The DataTable includes support for per-column and
per-cell dropdowns. In future releases, this will
be tightly integrated with a more formal typing system.

For now, use the dropdown renderer as a way to limit the
options available when editing the values with an editable table.

DataTable with Per-Column Dropdowns

from dash import Dash, dash_table, html
import pandas as pd
from collections import OrderedDict


app = Dash(__name__)

df = pd.DataFrame(OrderedDict([
    ('climate', ['Sunny', 'Snowy', 'Sunny', 'Rainy']),
    ('temperature', [13, 43, 50, 30]),
    ('city', ['NYC', 'Montreal', 'Miami', 'NYC'])
]))


app.layout = html.Div([
    dash_table.DataTable(
        id='table-dropdown',
        data=df.to_dict('records'),
        columns=[
            {'id': 'climate', 'name': 'climate', 'presentation': 'dropdown'},
            {'id': 'temperature', 'name': 'temperature'},
            {'id': 'city', 'name': 'city', 'presentation': 'dropdown'},
        ],

        editable=True,
        dropdown={
            'climate': {
                'options': [
                    {'label': i, 'value': i}
                    for i in df['climate'].unique()
                ]
            },
            'city': {
                 'options': [
                    {'label': i, 'value': i}
                    for i in df['city'].unique()
                ]
            }
        }
    ),
    html.Div(id='table-dropdown-container')
])


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

DataTable with Per-Row Dropdowns

from dash import Dash, dash_table, html
import pandas as pd
from collections import OrderedDict


app = Dash(__name__)

df_per_row_dropdown = pd.DataFrame(OrderedDict([
    ('City', ['NYC', 'Montreal', 'Los Angeles']),
    ('Neighborhood', ['Brooklyn', 'Mile End', 'Venice']),
    ('Temperature (F)', [70, 60, 90]),
]))


app.layout = html.Div([
    dash_table.DataTable(
        id='dropdown_per_row',
        data=df_per_row_dropdown.to_dict('records'),
        columns=[
            {'id': 'City', 'name': 'City'},
            {'id': 'Neighborhood', 'name': 'Neighborhood', 'presentation': 'dropdown'},
            {'id': 'Temperature (F)', 'name': 'Temperature (F)'}
        ],

        editable=True,
        dropdown_conditional=[{
            'if': {
                'column_id': 'Neighborhood', # skip-id-check
                'filter_query': '{City} eq "NYC"'
            },
            'options': [
                            {'label': i, 'value': i}
                            for i in [
                                'Brooklyn',
                                'Queens',
                                'Staten Island'
                            ]
                        ]
        }, {
            'if': {
                'column_id': 'Neighborhood',
                'filter_query': '{City} eq "Montreal"'
            },
            'options': [
                            {'label': i, 'value': i}
                            for i in [
                                'Mile End',
                                'Plateau',
                                'Hochelaga'
                            ]
                        ]
        },
        {
            'if': {
                'column_id': 'Neighborhood',
                'filter_query': '{City} eq "Los Angeles"'
            },
            'options': [
                            {'label': i, 'value': i}
                            for i in [
                                'Venice',
                                'Hollywood',
                                'Los Feliz'
                            ]
                        ]
        }]
    ),
    html.Div(id='dropdown_per_row_container')
])


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