Dropdown Sub Category List

Dash Python
1

Hello. Is it possible adding sub categories to dropdown? You can see an example in the picture. Is there any feature for that? If there is no feature like that, do you have any idea how to make a drop down like that? Thank you.

sub

2

Hi @outlier

You can make groups with the dash-mantine-components dmc.Select or dmc.MultiSelect components. Here is an example:

image


from dash import  Dash, html
import dash_mantine_components as dmc

app = Dash(__name__)

app.layout = html.Div(
    [
        dmc.Select(
            label="Select category",
            placeholder="Select one",
            value="sub-1",
            data=[
                {"value": "sub-1", "label": "Sub Category 1", "group": "Main Category"},
                {"value": "sub-3", "label": "Sub Category 3",  "group": "Secondary Category"},
                {"value": "sub-2", "label": "Sub Category 2", "group": "Main Category"},
                {"value": "sub-4", "label": "Sub Category 4", "group": "Secondary Category"},
            ],
        ),
    ]
)


if __name__ == '__main__':
     app.run_server(debug=True)
2 Likes
3

This is so cool answer! I have never heard dash_mantine_components. This is a new information for me. Thank you so much.

1 Like
4

Thanks for sharing! I’m working with dmc.Select now and was wondering how to use the group option. Looks like a list of dictionaries.

5

Yes, exactly - like in the example I shared above - it’s pretty cool! :sunglasses:

2 Likes
6

Is it possible to do the same for dropdowns inside datatables?
If not, is there a way to simulate it by having some of the options in the dropdown disabled and with a different style (e.g. color) so they act like headers?
Thanks

7

Ooo. That’s a nice thought.

I don’t think you can have headers. But give it a s shot with the options for sure with the disabled bit.

It will go away when you start typing though and begin filtering.

8

do you know how I can disable some of the options?

9

Might not work then, did you try passing the disabled key like you would with regular dropdowns?

10

in the documentation is says that datatable dropdowns accept only label and value keys… :frowning_face:

1 Like