How to use custom_css in ag-grid tables?

🧩 Streamlit Components streamlit-aggrid
1

Hello I am using ag-grid package to show my dataframe in Streamlit app

Can you please guide us, how we can add custom_css to the ag-grid tables ?
Ex - I want to change ‘blue’ color to the ‘red’ in ag-grid table, I tried the following code, but it didn’t
work.

gb = GridOptionsBuilder.from_dataframe(df)
grid_options = gb.build()
grid_return = AgGrid(df,
theme=‘blue’,
custom_css= {‘background-color’: ‘#ff0000’}
)

st.markdown(‘div.ag-header{background-color: #ff0000;}’, unsafe_allow_html=True)

Can you please suggest the correct way to change the existing theme color ?
Thank in advance

2 Likes
2

Hey, hello!
Did you manage to incorporate css to ag-grid? I am stuck with this… I can’t seem to find a solution to this.

3

Same here, did you guys manage to use custom_css?

4

custom_css = {
“.ag-root.ag-unselectable.ag-layout-normal”: {“font-size”: “13px !important”,
“font-family”: “Roboto, sans-serif !important;”},
“.ag-header-cell-text”: {“color”: “#495057 !important;”},
“.ag-theme-alpine .ag-ltr .ag-cell”: {“color”: “#444 !important;”},
“.ag-theme-alpine .ag-row-odd”: {“background”: “rgba(243, 247, 249, 0.3) !important;”,
“border”: “1px solid #eee !important;”},
“.ag-theme-alpine .ag-row-even”: {“border-bottom”: “1px solid #eee !important;”},
“.ag-theme-light button”: {“font-size”: “0 !important;”, “width”: “auto !important;”, “height”: “24px !important;”,
“border”: “1px solid #eee !important;”, “margin”: “4px 2px !important;”,
“background”: “#3162bd !important;”, “color”: “#fff !important;”,
“border-radius”: “3px !important;”},
“.ag-theme-light button:before”: {“content”: “‘Confirm’ !important”, “position”: “relative !important”,
“z-index”: “1000 !important”, “top”: “0 !important”,
“font-size”: “12px !important”, “left”: “0 !important”,
“padding”: “4px !important”},

}

ag_grid_d = AgGrid(
df_response,
height=150,
title=query,
gridOptions=options.build(),
theme=config.GRID_THEME,
update_mode=GridUpdateMode.MANUAL,
data_return_mode=DataReturnMode.AS_INPUT,
custom_css=custom_css,
allow_unsafe_jscode=True
)

1 Like
5

mrityunjay’s answer is correct I believe, but I couldn’t get it to work (perhaps because of styled quotes). If you want to try for yourself, here is a full script for generating an AgGrid table with custom CSS. This seems to work best when the theme parameter is not set:

import streamlit as st
import pandas as pd
import numpy as np
from st_aggrid import AgGrid
from st_aggrid import GridUpdateMode, JsCode
from st_aggrid.grid_options_builder import GridOptionsBuilder

#Define some data
cat_data = {'Cat': ['Fluffy', 'Whiskers', 'Simba', 'Nala', 'Oliver', 'Charlie', 'Max', 'Lucy', 'Mittens', 'Daisy'],
                'Frequency of Grooming': np.random.randint(low=1, high=7, size=10),
                'Duration of Grooming (minutes)': np.random.randint(low=5, high=30, size=10),
                'Method': ['Licking', 'Brushing', 'Licking', 'Brushing', 'Licking', 'Brushing', 'Licking', 'Brushing', 'Licking', 'Brushing']}
            cat_df = pd.DataFrame(cat_data)

#Define custom CSS
custom_css = {
    ".ag-row-hover": {"background-color": "red !important"},
    ".ag-header-cell-label": {"background-color": "orange !important"}
    }

#Build Table
gd = GridOptionsBuilder.from_dataframe(cat_df)
gridOptions = gd.build()

table = AgGrid(
    cat_df
    custom_css=custom_css,
    allow_unsafe_jscode=True
)
3 Likes
6

I think you will need to change the line from:
cat_df = pd.DataFrame(cat_data)
to
df = pd.DataFrame(cat_data)

Cheers

1 Like
7

Yeeep should have restarted my kernel :smiley: Edited!

8

I have the row-hover working but how do you get both row and column hover to work?
Streamlit AgGrid is great but the documentation is geared for JavaScript. It looks like I will need to learn how to blend the Javascript into the streamlit code.