PyCafe - Dash - Dash AG Grid with Theme Switch

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
"""
Example of
- grid theme is styled with className `dmc-ag-grid` which uses Mantine CSS variables to 
override the alpine light theme making a callback not required when switching themes.
"""


import dash_mantine_components as dmc
from dash import Dash, _dash_renderer, Input, Output, clientside_callback, callback
from dash_iconify import DashIconify
import dash_ag_grid as dag
import pandas as pd
_dash_renderer._set_react_version("18.2.0")

def make_grid():
    df = pd.read_csv(
        "https://raw.githubusercontent.com/plotly/datasets/master/ag-grid/olympic-winners.csv"
    )
    columnDefs = [
        {"field": "athlete", "checkboxSelection": True},
        {"field": "sport" },
        {"field": "year" },
        {"field": "total"},
    ]

    return  dag.AgGrid(
        id="grid",
        columnDefs=columnDefs,
        rowData=df.to_dict("records"),
        columnSize="sizeToFit",
        dashGridOptions={"animateRows": False, "rowSelection": "multiple", "suppressRowClickSelection": True},
        selectedRows=df.head(2).to_dict("records"),
        className="ag-theme-alpine dmc-ag-grid"
    )


theme_toggle = dmc.Switch(
    offLabel=DashIconify(icon="radix-icons:sun", width=15, color=dmc.DEFAULT_THEME["colors"]["yellow"][8]),
    onLabel=DashIconify(icon="radix-icons:moon", width=15, color=dmc.DEFAULT_THEME["colors"]["yellow"][6]),
    id="color-scheme-switch",
    persistence=True,
    color="grey",
)

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

app.layout = dmc.MantineProvider(
    dmc.Box([
        dmc.Group([
            dmc.Title("Dash AG Grid with theme switch"),
            theme_toggle
        ], pb="md"),
        make_grid(),
        dmc.Text("This grid is styled with className='ag-theme-alpine dmc-ag-grid' making it unnecessary to update the className in a callack to change themes", pt="md")

    ], m="lg"),
    theme={"primaryColor": "green"},
    id="mantine-provider"
)


clientside_callback(
    """ 
    (switchOn) => {
       document.documentElement.setAttribute('data-mantine-color-scheme', switchOn ? 'dark' : 'light');  
       return window.dash_clientside.no_update
    }
    """,
    Output("color-scheme-switch", "id"),
    Input("color-scheme-switch", "checked"),
)


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

dash-ag-grid-theme-switch

Dash AG Grid with Theme Switch
