PyCafe - Dash - Interactive Analytics with Dash and Mantine

assets/
app.py
requirements.txt
app.py
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
from dash import Dash, html, dcc, Input, Output, callback
import dash_mantine_components as dmc
import dash
import dash_ag_grid as dag
import pandas as pd


app = Dash(
    __name__,
    external_stylesheets=dmc.styles.ALL,
    suppress_callback_exceptions=True,
)

df = pd.DataFrame({
    'Column 1': [1, 2, 3],
    'Select': [None, None, None]
})

labels = ["Pandas", "NumPy", "TensorFlow", "PyTorch", "Pydantic", "Polars"]

select_component = dmc.Select(
                data=labels,
                placeholder="Type 'p' for 'Pandas' and hit Tab. Try with Enter too",
                selectFirstOptionOnChange=True,
                autoSelectOnBlur=False,
                clearSearchOnFocus=True,
                searchable=True,
            )

select_component_with_autoselect = dmc.Select(
                data=labels,
                placeholder="Type 'p' for 'Pandas' and hit Tab. Try with Enter too",
                selectFirstOptionOnChange=True,
                autoSelectOnBlur=True,
                clearSearchOnFocus=True,
                searchable=True,
            )

columnDefs_noauto = [
    { "field": "Column 1", "headerName": "id", "maxWidth": 50},
    {
        "field": "Select",
        "editable":True,
        'cellEditor': {'function': 'AllFunctionalComponentEditors'},
        'cellEditorParams': {'component':select_component},
        'cellEditorPopup': True,
        "flex": 1
    },
]

columnDefs_withauto = [
    { "field": "Column 1", "headerName": "id", "maxWidth": 50},
    {
        "field": "Select",
        "editable":True,
        'cellEditor': {'function': 'AllFunctionalComponentEditors'},
        'cellEditorParams': {'component':select_component_with_autoselect},
        'cellEditorPopup': True,
        "flex": 1
    },
]

columnDefs_RichSelect = [
    { "field": "Column 1", "headerName": "id", "maxWidth": 50},
    {
        "field": "RichSelect",
        "editable":True,
        "cellEditor": "agRichSelectCellEditor",
        "cellEditorParams": {
            "values": labels,
            "searchType": "matchAny",
            "allowTyping": True,
            "filterList": True,
            "highlightMatch": True,
            "valueListMaxHeight": 220,
        },
        "flex": 1
    },
]

ag_grid_0 = dag.AgGrid(
    columnDefs=columnDefs_noauto,
    rowData=df.to_dict('records'),
    dashGridOptions={'singleClickEdit': True},
    style ={"height":"200px"}
)


ag_grid_1 = dag.AgGrid(
    columnDefs=columnDefs_withauto,
    rowData=df.to_dict('records'),
    dashGridOptions={'singleClickEdit': True},
    style ={"height":"200px"}
)

ag_grid_2 = dag.AgGrid(
    columnDefs=columnDefs_withauto,
    rowData=df.to_dict('records'),
    dashGridOptions={
    "singleClickEdit": True,
    "enterNavigatesVertically":True,
    "enterNavigatesVerticallyAfterEdit":True},
    style ={"height":"200px"}
)

ag_grid_3 = dag.AgGrid(
    enableEnterpriseModules=True,
    columnDefs=columnDefs_RichSelect,
    rowData=df.to_dict('records'),
    dashGridOptions={
    "singleClickEdit": True,
    "enterNavigatesVertically":True,
    "enterNavigatesVerticallyAfterEdit":True},
    style ={"height":"200px"}
)


def app_layout():

    return dmc.MantineProvider(
        children=dmc.Stack([
            dmc.Text("dmc.Select without AutoSelect"),
            select_component,
            dmc.Text("dmc.Select with AutoSelect"),
            select_component_with_autoselect,
            dmc.Text("Ag Grid dmc.Select, no AutoSelect"),
            ag_grid_0,
            dmc.Text("Ag Grid dmc.Select, with AutoSelect"),
            ag_grid_1,
            dmc.Text("Ag Grid dmc.Select, with AutoSelect, with Enter Vertically:"),
            ag_grid_2,
            dmc.Text("Ag Grid RichSelect, with Enter Vertically:"),
            ag_grid_3,

        ]),
        id="mantine-provider",
    )


app.layout = app_layout

if __name__ == "__main__":
    app.run(debug=True)
Py.Cafe

dash-mantine-combobox-problem

Interactive Analytics with Dash and Mantine
