AgGrid: Headers Styling (Background color and Font color)

Dash Python
1

Hello Everyone,

I am new to the DASH and Python world but trying hard here.

I am trying to replace my DataTables from my DASH app with AgGrid, but I came across this problem of styling the headers that seems to be much harder in AgGrid.

I was following some posts and DASH,plotly documentation:
( Styling Headers | Dash for Python Documentation | Plotly)
but I couldn’t get to a successful outcome.

This is what I tried:

I used this simple code to create (from Plotly link above) an AgGrid with the CSS file I used named styles.css. I get the Ag.Grid, but I dont get any of the styling in the CSS file.
Is there any extra step that is not mentioned anywhere because it might be “obvious” for some experienced developers?


import dash_ag_grid as dag
from dash import Dash, html
import pandas as pd

app = Dash(__name__)

df = pd.read_csv(
    "https://raw.githubusercontent.com/plotly/datasets/master/ag-grid/olympic-winners.csv"
)

columnDefs = [
    {
        "headerName": "Group 1",
        "children": [
            {"field": "athlete", "resizable": True},
            {"field": "age", "resizable": True},
        ],
    },
    {
        "headerName": "Group 2",
        "children": [
            {"field": "country"},
            {"field": "date"},
            {"field": "sport"},
            {"field": "total"},
        ],
    },
]

app.layout = html.Div(
    [
        dag.AgGrid(
            id="styling-headers",
            rowData=df.to_dict("records"),
            columnDefs=columnDefs,
            defaultColDef={"sortable": True, "filter": True, "editable": True},
            columnSize="sizeToFit",
            className="ag-theme-alpine headers1",
        ),
    ]
)

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

-------------------------------------------------------------------------------------------------------------------------------

.ag-theme-alpine {
    --ag-header-height: 30px;
    --ag-header-foreground-color: white;
    --ag-header-background-color: black;
    --ag-header-cell-hover-background-color: rgb(80, 40, 140);
    --ag-header-cell-moving-background-color: rgb(80, 40, 140);
}

.ag-theme-alpine .ag-header {
    font-family: cursive;
}

.ag-theme-alpine .ag-header-group-cell {
    font-weight: normal;
    font-size: 22px;
}

.ag-theme-alpine .ag-header-cell {
    font-size: 18px;
}
2

Hello @moyaverdugo,

Try adding your className also to the style sheet.

Like this:

.ag-theme-alpine.headers1

I think this is an issue with how the browser decides to honor the stylesheets.

3

I changed it but still nothing happens.
I might have to accept my defeat with AgGrids.

4

Try it like this:


ag-theme-alpine.headers1 {
    --ag-header-height: 30px;
    --ag-header-foreground-color: white;
    --ag-header-background-color: black;
    --ag-header-cell-hover-background-color: rgb(80, 40, 140);
    --ag-header-cell-moving-background-color: rgb(80, 40, 140);
}

.ag-theme-alpine.headers1 .ag-header {
    font-family: cursive;
}

.ag-theme-alpine.headers1 .ag-header-group-cell {
    font-weight: normal;
    font-size: 22px;
}

.ag-theme-alpine.headers1 .ag-header-cell {
    font-size: 18px;
}

Make sure your refresh the browser window, not just the hot reload.

5

I am running it in my Jupyter Notebook, so I see it as a window just under my code.
I don’t know if that might be the problem and I should use a different environment.

I re-run it with the new code for the css file that you provided. But, I still dont see any change.
Should I save or name the file with any special name or location?
Currently the file is in the same folder than the App.ipynb file.

6

I think it needs to be in an assets folder where the assets folder is at the same level as the app.

7

I found the solution!

First of all, thanks jinnyzor for your last hint.
That asset folder was the first clue into finding my way to the answer.

Ok, clearly I was doing some very wrong steps in here. So, let me explain step by step for the new developers that might be as lost as I was some hours ago.

  1. I was working on Jupyter Notebook and have saved my file with the ipynb extension. But, you should really save it with the py extension instead. This was my first error.

  2. You have to create the ‘assets’ folder within the same folder (that was what it means to be in the same “level”, create the new folder inside the same folder than the py file) than your py file.

  3. within the assets folder, create a CSS file by using any text editor with “anyname” you want and write your specifications inside. (all the files within the assets folder will be called automatically in alphanumeric order, so be mindful of this if you create several styling files)

  4. the specifications you will have to make reference of the className you will use to call that specific styling. more information here in this link: Styling Headers | Dash for Python Documentation | Plotly

  5. this link also helps with additional context: Adding CSS & JS and Overriding the Page-Load Template | Dash for Python Documentation | Plotly

  6. For any other help, you can just contact me and I will help you. I already suffer enough trying to figure out this.

Cheers everyone, happy holidays!

2 Likes