Skip to content

conditional styling is not being applied in dash-ag-grid v31.3.0 #347

@e-wallace

Description

@e-wallace

Image

expected behaviour:
Image

sample code:

import dash_ag_grid as dag
from dash import Dash, html
import dash_bootstrap_components as dbc
import pandas as pd
import os


app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])
server = app.server

df = pd.read_csv(
    "https://raw.githubusercontent.com/plotly/datasets/master/ag-grid/olympic-winners.csv"
)

columnDefs = [
    # Row group by country and by year is enabled.
    {
        "field": "country",
        "rowGroup": True,
        "hide": True,
        "suppressColumnsToolPanel": True,
    },
    {
        "field": "sport",
        "rowGroup": True,
        "hide": True,
        "suppressColumnsToolPanel": True,
    },
    {
        "field": "year",
        "pivot": True,
        "hide": True,
        "suppressColumnsToolPanel": True,
    },
    {
        "field": "gold",
        "filter": True,
        "aggFunc": "sum",
        "valueFormatter": {"function": "d3.format('(,.2f')(params.value)"},
        "cellStyle": {

                "styleConditions": [

                    {
                        "condition": f"params.value < 100",
                        "style": {"backgroundColor": "lightgreen"},
                    },

                ],
                "defaultStyle": {"backgroundColor": "yellow"},
            },

        },
    {"field": "silver", "filter": True, "aggFunc": "sum"},
]

app.layout = html.Div(
    [
        dag.AgGrid(
            id="enterprise-aggregation-example",
            columnDefs=columnDefs,
            rowData=df.to_dict("records"),
            defaultColDef=dict(
                rowSelection="multiple",
                suppressAggFuncInHeader=True,
            ),
            dashGridOptions={"animateRows": False},
            enableEnterpriseModules=True,
            getRowStyle={
                "styleConditions": [
                    {
                        "condition": "params.node.aggData ? params.node.aggData.gold < 3 : false",
                        "style": {"backgroundColor": "silver"},
                    }
                ]
            },
        ),
    ]
)


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

Metadata

Metadata

Assignees

No one assigned

    Labels

    P2considered for next cyclebugsomething brokencscustomer success

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions