Style cell conditional not working when Numerical formatting is applied on Colum

Dash Python
1

Hi community!

I have a hard time figuring out how to apply:
style_cell_conditional=[
{‘if’: {‘column_id’: ‘Iznos_prodaje’, ‘filter_query’: ‘{Iznos_prodaje} >= 1085000’},
‘background’:‘#3D9970’,
‘color’: ‘white’},
{‘if’: {‘column_id’: ‘Iznos_prodaje’, ‘filter_query’: ‘{Iznos_prodaje} < 1085000’},
‘background’:‘red’,
‘color’: ‘white’},
],

to work after I apply: .apply(lambda x: ‘${:,.2f}’.format(x)) on my “Iznos_prodaje” column.
My goal is to have formatting like this: $1,231,691.92 and still to be able to have style cell conditional applied.

I’ve tried all, and It seems that after column formatting, values become strings, but current conditional only works with columns where numbers are not formatted.

Please check my app to have better picture what i am talking about:

Any suggestion would be appreciated.

2

Hi @DataBora and welcome to the Dash community :slight_smile:

Check out this section of the docs for how to format numbers in the DataTable:
Formatting the numbers this way keeps the data numeric - so then the conditional formatting will still work.

And for something completely different - you can see how this is done using the new Dash AG Grid component :slightly_smiling_face:

1 Like
3

Tank you for your reply. I’ve tried Format Template Group, Render, and still is the same. Formatting gets applied but conditionals don’t. Will see about the option with AgGrid.

4

Based on Ann’s suggestion about Dash AgGrid, I think you can do something as below:

import dash_ag_grid as dag
from dash import Dash, html, dcc

app = Dash(__name__)

rowData = [
    dict(account='A', balance=522.31),
    dict(account='B', balance=1607.9),
    dict(account='C', balance=-228.41),
]

columnDefs = [
    {"field": "account"},
    {"field": "balance",
     "valueFormatter": {"function": "d3.format('($,.2f')(params.value)"}},
]

defaultColDef = {
    "type": ["rightAligned"],
    "resizable": True,
    "editable": True,
}

app.layout = html.Div([
    dag.AgGrid(
        columnDefs=columnDefs,
        rowData=rowData,
        columnSize="sizeToFit",
        defaultColDef=dict(
            resizable=True,
            cellStyle={
                "styleConditions": [
                    {"condition": "params.value < 100", "style": {"backgroundColor": "red"}},
                    {"condition": "params.value > 100", "style": {"backgroundColor": "green"}}
                ]
            },
        ),
        dashGridOptions={"singleClickEdit": True}
    )
],style={"margin": 20})

if __name__ == "__main__":
    app.run_server(debug=False)

Screenshot 2023-04-25 163046
Screenshot 2023-04-25 1630461875×526 4.77 KB

2 Likes
5

Thank you for you reply! This seems like it will work. I am not so familiar with AgGrid, but I will give it a go now.

1 Like
6

It worked!
Here is the code applied:

    {"field": "Datum"},
    {"field": "Iznos_prodaje",
     "valueFormatter": {"function": "d3.format('($,.2f')(params.value)"}},
]

app = Dash(__name__)

app.layout = html.Div([
    dag.AgGrid(
        columnDefs=columnDefs,
        rowData=daily_revenue.to_dict("records"),
        # columnSize="sizeToFit",
        defaultColDef=dict(
            resizable=True,
            cellStyle={
                "styleConditions": [
                    {"condition": "params.value < 1085000", "style": {"backgroundColor": "red"}},
                    {"condition": "params.value >= 1085000", "style": {"backgroundColor": "green"}}
                ]
            },
        ),
        dashGridOptions={"singleClickEdit": True}
    )
],style={"margin": 20})

if __name__ == "__main__":
    app.run_server(debug=False)```

formating
formating561×575 44.9 KB

So, I guess I am switching to AgGrid from now on :slight_smile:

3 Likes