PyCafe - Solara - AG Grid Viewer with row color

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
import solara
from ipyaggrid import Grid

@solara.component
def AgGrid(grid_data, grid_options, **kwargs):
    
    def update_data():
        widget = solara.get_widget(el)
        widget.grid_options = grid_options
        widget.update_grid_data(grid_data)

    el = Grid.element(
        grid_data=grid_data,
        grid_options=grid_options,
        **kwargs,
    )

    solara.use_effect(update_data, [grid_data, grid_options])

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

    ford_price = solara.lab.Ref(data.fields[1]["price"])

    AgGrid(
        css_rules="""
            .ag-cell-not-inline-editing.price-high {
                background-color: red;
                color: white;
            }
            .ag-cell-not-inline-editing {
                background-color: lightgreen
            }
        """,
        grid_data=data.value,
        grid_options={
            "defaultColDef": {
                "cellClass": """function(params) {
                    return params.data.price >32000 ? "price-high" : "";
                }""",
            },
            "columnDefs": [
                {"headerName": "Make", "field": "make"},
                {"headerName": "Model", "field": "model"},
                {"headerName": "Price", "field": "price"}
            ],
        },
    )
    
    def inc_ford():
        ford_price.value += 4000

    def dec_ford():
        ford_price.value -= 4000
        

    solara.Button("increase Ford price", icon_name="mdi-plus", color="primary", on_click=inc_ford)
    solara.Button("decrease Ford price", icon_name="mdi-minus", color="primary", on_click=dec_ford)

    solara.Text("We can use JavaScript code in the grid_options, see aggrid docs on how to use it:")
    link = "https://www.ag-grid.com/archive/28.1.1/javascript-data-grid/cell-styles/#cell-class"
    solara.HTML(tag="div", unsafe_innerHTML=f'<a href="{link}">{link}</a>')
    
Py.Cafe

solara-ag-grid-viewer-row-color

AG Grid Viewer with row color
