Dash Ag-Grid - Applying Conditional Styling to the entire grid with partial value match

celal · November 28, 2023, 5:48am

Hi,

import dash_ag_grid as dag
from dash import Dash, html, dcc, Input, Output, callback
import dash_bootstrap_components as dbc
app = Dash(__name__,external_stylesheets=[dbc.themes.BOOTSTRAP])

rowData = [
    {"Stock": "STOCKA","monthly":'MR (0)',"monthlyR": '2W (78)',"twoWeeks": 'WR (112)',"twoWeeksR": '3DR (56)',"weekly": 'DR (56)',"weeklyR": 'DDSM (2W)',"days3": 'DDSM (W)',"days3R": 'DDSM (D)',"daily": 'DDSM (3D)',"dailyR": '',},
    {"Stock": "STOCKB","monthly":'M (100)', "monthlyR": '2WR (41)',"twoWeeks": 'WR (58)',"twoWeeksR": 'WR (O)',"weekly": 'DR (88)',"weeklyR": 'DDSM (2W)',"days3": '',"days3R": '',"daily": '',"dailyR": '',},
    {"Stock": "STOCKC","monthly":'2W (91)', "monthlyR": '3DR (54)',"twoWeeks": 'DR (101)',"twoWeeksR": 'DDSM (D)',"weekly": 'DDSM (3D)',"weeklyR": 'DDSM (W)',"days3": 'DDSM (2W)',"days3R": '',"daily": '',"dailyR": '',},
]
columnDefs = [
    {"field": "Stock","cellStyle":{'fontSize': '12px',"lineHeight": "unset",'padding-right':0,'padding-left':0},
    },
        {'field': 'monthly', "headerName": "M","cellStyle":{
        #"wordBreak": "normal", "lineHeight": "unset",'padding-right':0,'padding-left':0,
        "styleConditions": [
            {
                "condition": "params.data.monthly.includes('M (')",
                "style": {"backgroundColor": "rgb(255, 138, 101 )","color": 'rgb(30, 30, 30)','fontSize': '12px',"wordBreak": "normal", "lineHeight": "unset",'padding-right':0,'padding-left':0,},
            },
            {
                "condition": "params.data.monthly.includes('MR (')",
                "style": {"backgroundColor": "rgb(255, 171, 145)","color": 'rgb(30, 30, 30)','fontSize': '12px',"wordBreak": "normal", "lineHeight": "unset",'padding-right':0,'padding-left':0,},
            },
            {
                "condition": "params.data.monthly.includes('2WR (')",
                "style": {"backgroundColor": "rgb(255, 204, 128)","color": 'rgb(30, 30, 30)','fontSize': '12px',"wordBreak": "normal", "lineHeight": "unset",'padding-right':0,'padding-left':0,}
            },
            {
              "condition": "params.data.monthly.includes('W (')",
              "style": {"backgroundColor": "rgb(255, 213, 79)","color": 'rgb(30, 30, 30)','fontSize': '12px',"wordBreak": "normal", "lineHeight": "unset",'padding-right':0,'padding-left':0,},
            },
            {
                "condition": "params.data.monthly.includes('WR (')",
                "style": {"backgroundColor": "rgb(255, 224, 130)","color": 'rgb(30, 30, 30)','fontSize': '12px',"wordBreak": "normal", "lineHeight": "unset",'padding-right':0,'padding-left':0,},
            },
            {
                "condition": "params.data.monthly.includes('3D (')",
                "style": {"backgroundColor": "rgb(255, 241, 118)","color": 'rgb(30, 30, 30)','fontSize': '12px',"wordBreak": "normal", "lineHeight": "unset",'padding-right':0,'padding-left':0,},
            },
            {
                "condition": "params.data.monthly.includes('3DR (')",
                "style": {"backgroundColor": "rgb(255, 245, 157)","color": 'rgb(30, 30, 30)','fontSize': '12px',"wordBreak": "normal", "lineHeight": "unset",'padding-right':0,'padding-left':0,},
            },
            {
                "condition": "params.data.monthly.includes('D (')",
                "style": {"backgroundColor": "rgb(220, 231, 117)","color": 'rgb(30, 30, 30)','fontSize': '12px',"wordBreak": "normal", "lineHeight": "unset",'padding-right':0,'padding-left':0,},
            },
            {
                "condition": "params.data.monthly.includes('DR (')",
                "style": {"backgroundColor": "rgb(230, 238, 156)","color": 'rgb(30, 30, 30)','fontSize': '12px',"wordBreak": "normal", "lineHeight": "unset",'padding-right':0,'padding-left':0,},
            },
        ],
        "defaultStyle": {'fontSize': '12px',"wordBreak": "normal", "lineHeight": "unset",'padding-right':0,'padding-left':0},
    },"wrapText": True,
    },
    {'field': 'monthlyR', "headerName": "MR"},
    {'field': 'twoWeeks', "headerName": "2W"},
    {'field': 'twoWeeksR', "headerName": "2WR"},
    {'field': 'weekly', "headerName": "W"},
    {'field': 'weeklyR', "headerName": "WR"},
    {'field': 'days3', "headerName": "3D"},
    {'field': 'days3R', "headerName": "3DR"},
    {'field': 'daily', "headerName": "D"},
    {'field': 'dailyR', "headerName": "DR"},
]   
app.layout = html.Div(
    [
        dag.AgGrid(
            id="styling-cells-styles",
            rowData=rowData,
            columnDefs=columnDefs,
            defaultColDef={
            },
            dashGridOptions={
                "domLayout": "autoHeight",
                'headerHeight': 0,
            },
            columnSize="responsiveSizeToFit",
            columnSizeOptions={
            'defaultMinWidth': 20,
            'columnLimits': [{'key': 'Stock', 'minWidth': 45}],
            },
        ),
    ],
)
if __name__ == "__main__":
    app.run(debug=True)

I’m trying to apply cell formatting for each value under each column.
If the values are M,MR,2W,2WR,3D… etc. It’s easy to do so. However numbers between the brackets are dynamic. So I have to match some part or the beginning of the text to apply formatting.
I only applied conditional formatting to the ‘monthly’ field in above example.
However column headers are also dynamic. For instance if i apply formatting for the ‘daily’ column and if daily column doesn’t exist in the dataframe it causes JS error(which is normal).
So i tried to apply these conditions under defaultColDef,

                defaultColDef={
                 "cellStyle":{
                  "styleConditions": [
                                  {
                "condition": "params.data.M.includes('MR (')",
                "style": {"backgroundColor": "rgb(230, 238, 156)","color": 'rgb(30, 30, 30)','fontSize': '12px',"wordBreak": "normal", "lineHeight": "unset",'padding-right':0,'padding-left':0,},
            },
                  ],
                  "defaultStyle": {"display": "flex","align-items": "center",'padding-right':0,'padding-left':0,"wrapText": True,
                      "wordBreak": "normal",
                      "lineHeight": "unset",
                  },
                  },
                },

which applies formatting to the entire row.
I also tried to use other javascript methods under defaultColDef such as:

"['M ('].startsWith(params.value)"
and under cellClassRules.

What is the best way to apply conditional formatting to the entire grid?
and i also need to apply these options

"wordBreak": "normal", "lineHeight": "unset",'padding-right':0,'padding-left':0,

many thanks in advance.

jinnyzor · November 28, 2023, 4:00pm

Hello @celal,

Check this out:

import dash_ag_grid as dag
from dash import Dash, html, dcc, Input, Output, callback
import dash_bootstrap_components as dbc
app = Dash(__name__,external_stylesheets=[dbc.themes.BOOTSTRAP])

cellClassRule_List = ['M', 'MR', '2WR', 'W', 'WR', '3D', '3DR', 'D', 'DR']
cellClassRules = {x: f'params.value.substring(0, ("{x} (").length) === "{x} ("' for x in cellClassRule_List}

rowData = [
    {"Stock": "STOCKA","monthly":'MR (0)',"monthlyR": '2W (78)',"twoWeeks": 'WR (112)',"twoWeeksR": '3DR (56)',"weekly": 'DR (56)',"weeklyR": 'DDSM (2W)',"days3": 'DDSM (W)',"days3R": 'DDSM (D)',"daily": 'DDSM (3D)',"dailyR": '',},
    {"Stock": "STOCKB","monthly":'M (100)', "monthlyR": '2WR (41)',"twoWeeks": 'WR (58)',"twoWeeksR": 'WR (O)',"weekly": 'DR (88)',"weeklyR": 'DDSM (2W)',"days3": '',"days3R": '',"daily": '',"dailyR": '',},
    {"Stock": "STOCKC","monthly":'2W (91)', "monthlyR": '3DR (54)',"twoWeeks": 'DR (101)',"twoWeeksR": 'DDSM (D)',"weekly": 'DDSM (3D)',"weeklyR": 'DDSM (W)',"days3": 'DDSM (2W)',"days3R": '',"daily": '',"dailyR": '',},
]
columnDefs = [
    {"field": "Stock","cellStyle":{'fontSize': '12px',"lineHeight": "unset",'padding-right':0,'padding-left':0},
    },
        {'field': 'monthly', "headerName": "M"},
    {'field': 'monthlyR', "headerName": "MR"},
    {'field': 'twoWeeks', "headerName": "2W"},
    {'field': 'twoWeeksR', "headerName": "2WR"},
    {'field': 'weekly', "headerName": "W"},
    {'field': 'weeklyR', "headerName": "WR"},
    {'field': 'days3', "headerName": "3D"},
    {'field': 'days3R', "headerName": "3DR"},
    {'field': 'daily', "headerName": "D"},
    {'field': 'dailyR', "headerName": "DR"},
]
app.layout = html.Div(
    [
        dag.AgGrid(
            id="styling-cells-styles",
            rowData=rowData,
            columnDefs=columnDefs,
            defaultColDef={
                "cellClassRules": cellClassRules,
                "cellStyle": {"display": "flex","align-items": "center",'padding-right':0,'padding-left':0,"wrapText": True,
                      "wordBreak": "normal",
                      "lineHeight": "unset",
                  }
            },
            dashGridOptions={
                "domLayout": "autoHeight",
                'headerHeight': 0,
            },
            columnSize="responsiveSizeToFit",
            columnSizeOptions={
            'defaultMinWidth': 20,
            'columnLimits': [{'key': 'Stock', 'minWidth': 45}],
            },
        ),
    ],
)
if __name__ == "__main__":
    app.run(debug=True)

Now, to apply your styling, all you need is to add a style sheet mapped to your cell classes.

.M {
    color: red;
}

celal · November 29, 2023, 8:33am

Dear jinnyzor,
Thanks for the code.
This works like a charm. However I as mentioned in the question if the column doesn’t exist in the streaming dataframe this gives error.

Cannot read properties of undefined (reading ‘substring’)

the function drops empty columns while creating the dataframe as i don’t want empty columns in my grid.

dfx = dfx.dropna(axis=1, how='all')

jinnyzor · November 29, 2023, 11:37am

This code might need to change to this:

cellClassRules = {x: f'params.value ? params.value.substring(0, ("{x} (").length) === "{x} (" : false' for x in cellClassRule_List}

celal · November 29, 2023, 11:02pm

Excellent. I feel like i need to learn and use more and more javascript in order to create a unique grid that fulfills my requirements. are there any tutorials that focus on these subjects?

celal · November 29, 2023, 11:17pm

None of the options

fontSize': '12px',"wordBreak": "normal", "lineHeight": "unset",'padding-right':0,'padding-left':0,

seems to be working both under columnDefs and defaultColDef.

celal · November 30, 2023, 8:09am

My bad. I fixed the problem.
One last question.
How do i apply styling to numeric elements in css file?
For instance
.2W {
color: red;
}
NOT working.

celal · November 30, 2023, 8:14am

}
.\32 W {
    background-color: rgb(255, 213, 79)
}
.\32 WR {
    background-color: rgb(255, 224, 130)
}

Right answer/

jinnyzor · November 30, 2023, 11:34am

You can do that.
I think you can also do a query like this:

div[class=“32”]

Not entirely sure. But glad you got all of it working.

Topic		Replies	Views
Dash Ag Grid - formatting column based on numeric values Dash Python	3	628	September 8, 2023
Dash AG Grid change font color of headerName based on condition Dash Python	7	1133	May 28, 2024
Custom stylecondition in ag grid cell Dash Python question	5	368	May 26, 2023
Styling Dash AG Grid with a Bootstrap Theme Dash Python tips-and-tricks	0	1764	September 13, 2023
Compare values between columns and change color Dash Python	9	1104	September 1, 2023

Dash Ag-Grid - Applying Conditional Styling to the entire grid with partial value match

Related topics