Solara•6mo ago

ipyaggrid styling

Hi everyone, I have tried to override Balham dark theme specifically for ipyaggrid component I’m using. For example highlight a row, say, green, if a column value == to a specific value. Also more general styling overrides. I have tried using a css string variable and setting this to style param when implementing the grid. But not much luck at all. Thank you!

5 Replies

mariobuikhuizen•5mo ago

import solara
from ipyaggrid import Grid

@solara.component 
def Page():
    Grid.element(
        css_rules="""
            .ag-cell-not-inline-editing.price-high {
                background-color: red;
                color: white;
            }
            .ag-cell-not-inline-editing {
                background-color: lightgreen
            }
        """,
        grid_data=[
            {"make": "Toyota", "model": "Celica", "price": 35000},
            {"make": "Ford", "model": "Mondeo", "price": 32000},
            {"make": "Porsche", "model": "Boxster", "price": 72000}
        ],
        grid_options={
            "defaultColDef": {
                "cellClass": """function(params) {
                    return params.value >32000 ? "price-high" : "";
                }""",
            },
            "columnDefs": [
                {"headerName": "Make", "field": "make"},
                {"headerName": "Model", "field": "model"},
                {"headerName": "Price", "field": "price", "editable": True}
            ],
        },
    )
    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 Page():
    Grid.element(
        css_rules="""
            .ag-cell-not-inline-editing.price-high {
                background-color: red;
                color: white;
            }
            .ag-cell-not-inline-editing {
                background-color: lightgreen
            }
        """,
        grid_data=[
            {"make": "Toyota", "model": "Celica", "price": 35000},
            {"make": "Ford", "model": "Mondeo", "price": 32000},
            {"make": "Porsche", "model": "Boxster", "price": 72000}
        ],
        grid_options={
            "defaultColDef": {
                "cellClass": """function(params) {
                    return params.value >32000 ? "price-high" : "";
                }""",
            },
            "columnDefs": [
                {"headerName": "Make", "field": "make"},
                {"headerName": "Model", "field": "model"},
                {"headerName": "Price", "field": "price", "editable": True}
            ],
        },
    )
    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>')

Run and edit this code snippet at PyCafe

PyCafe - Solara - Solara-based AG Grid Viewer

Run, Edit and Share Python Apps in Your Browser with 1 click!

ChainedflowsOP•5mo ago

Thank you! Though I can’t figure out how to style a whole row based on a column value. And what you put above seems fragile; when clicking a component on the page I get and error on click. When refresh page resolves Thank you very much again To be clear I mean in data[“Column Name”] == “Value ? Green : leave as is, etc.

mariobuikhuizen•5mo ago

Some thing like this?: (I can't reproduce the errors when clicking on a component)

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

mariobuikhuizen•5mo ago

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

Run and edit this code snippet at PyCafe

PyCafe - Solara - AG Grid Viewer with row color

Run, Edit and Share Python Apps in Your Browser with 1 click!

ChainedflowsOP•5mo ago

Ha wow your solution better than mine 🚀 Thank you again! Have you used Pandasai with solara?

Gaming

Programming

ipyaggrid styling