How to use custom_css in ag-grid tables?

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

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.

Same here, did you guys manage to use custom_css?

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
)