Dash AG Grid Conditional formatting comparing rows

Dash Python
1

I’m attempting to conditionally style an ag grid table, but i want to compare rows in a table vs columns:

1
11571×199 4.09 KB

In this example, can I make the cell numbers in category row C red if they are less than category row D?

E.g. 06/07/26 Category C = 2 and Category D = 3. I want to make the 2 red.

Thanks in advance!

2

Hi @zachmorris

Here is a tutorial with lots of conditional style examples. Note this is for dag v 31.0, so there will be some changes for the most recent version:

3

Thank you, i have reviewed that, which includes how to compare two columns for styling, rather then 2 rows.

4

You can access the current row index from params.node.rowIndex and then get the next row with params.api.getDisplayedRowAtIndex().

Here’s a complete example:

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


data = dict(
    [
        ("Date", ["2015-01-01", "2015-10-24", "2016-05-10", "2017-01-10", "2018-05-10", "2018-08-15"]),
        ("Region", ["Montreal", "Toronto", "New York City", "Miami", "San Francisco", "London"]),
        ("A", [1, -20, 3.512, 4, 10423, -441.2]),
        ("B", [10, 20, 30, 40, 50, 60]),
        ("C", [2, 10924, 3912, -10, 3591.2, 15]),
    ]
)
df = pd.DataFrame(data)


app = Dash(__name__)

app.layout = dag.AgGrid(
    rowData=df.to_dict('records'),
    columnDefs=[
        {"field": "Date"},
        {"field": "Region"},
        ] + [
        {
            "field": i,
            "cellClassRules":  {
                "less-than-next": "lessThanNextRow(params)"
            }
        } for i in ["A", "B", "C"]
    ],

    columnSize="sizeToFit",
)

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



"""
Put the following in a .css file in the /assets folder
------


.less-than-next {
    background-color: #3D9970;
}

"""


""""
Put the following in a the dashAgGridFunctions.js file in the /assets folder:
------

var dagfuncs = window.dashAgGridFunctions = window.dashAgGridFunctions || {};

dagfuncs.lessThanNextRow = (params) => {
    const currentIndex = params.node.rowIndex;
    const nextNode = params.api.getDisplayedRowAtIndex(currentIndex + 1);

    if (!nextNode) {
        return false;  // last row
    }

    return params.value < nextNode.data[params.colDef.field];
};

"""