Compare values between columns and change color

Dash Python
6

Hi @giovani.aricetti

In that case, the getRowStyle needs to be updated in a callback. One snag (bug?) is that the new style is not applied unless the grid is refreshed. One way to refresh the grid is to reload the data, but that’s not very efficient. This example uses the redrawRows method in a clientside callback to apply the new styles when they change.

Here is a small example:

from dash import Dash, html, dcc, callback, Input, Output, clientside_callback
import dash_ag_grid as dag
import pandas as pd

rowData = [
    {"Firm": "Acme", "2022": 4},
    {"Firm": "Olive", "2022": 3},
    {"Firm": "Barnwood", "2022": 6},
    {"Firm": "Henrietta", "2022": -6},
]
df = pd.DataFrame(rowData)


app = Dash(__name__)

dropdown = dcc.Dropdown([1, 2, 3, 4, 15], id="dropdown", value=3)
grid = dag.AgGrid(
    id="grid",
    rowData=df.to_dict("records"),
    columnDefs=[{"field": c} for c in df.columns],
    defaultColDef={"filter": True},
    columnSize="sizeToFit",
)

app.layout = html.Div(["Highlight values greater than:", dropdown, grid])


@callback(Output("grid", "getRowStyle"), Input("dropdown", "value"))
def update_style(X):
    return {
        "styleConditions": [
            {
                "condition": f"params.data['2022'] > {X}",
                "style": {"backgroundColor": "green"},
            },
        ]
    }

# refresh the grid  to apply the  getRowStyle when it changes
clientside_callback(
    """async function () {
        var api = await dash_ag_grid.getApiAsync("grid")
        api.redrawRows();        
        return dash_clientside.no_update
    }""",
    Output("grid", "id"),
    Input("grid", "getRowStyle"),
    prevent_initial_call=True,
)

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

dag-docs