Change column formatting in aggrid pivot

Custom Components streamlit-aggrid
1

Hey all,

Have been playing around with the brilliant aggrid pivot in Streamlit but had some questions.

Is it possible to change the background color of cells that belong to a column group?

It looks like I need to parse a JScode function into the grid but I’m unsure how this applies to a pivot (other examples seem to apply to simpler dfs).

from st_aggrid import AgGrid, GridOptionsBuilder, JsCode


jscode = JsCode("""
   function(params) {
       if (params.data === 'actual') {
           return {
               'color': 'black',
               'backgroundColor': 'red'
           }
       }
   };
   """)


gb = GridOptionsBuilder()
                
gb.configure_default_column(
resizable=True,
filterable=True,
sortable=True,
editable=False,
)
 
gb.configure_column(
field="value",
header_name="Value",
width=100,
type=["numericColumn","numberColumnFilter","customNumericFormat"], precision=0,
#valueFormatter="data.value.toLocaleString('en-US');",
aggFunc='sum'
)
gb.configure_column(
field="subType",
header_name="subType",
width=100,
tooltipField="SubType",
rowGroup=True,
hide=True
)
gb.configure_column(
field="variable",
header_name="variable",
width=100,
tooltipField="variable",
rowGroup=True,
)
gb.configure_column(
field="type",
header_name="dataType",
width=100,
pivot=True
)

gb.configure_column(
field="virtualMonth",
header_name="month",
valueGetter="new Date(data.gasDay).toLocaleDateString('en-US',options={year:'numeric', month:'2-digit'})",
pivot=True,
)

gb.configure_columns(['type'], cellStyle = jscode)    
gb.configure_grid_options(tooltipShowDelay=0, pivotMode=True, allow_unsafe_jscode=True, groupDefaultExpanded = -1, alwaysShowHorizontalScroll = True, enableRangeSelection=True, pagination=True, paginationPageSize=10000)    
g_opt = gb.build()

AgGrid(data, gridOptions=g_opt,  height = 800, allow_unsafe_jscode=True)

Grid looks like

image
image1093×234 48.4 KB

I would like to color all the columns that are in the actual column group in red, but not sure how to parse in the JS code to do so.

Also it is possible to make the column groups open on load (I have done this with the row groups with “groupDefaultExpanded”)

Would also be tidier to turn off the sum(Value) header if possible

thanks