Ag-Grid component with input support

Thanks for this component @PablocFonseca I am using it here App for searching the arxiv & it checks for valid Github links! - #14 by robmarkcole

When grouping and aggregating, i lose the formatting of the aggregated amount. Any assistance is appreciated.


Here is a snapshot of my code:
gb = GridOptionsBuilder()
gb.configure_column(“date”, type=[“dateColumnFilter”,“customDateTimeFormat”],
custom_format_string=‘MM-yyyy’, rowGroup=True, hide=True, sort=‘desc’)
gb.configure_column(“amount”, type=[“numericColumn”,“numberColumnFilter”,“customNumericFormat”],
valueFormatter=“data.AuctionAmt.toLocaleString(‘en-US’);”, precision=0, pivot=True, aggFunc=“sum”,

gb.configure_grid_options(groupDisplayType=‘multipleColumn’, suppressAggFuncInHeader=True)

#gb.configure_default_column(enablePivot=True, groupable=True, value=True, enableRowGroup=True, aggFunc=“sum”, editable=False)
gridOptions =

AgGrid(data[[‘date’, ‘amount’]],
gridOptions=gridOptions, enable_enterprise_modules=True, allow_unsafe_jscode=True)

this is what I want, thank you!

1 Like

Use the CustomCSS feature to set the attributes of the classes of the header cell, then you can both change the background color and the centering of text.

custom_css = {
    ".ag-header-cell-label": {"justify-content": "center"},
    ".ag-header-group-cell-label": {"justify-content": "center"}

grid_response = AgGrid(

@Shawn_Pereira : The column grouping example is exactly what I was looking for. However, I’m trying to add a checkbox (boolean) column in as a child column, but I can’t seem to get it to work using a custom cell renderer through JsCode. The gb[‘columnDefs’] workaround to get the column groups doesn’t seem to be accepting a custom cell renderer in the same way as gb.configure_column does (or any custom event handler, like onCellClicked, using jscode for that matter)

Any suggestions?

Hi @Bradley_Feldman, I think checkbox columns have already been implemented; refer Table (or grid) with multiple inputs - #2 by ferdy


1 Like

@Shawn_Pereira: Yes, I’m trying to use Ferdy’s code. But how do you use it with gb[‘columnDefs’] within grouped parent/child columns, as opposed to using it with gb.configure_columns()? I can easily get it working with gb.configure_columns, but can’t get any Jscode event handlers to work with gb[‘columnDefs’].


Hello, thanks for the great tool.

I’m getting this error when trying to run it, any ideas on how to solve it ?

On the subject of column and row grouping, does anyone know how to open Ag-Grid in Streamlit in Pivot mode and set the row, columns, and values? Is there a GridOptionsBuilder property for this?

Experimented some more and found that this can be set with:

gb = GridOptionsBuilder.from_dataframe(df)
gb.configure_grid_options(pivotMode= True)

And then use gb.configure column to set up the pivot fields.

1 Like

Hi, did you get a solution for this?
I solve it like this:
cellsytle_jscode = JsCode(“”"

        function(params) {
            if ( == 'yes' | == 'cow' | == 'can') {
                return {
                    'color': 'white',
                    'backgroundColor': 'red',
                    'border': 'outset',
                    'color': 'white',
                    'font-size': 'larger',
                    'font-weight': 'bold'
1 Like

Hi @Bradley_Feldman, is this what you are looking for? Grouping + checkbox with aggrid?



@Shawn_Pereira: That’s awesome, but my request was much simpler! I was asking about being able to define “grouped” column headers and then be able to define a custom cell renderer (in this case, a checkbox column) within one of the child columns.

I’m displaying them now using the checkboxSelection:True column property, but that only works for a visual POC. I need to be able to add an event handler (such as Ferdy’s code) to them. It just seems like when defining grouped columns via gb[‘columnDefs’], I can’t add an injection of javascript through JsCode – my attempts are producing errors in the browser console.

Do you know of a method/workaround ?

can you please give an example on how you pre populated teh pivot table of your choice with row + column grouping as well as value aggfuncs of your choice?

Hi @Bradley_Feldman, I didn’t manage to find a solution to what you want to do - maybe, someone else might in future. However, you could see if this alternative works for you. The checkbox code is courtesy @ferdy (My aggrid version is 0.3.3)

import pandas as pd
import streamlit as st
from st_aggrid import JsCode, AgGrid, GridOptionsBuilder
from st_aggrid.shared import GridUpdateMode, AgGridTheme

checkbox_renderer = JsCode("""
class CheckboxRenderer{

    init(params) {
        this.params = params;

        this.eGui = document.createElement('input');
        this.eGui.type = 'checkbox';
        this.eGui.checked = params.value;

        this.checkedHandler = this.checkedHandler.bind(this);
        this.eGui.addEventListener('click', this.checkedHandler);

    checkedHandler(e) {
        let checked =;
        let colId = this.params.column.colId;
        this.params.node.setDataValue(colId, checked);

    getGui(params) {
        return this.eGui;

    destroy(params) {
    this.eGui.removeEventListener('click', this.checkedHandler);
}//end class

df=pd.DataFrame({ "Name": ['Paul', 'Gina'], "Age": [43, 35], "Inducted": [True, False], 
                  "Firm": ['Google', 'Microsoft'], "JDesc": ['Analyst', 'Programmer']})
gridOptions = GridOptionsBuilder.from_dataframe(df)
gridOptions.configure_column('Inducted', editable=True, cellRenderer=checkbox_renderer)
gb =

mycntnr = st.container()
with mycntnr:
    htmlstr = f"<p style='background-color: #A7727D; color: #F9F5E7; font-size: 16px; border-radius: 7px; padding-left: 8px; text-align: center'>TI</style></p>"
    st.markdown(htmlstr, unsafe_allow_html=True)

    dta = AgGrid(df, gridOptions=gb, height=150, allow_unsafe_jscode=True, theme=AgGridTheme.ALPINE,


@Shawn_Pereira : Thanks for providing this. I am already aware of doing it this way. As you acknowledge, you, like I, weren’t able to make it work for grouped columns.

The key source line is this:

gridOptions.configure_column(‘Inducted’, editable=True, cellRenderer=checkbox_renderer)
gb =

Whereas the “cellRenderer” can be declared and works with configure_columns, but does not work with the grouped column declaration shown below:

gb[‘columnDefs’] = [
{‘headerName’: ‘NJ’, ‘headerClass’: ‘blue-header’, ‘children’: [
{‘field’: ‘NJ_MP’, ‘headerName’: ‘MP Price’},
{‘field’: ‘NJ_OT’, ‘headerName’: ‘OT Price’},
{‘field’: ‘NJ_ST’, ‘headerName’: ‘Static Price’},
{‘field’: ‘NJ_DL’, ‘headerName’: ‘Delta’},
{‘field’: ‘NJ_SV’, ‘headerName’: ‘Below the Line Savings’},
{‘field’: ‘NJ_XY’, ‘headerName’: ‘Choose Savings’, ‘cellRenderer’: ‘checkbox_renderer’}

Perhaps @PablocFonseca can add a “configure_group_columns” feature that would allow use to do javascript injection (via Jscode) like it does with “configure_columns”?

I’m very interested in this. I have added checkboxes to a column (not the first column!) with the cellRenderer method above, but I would like a way of selecting all of these checkboxes at once:


there you go team

ob.configure_column(‘execTime’, floatingFilter= True, filter = ‘agDateColumnFilter’)



looking to pin grouped row per:

effecteviely trying to set

    autoGroupColumnDef: {
        headerName: 'Consoles',//custom header name for group
        pinned: 'left',//force pinned left. Does not work in columnDef
        cellRendererParams: {
            suppressCount: true,//remove number in Group Column

Is that even possible? thanks