@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}
    ])

    first_row_color = solara.lab.Ref(data.fields[0]["rowColor"])

    AgGrid(
        css_rules="""
            div.ag-cell.my-green {
                background-color: lightgreen;
            }
        """,
        grid_data=data.value,
        grid_options={
            "defaultColDef": {
                "cellClass": """function(params) {
                    return params.data.rowColor ? "my-green" : "";
                }""",
            },
            "columnDefs": [
                {"headerName": "Make", "field": "make"},
                {"headerName": "Model", "field": "model"},
                {"headerName": "Price", "field": "price"}
            ],
        },
    )
    
    def toggle():
        first_row_color.value = not first_row_color.value 

    solara.Button("toggle row color", icon_name="mdi-plus", color="primary", on_click=toggle)

    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>')
    

@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}
    ])

    first_row_color = solara.lab.Ref(data.fields[0]["rowColor"])

    AgGrid(
        css_rules="""
            div.ag-cell.my-green {
                background-color: lightgreen;
            }
        """,
        grid_data=data.value,
        grid_options={
            "defaultColDef": {
                "cellClass": """function(params) {
                    return params.data.rowColor ? "my-green" : "";
                }""",
            },
            "columnDefs": [
                {"headerName": "Make", "field": "make"},
                {"headerName": "Model", "field": "model"},
                {"headerName": "Price", "field": "price"}
            ],
        },
    )
    
    def toggle():
        first_row_color.value = not first_row_color.value 

    solara.Button("toggle row color", icon_name="mdi-plus", color="primary", on_click=toggle)

    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>')
    

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])

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])