Compare values between columns and change color

Dash Python
1

Hi,

is conditional formatting of cells possible in Dash AG Grid?

If yes, how do I compare values of two columns and turn an entire row green if true and red if not?

1 Like
2

Hi @subodhpokhrel7

There are many ways to style the grid. See the Layout and Styles section of the Dash AG Grid docs.

Here’s the section on styling rows:

Here’s an example of changing the colors of the rows based on the values of cells in the columns:


from dash import Dash, html
import dash_ag_grid as dag
import pandas as pd

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

getRowStyle = {
    "styleConditions": [
        {
            "condition": "params.data['2022'] > params.data['2021']",
            "style": {"backgroundColor": "green"},
        },
        {
            "condition": "params.data['2022'] <= params.data['2021']",
            "style": {"backgroundColor": "red"},
        },
    ]
}



app = Dash(__name__)


grid = dag.AgGrid(    
    rowData=df.to_dict("records"),
    columnDefs=[{ 'field': c } for c in df.columns],
    getRowStyle=getRowStyle,
    columnSize="sizeToFit"
)

app.layout = html.Div([grid])

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

Hello there.
If I want to change dynamically of comparative value, how is the best way to do?
For example:

getRowStyle = {
“styleConditions”: [
{
“condition”: "params.data[‘2022’] > X,
“style”: {“backgroundColor”: “green”},
},
{
“condition”: "params.data[‘2022’] < X,
“style”: {“backgroundColor”: “red”},
},
]
}

Where X every time change its value.
Is there any exemple?

Thanks

4

Hi @giovani.aricetti

Where is the value of X? Is it located in the grid, or a function of some data in the grid? Or is it external like from a different component in the app?

5

X value will came from different component, like a Dropdown for exemple.

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

2 Likes
8

Ual, this example is exactly what I wondered. I’ve tried to manipulate the style in callback, but didn’t work because I didn’t know this procedure to refresh the grid.
Thanks so much for explain me

9

Hi @giovani.aricetti

I think it should update the styles in a callback - I’ve make an issue on GitHub - thanks for reporting.

10

Hi @AnnMarieW , @giovani.aricetti

I tried this code and got an error: dash_ag_grid.getApiAsync is not a function. Does it your without problems in your devices?

11

Hello @subodhpokhrel7,

You need to be using dash-ag-grid 2.3.0.