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.
Thanks
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”,
filter=‘agNumberColumnFilter’
)
gb.configure_grid_options(groupDisplayType=‘multipleColumn’, suppressAggFuncInHeader=True)
gb.configure_pagination()
gb.configure_side_bar()
#gb.configure_default_column(enablePivot=True, groupable=True, value=True, enableRowGroup=True, aggFunc=“sum”, editable=False)
gridOptions = gb.build()
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(
...
custom_css=custom_css,
)
@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
Cheers
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’].
Thoughts?
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 (params.data.B == 'yes' | params.data.B == 'cow' | params.data.B == 'can') {
return {
'color': 'white',
'backgroundColor': 'red',
'border': 'outset',
'color': 'white',
'font-size': 'larger',
'font-weight': 'bold'
}
}
};
""")
1 Like
@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 = e.target.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 = gridOptions.build()
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,
update_mode=GridUpdateMode.SELECTION_CHANGED)
Cheers
@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 = gridOptions.build()
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:
+1
there you go team
ob.configure_column(‘execTime’, floatingFilter= True, filter = ‘agDateColumnFilter’)
2 Likes
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