Dash Mantine : Group Support?

Dash Python
1

Hi everyone

Does Dash Mantine NOT support ‘groups’ or am I doing something wrong.
Mantine React docs

import dash_mantine_components as dmc
from dash import Dash, html, dcc, Input, Output, State, Patch, ctx, MATCH, ALL

app = Dash(__name__)

app.layout = html.Div(
    [
        dmc.Select(
            id="creatable-select",
            creatable=True,
            searchable=True,
            style={"width": 200},
            #data=["react", "flask"],
            data=[
        { 'group': 'Frontend', 'items': ['React', 'Angular'] },
        { 'group': 'Backend', 'items': ['Express', 'Django'] },
      ]
        ),
        dmc.Text(id="result", mt=20),
    ]
)

@app.callback(Output("result", "children"), Input("creatable-select", "value"))
def popo(data):
    return str(data)

if __name__ == "__main__":
    app.run(debug=False)
2

Hi @popo

The link you provided was for the current version of the upstream Mantine library which is V7. Note that the current Dash Mantine V0.12.1 uses Mantine V5

Dash Mantine does support groups,but the data prop changed in Mantine V7.

Try using the Mantine V5 (more verbose) syntax:

data=[
    {"group": "Frontend", "value": "React", "label": "React"},
    {"group": "Frontend", "value": "Angular", "label": "angular"},
    {"group": "Backend", "value": "Express", "label": "Express"},
    {"group": "Backend", "value": "Django", "label": "Django"},
],

For your reference, here is the V5 Mantine docs:

3 Likes