Changing header background color in an AgGrid table for specific columns

Using Streamlit
1

Hi everyone!

I’m trying to change the background color of a single, specific column header in my Ag-Grid table. I’m following the standard method of defining a custom CSS class and assigning it using the headerClass parameter in the GridOptionsBuilder.

However, the style is not being applied, and the header keeps its default theme color.

Code:

import streamlit as st
import pandas as pd
from st_aggrid import AgGrid, GridOptionsBuilder

st.set_page_config(layout="wide")
st.header("Styling a Specific Ag-Grid Header")

# Custom CSS class for the header
st.markdown("""
<style>
.custom-header-color {
    background-color: #8A2BE2 !important; /* BlueViolet */
    color: white !important;
}
</style>
""", unsafe_allow_html=True)

data = {
    'ticker_symbol': ['AAPL', 'MSFT'],
    'company_name': ['Apple Inc.', 'Microsoft Corp.'],
    'last_price': [175.20, 310.55]
}
df = pd.DataFrame(data)

gb = GridOptionsBuilder.from_dataframe(df)

gb.configure_column("ticker_symbol", headerName="Symbol")
gb.configure_column("company_name", headerName="Company")

gb.configure_column(
    "last_price",
    headerName="Price ($)",
    headerClass="custom-header-color" # Assigning the CSS class here
)

grid_options = gb.build()

AgGrid(
    df,
    gridOptions=grid_options,
    theme='streamlit'
)