PyCafe - Dash - AG Grid and Dash Mantine Components Integration- cell renderers

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
import dash_ag_grid as dag
from dash import  callback, Input, Output,  html, Dash, _dash_renderer
import dash_mantine_components as dmc
import dash_iconify

_dash_renderer._set_react_version('18.2.0')
data = [
    {"types": "Social Media", "links": "link"},
    {"types": "Development", "links": "link"}
]

columnDefs = [
    {
        "field": "types",
        "headerName": "Link Type",
    },
   
    {
        "field": "links",
         "headerName": "DMC Dropdown Menu",
        # "cellRenderer": "DMC_Menu",
        "cellStyle": {"overflow": "visible"}
    },
    {
        "field": "links",
        "cellRenderer": "DMC_Button",
        "cellRendererParams": {
            "rightIcon": "ph:eye",
        },
    }
]

grid = dag.AgGrid(
    id="custom-component-btn-grid",
    columnDefs=columnDefs,
    rowData=data,
    columnSize="autoSize",
    dashGridOptions={"rowHeight": 48}
)

dropdown = html.Div(
    [
        dmc.Text(id="menu-text", mb="md"),
        dmc.Menu(
            [
                dmc.MenuTarget(dmc.Button("Click for options!")),
                dmc.MenuDropdown(
                    [
                        dmc.MenuItem(
                            "External Link",
                            href="#/action-2",
                            target="_blank",
                        ),
                    ]
                ),
            ]
        ),
    ]
)

app = Dash(__name__)


app_layout = html.Div(
    [
        html.H1("Dash AG Grid + Dropdown Menu"),
        grid,
        html.Div(children="", id="div-selected-action"),
        dropdown
    ]
)

# for Dash Mantine 0.14
app.layout = dmc.MantineProvider(
    app_layout,
    forceColorScheme="light"
)


@callback(
    Output("div-selected-action", "children"),
    Input("custom-component-btn-grid", "cellRendererData"),
    prevent_initial_update=True
)
def cb_menu_action(data):
    return f"You selected - {data}"


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

ag-grid-dash-mantine-integration

AG Grid and Dash Mantine Components Integration- cell renderers
