CSS Style Dash AG Grid Table Columns

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",
     "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"),
            className="ag-theme-alpine color-fonts ",
            dashGridOptions={"rowSelection": "single"},
            defaultColDef={"sortable": True},
    style={"margin": 20},

if __name__ == "__main__":

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!

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.


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

Best Regards

1 Like