Change dropdown options dynamically by row in one datatable

Dash Python
1

Hello!
I have a datatable with 4 dropdown options. One of the them ‘Units Type Code’ should be based on the option chosen for ‘Product Name’, i.e. if they choose ‘chemical 1’, ‘Units Type Code’ would have specific options based upon that Product.

image
image1745×197 8.41 KB

I have seen examples of dynamic dropdowns where the dropdowns are separated, but since my dropdowns are in the same datatable, I’m confused about how this might work.
My code is quite long, so for convenience I have just included the specific datatable in question.
The dropdowns options right now are in lists, but I do have a dictionary with products as keys and lists of units as values, which I think could be helpful in this scenario.

html.Div(children=[
                dash_table.DataTable(id={'type': 'process-table',
                                         'index': n_clicks},
                                     data=[{}],
                                     style_table={'margin': '2em',
                                                  'width': '90%',
                                                  'display': 'inline-block'},
                                     style_cell={'font-family': 'calibri',
                                                 'textAlign': 'left'},
                                     columns=[{'id': 'Function Type Code',
                                               'name': 'Function Type Code',
                                               'presentation': 'dropdown'},
                                              {'id': 'Direction Type Code',
                                               'name': 'Direction Type Code',
                                               'presentation': 'dropdown'},
                                              {'id': 'Product Name',
                                               'name': 'Product Name',
                                               'presentation': 'dropdown'},
                                              {'id': 'Conversion Factor',
                                               'name': 'Conversion Factor',
                                               'clearable': True, 'type': 'numeric'},
                                              {'id': 'Units Type Code',
                                               'name': 'Units Type Code',
                                               'presentation': 'dropdown'},
                                              ],
                                     row_deletable=True,
                                     editable=True,
                                     dropdown={'Function Type Code': {'options': [{'label': i, 'value': i} for i in
                                                                                  function_list]},
                                               'Direction Type Code': {'options': [{'label': i, 'value': i} for i in
                                                                                   ['Input', 'Output']]},
                                               'Product Name': {'options': [{'label': i, 'value': i} for i in
                                                                            product_list]},
                                               'Units Type Code': {'options': [{'label': i, 'value': i} for i in
                                                                              units_list]},
                                               })

Any help appreciated!

2

Hi @dem26

Check out the second example on this page: Dropdowns Inside DataTable | Dash for Python Documentation | Plotly

3

Hello!
I did see these examples, in particular the one using dropdown_conditional. However I dont think this is suitable for me; as far as I can tell these need to be individually listed i.e. if product = product1 then units = [1, 2, 3]. Listing all of these for me wouldn’t be impossible but certainly inefficient.
If I’m mistaken on how to use this argument then please let me know :slight_smile:

4

Hi @dem26

It’s not necessary to list them all individually - see the example below.

If the database is very large, it may reduce performance, but it’s worth a try

import dash
import dash_html_components as html
import dash_table
import pandas as pd
from collections import OrderedDict


app = dash.Dash(__name__)

df = pd.DataFrame(
    OrderedDict(
        [
            ("City", ["NYC", "Montreal", "LosAngeles"]),
            ("Neighborhood", ["Brooklyn", "Mile End", "Venice"]),
            ("Temperature (F)", [70, 60, 90]),
        ]
    )
)

city_neighborhood = {
    "NYC": ["Brooklyn", "Queens", "Staten Island"],
    "Montreal": ["Mile End", "Plateau", "Hochelaga"],
    "LosAngeles": ["Venice", "Hollywood", "Los Feliz"],
}


app.layout = html.Div(
    [
        dash_table.DataTable(
            id="dropdown_per_row",
            data=df.to_dict("records"),
            columns=[
                {"id": "City", "name": "City", "presentation": "dropdown"},
                {"id": "Neighborhood", "name": "Neighborhood", "presentation": "dropdown"},
                {"id": "Temperature (F)", "name": "Temperature (F)"},
            ],
            editable=True,
            dropdown={
                "City": {
                    "options": [
                        {"label": i, "value": i}
                        for i in df['City'].unique()
                    ]
                }
            },
            dropdown_conditional=[
                {
                    "if": {
                        "column_id": "Neighborhood",
                        "filter_query": "{{City}} eq {}".format(city),
                    },
                    "options": [{"label": i, "value": i} for i in neighborhood],
                }
                for city, neighborhood in city_neighborhood.items()
            ],
        ),
        html.Div(id="dropdown_per_row_container"),
    ]
)


if __name__ == "__main__":
    app.run_server(debug=True)
1 Like
5

I’ve been trying variations of this all day with no success, this is great! thanks so much! :smiley:

1 Like