Grid AG: styleConditions overriding textAlign?

Dash Python
1

Hi,

I wanted to have values in a given column aligned to right side and then apply conditional formatting that would change cell background based on its value. Simple case.

However, it looks like when styleConditions is present then textAlign for whole cellStyle is fully ignored.

Example here::
This works fine, i.e. all values are aligned to right. No conditional formatting.

{
    'field':'diff', 
    'headerName':'Difference', 
    'headerClass':'ag-right-aligned-header',
    "valueFormatter": {"function": "d3.format(',.1f')(params.value)"},
    "cellStyle":{
        'textAlign':'right',
    },
},

However, with such code I get nice background, but all values are aligned to left side (default setting):

{
    'field':'diff', 
    'headerName':'Difference', 
    'headerClass':'ag-right-aligned-header',
    "valueFormatter": {"function": "d3.format(',.1f')(params.value)"},
    "cellStyle":{
        'textAlign':'right', #this looks to be completely ignored
        "styleConditions": [
            {"condition": "params.value < -20", "style": {"backgroundColor": "tomato"}},
            {"condition": "params.value < -5", "style": {"backgroundColor": "gold"}},
            {"condition": "params.value > 20", "style": {"backgroundColor": "green"}},
            {"condition": "params.value > 5", "style": {"backgroundColor": "greenyellow"}},   
        ]
    },
},

One option is to put textAlign into each condition, but then I would have to guarantee that I capture all values in those conditions. Not very convenient option to use.

Any other solution?

2

Hello @Hikari,

Once you start throwing conditional formatting in there, it will return the style that is true.

Like I mentioned in your other post, you can use cellClassRules, this might be easier to tack on styling due to values.