Py.Cafe

dash.mantine.components/

dash-ag-grid-theme-toggle

Dash AG Grid with Theme Toggle and conditional formatting

DocsPricing
  • 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
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"
    )

    athlete_cellStyle = {
        'backgroundColor': 'light-dark(var(--mantine-color-gray-1), var(--mantine-color-gray-7)',
        'fontWeight' : 700
    }

    total_cellStyle = {
        "styleConditions": [
            {
                "condition": "params.value >= 6",
                "style": {"backgroundColor": "var(--mantine-color-yellow-filled)"},
            },
        ]
    }

    columnDefs = [
        {"field": "athlete",  'cellStyle': athlete_cellStyle},
        {"field": "sport" },
        {"field": "year" },
        {"field": "total", 'cellStyle': total_cellStyle},
    ]

    return  dag.AgGrid(
        id="grid",
        columnDefs=columnDefs,
        rowData=df.to_dict("records"),
        columnSize="sizeToFit",
        dashGridOptions={"animateRows": False},
    )


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()
    ], m="lg")
)


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"),
)


@callback(
    Output("grid", "className"),
    Input("color-scheme-switch", "checked"),
)
def update_grid_theme(switch_on):
    if switch_on:
        return "ag-theme-alpine-dark"
    return "ag-theme-alpine"


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