Dash ag-grid valueFormatter

Dash Python
1

Looking for a way for ag-grid to style a due_date cell that will turn red if it has pass due and it’s status is not in a list of status variables (property class values)

tried to use valueFormatter, cellRenderer - I have no Java knowledge.

2

Hi @stef007

Try using Cell Style

This example uses an “overdue” column to style the “amount” column. Just update the “overdue” column based on your criteria. Note that it doesn’t need to be displayed in the grid, it just needs to be included in the rowData.

image
image1090×470 21.4 KB

from dash import Dash, html
import dash_ag_grid as dag

rowData = [
    {"Customer": "Acme",  "Amount": 100, "due_date": "2024-1-15", "Overdue": True},
    {"Customer": "Olive", "Amount": 130, "due_date": "2024-1-15", "Overdue": True},
    {"Customer": "Barnwood", "Amount": 30, "due_date": "2024-2-15", "Overdue": False},
    {"Customer": "Henrietta", "Amount": 500, "due_date": "2024-2-15", "Overdue": False},
]


cellStyle = {
    "styleConditions": [
        {
            "condition": "params.data.Overdue",
            "style": {"backgroundColor": "tomato"},
        },
    ]
}


columnDefs = [
    {"field": "Customer"},
    {"field": "Amount", "cellStyle": cellStyle},
    {"field": "due_date"}
]



app = Dash(__name__)

grid = dag.AgGrid(
    rowData=rowData,
    columnDefs=columnDefs,
)

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

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