PyCafe - Dash - Dash AG Grid with DMC Components as Cell Editors

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
"""
Example from https://py.cafe/BSd3v./dash-ag-grid-mantine-app

How to use DMC as cell editors in Dash Ag Grid
"""

import dash_mantine_components as dmc
from dash import Dash, _dash_renderer
_dash_renderer._set_react_version("18.2.0")
import dash_ag_grid as dag
import pandas as pd

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

now = "2024-12-30"

df = pd.DataFrame({
    'Column 1': [1, 2, 3, 4, 5, 6],
    'DatePickerInput': [now, now, now, now, now, now],
    'TagsInput': [['A']] * 6,  # Note TagsInput values must be a list
    'Select': ['A', 'B', 'C', 'A', 'B', 'C']
})

columnDefs = [
    { "field": "Column 1"},
    {
        "field": "DatePickerInput",
        'cellEditor': {'function': 'AllFunctionalComponentEditors'},
        'cellEditorParams': {'component': dmc.DatePickerInput(valueFormat="YYYY-MM-DD")},
        'cellEditorPopup': True,
    },
    {
        "field": "TagsInput",
        'cellEditor': {'function': 'AllFunctionalComponentEditors'},
        'cellEditorParams': {'component': dmc.TagsInput(data=["A", "B", "C"])},
        'cellEditorPopup': True,
    },
    {
        "field": "Select",
        'cellEditor': {'function': 'AllFunctionalComponentEditors'},
        'cellEditorParams': {'component': dmc.Select(data=["A", "B", "C"])},
        'cellEditorPopup': True,
    },
]


component = dmc.Box([
    dmc.Title('Dash AG Grid with DMC components as cell editors', order=3),
    dag.AgGrid(
        id='grid_id',
        columnDefs=columnDefs,
        columnSize="autoSize",
        rowData=df.to_dict('records'),
        defaultColDef={'editable': True},
        className="ag-theme-alpine-dark",
    ),
], p="lg")


app.layout = dmc.MantineProvider(
    component,
    forceColorScheme="dark"
)

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

dash-ag-grid-dmc-cell-editors

Dash AG Grid with DMC Components as Cell Editors
