CSS Style Dash AG Grid Table Columns

Dash Python
,
1

Hello, I would like to know how I can achieve column wise styling in CSS. I know it is possible by using the “cellStyle” property in Dash, but I dont know how it is possible using my CSS stylesheet. I can only format all Cells by using .ag-cell in my stylesheet. I would like to format only specific columns in my CSS stylesheet. Can anbody explain that to me? I have an example provided:

"""
Colors and fonts
"""
import dash

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


app = Dash(__name__)

columnDefs = [
    {"field": "make"},
    {"field": "model"},
    {"field": "price",
     'cellStyle':{
     "display": "flex",
      "vertical-align": "middle",
      "align-items": "center"}},
]


rowData = [
    {"make": "Toyota", "model": "Celica", "price": 35000},
    {"make": "Ford", "model": "Mondeo", "price": 32000},
    {"make": "Porsche", "model": "Boxster", "price": 72000},
    {"make": "BMW", "model": "M50", "price": 60000},
    {"make": "Aston Martin", "model": "DBX", "price": 190000},
]


app.layout = html.Div(
    [
        dcc.Markdown("Styling fonts and colors"),
        dag.AgGrid(
            className="ag-theme-alpine color-fonts ",
            columnDefs=columnDefs,
            rowData=rowData,
            columnSize="sizeToFit",
            dashGridOptions={"rowSelection": "single"},
            defaultColDef={"sortable": True},
        ),
    ],
    style={"margin": 20},
)

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

"""
Add the following to a .css file in /assets


.ag-theme-alpine.color-fonts {
    --ag-foreground-color: rgb(126, 46, 132);
    --ag-background-color: rgb(249, 245, 227);
    --ag-header-foreground-color: rgb(204, 245, 172);
    --ag-header-background-color: rgb(209, 64, 129);
    --ag-odd-row-background-color: rgb(0, 0, 0, 0.03);
    --ag-header-column-resize-handle-color: rgb(126, 46, 132);

    --ag-font-size: 17px;
    --ag-font-family: monospace;
}


"""

How could I add the cell style of the column “price” to my CSS Stylesheet? Thank you!

2

Hello @cosco,

There isn’t a really easy way to do this from the style sheet.

You could possibly assign the column you want to style that way a class. And then your style sheet would reference the class and apply the styling.

You can assign a class using cellClass in the columnDefs.

If you want flexibility, you could use cellClassRules on the defaultColDef and write a list of columns that you want the class to be applied to.

2 Likes
3

Hey jinnyzor, thank you for the solution. That sounds pretty logic to me :slight_smile:
Keep it up !

Best Regards
Clemens

1 Like