AG Grid custom CSS

Dash Python
1

Hello,

I am studying the viability of migrating from datatable to ag grid.

With regards to theme customisation, rather than creating a theme from scratch, which seems to be working, I wanted to modify an existing theme.

For instance, I am working with ag-theme-balham.

My code:

dag.AgGrid(id='full-table', className='ag-theme-balham ag-theme-orange',

My ag-grid.css:

.ag-theme-orange {
  --ag-header-background-color: #ff8c00;
  --ag-header-foreground-color: white;
}

This works when I modify and save the css file. However, if I reload the app, it reverts back to the default style.

Any ideas?

Cheers,

Ed

2

Hello @edmoman,

You need to do both classes on the style sheet.


.ag-theme-balham.ag-theme-orange {
  --ag-header-background-color: #ff8c00;
  --ag-header-foreground-color: white;
}

The issue is due to how the style sheets are imported. The last get priority.

So, the custom style sheet loads first. Then the component loads the style sheets.

2 Likes
3

Brilliant! Thanks!