Py.Cafe

amward/

dash-ag-grid-dropdown-menus

Dash AG Grid with Dropdown Menus

DocsPricing
  • 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
# For more info see https://community.plotly.com/t/use-dropdown-link-menu-in-dash-ag-grid/84648/11


import dash_ag_grid as dag
from dash import Dash, html
import dash_bootstrap_components as dbc




social_links = [
    ("bi-linkedin", "LinkedIn", "https://linkedin.com"),
    ("bi-twitter", "Twitter", "https://twitter.com"),
    ("bi-facebook", "Facebook", "https://facebook.com"),
    ("bi-instagram", "Instagram", "https://instagram.com"),
    ("bi-youtube", "YouTube", "https://youtube.com"),
]

dev_links = [
    ("bi-github", "GitHub", "https://github.com"),
    ("bi bi-gitlab", "GitLab", "https://gitlab.com"),
    ("bi-bitbucket", "Bitbucket", "https://bitbucket.org"),
    ("bi-jira", "Jira", "https://atlassian.com"),
    ("bi-stack-overflow", "Stack Overflow", "https://stackoverflow.com"),
]



data = [
    {"type": "Social Media", "links": social_links},
    {"type": "Development", "links": dev_links}
]

columnDefs = [
    {
        "field": "type",
        "headerName": "Link Type",
    },
    {
        "field": "links",
        "headerName": "Links",
        "cellRenderer": "DropdownLinks",
        "cellStyle": {"overflow": "visible"}
    },
]


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


app = Dash(__name__, external_stylesheets=[dbc.themes.SPACELAB, dbc.icons.BOOTSTRAP])

app.layout = html.Div(
    [
        html.H1("Dash AG Grid + dbc.Dropdown Menu"),
        grid
    ]
)

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