PyCafe - Solara - Solara with AG Grid Example

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

import solara
import solara.lab
from ipyaggrid import Grid

@solara.component
def AgGrid(grid_data, grid_options, dark_mode, **kwargs):
    theme = 'ag-theme-balham' if not dark_mode else 'ag-theme-balham-dark'

    def update_data():
        widget = solara.get_widget(el)
        if widget is not None:
            widget.grid_options = grid_options
            widget.update_grid_data(grid_data)
            print(f'Set theme to {theme}')
            widget.theme = theme

    solara.Text(f'dark_mode = {dark_mode} {theme}')
    el = Grid.element(
        grid_data=grid_data,
        grid_options=grid_options,
        theme=theme,
        **kwargs,
    ).key(f"theme-{theme}")
    solara.use_effect(update_data, dependencies=[grid_data, grid_options, dark_mode])


@solara.component
def Page():
    data = solara.use_reactive([
        {"make": "Toyota", "model": "Celica", "price": 35000, "rowColor": True},
        {"make": "Ford", "model": "Mondeo", "price": 32000},
        {"make": "Porsche", "model": "Boxster", "price": 72000}
    ])

    dark_mode = solara.use_reactive(True)
    solara.Switch(label="Dark Mode", value=dark_mode)
    with solara.lab.Tabs(lazy=True):
        with solara.lab.Tab('One'):
            AgGrid(
                grid_data=data.value,
                grid_options={
                    "columnDefs": [
                        {"headerName": "Make", "field": "make", "sortable": True},
                        {"headerName": "Model", "field": "model"},
                        {"headerName": "Price", "field": "price"}
                    ],
                },
                dark_mode=dark_mode.value
            )
        with solara.lab.Tab('Two'):
            solara.Text(f'dark_mode = {dark_mode}')
Py.Cafe

solara-aggrid-dark-mode-toggle

Solara with AG Grid Example
