Hi All,
I am trying to implement the examples from the javascript AG Grid docs for customizing grandTotalRows. grandTotalRows works fine and innerRenderer but the customizations of “footerValueGetter” or “totalValueGetter” don’t.
To reproduce:
from dash import Dash, html
import dash
import dash_ag_grid as dag
import os
from dotenv import load_dotenv
load_dotenv()
app = Dash()
masterColumnDefs = [
{
"headerName": "Country",
"field": "country",
},
{"headerName": "Region", "field": "region"},
{"headerName": "Population", "field": "population", "aggFunc": "sum"},
{"field": "aggregation_placeholder", "rowGroup": True, "hide": True, "suppressColumnsToolPanel": True,}
]
rowData = [
{
"country": "China",
"region": "Asia",
"population": 1411778724,
"aggregation_placeholder": "All Countries",
},
{
"country": "India",
"region": "Asia",
"population": 1383524897,
"aggregation_placeholder": "All Countries",
},
{
"country": "United States",
"region": "Americas",
"population": 332593407,
"aggregation_placeholder": "All Countries",
},
{
"country": "Indonesia",
"region": "Asia",
"population": 271350000,
"aggregation_placeholder": "All Countries",
},
]
app.layout = html.Div(
[
dag.AgGrid(
id="grid",
columnDefs=masterColumnDefs,
rowData=rowData,
columnSize="sizeToFit",
licenseKey=os.getenv("AGGRID_ENTERPRISE_KEY"),
enableEnterpriseModules=True,
dashGridOptions={
"grandTotalRow": "pinnedTop", # or "top", "bottom", "pinnedBottom",
"autoGroupColumnDef": {
"headerName": "Info default read",
"minWidth": 220,
"cellRendererParams": {
"footerValueGetter": {
"function": "MyValueGetter",
},
# "innerRenderer": "MyInnerRenderer",
"totalValueGetter": {
"function": "MyValueGetter",
}
},
},
},
)
]
)
if __name__ == "__main__":
print(dash.__version__), print(dag.__version__), print(html.__version__)
app.run(debug=True)
The javascript functions are is taken directly from the javascript docs here React Grid: Row Grouping - Group Footers | AG Grid and is placed in the assets/folder which dash automatically reads on startup.
console.log('test.js loaded');
const dagcomponentfuncs = window.dashAgGridComponentFunctions = window.dashAgGridComponentFunctions || {};
var dagfuncs = window.dashAgGridFunctions = window.dashAgGridFunctions || {};
function MyInnerRenderer(props) {
const footer = props.node.footer;
const isRootLevel = props.node.level === -1;
const value = props.value;
if (footer) {
if (isRootLevel) {
return React.createElement(
'span',
{ style: { textDecoration: 'underline', fontWeight: 'bold' } },
'Grand Total'
);
} else {
return React.createElement(
'span',
{ style: { textDecoration: 'underline' } },
`Sub Total ${value}`
);
}
} else {
return React.createElement('span', null, value);
}
}
dagcomponentfuncs['MyInnerRenderer'] = MyInnerRenderer;
dagfuncs['MyInnerRenderer'] = MyInnerRenderer
function MyValueGetter(params) {
const footer = params.node.footer;
const isRootLevel = params.node.level === -1;
const value = params.value;
console.log('MyValueGetter called with params:', params);
return value;
}
dagfuncs['MyValueGetter'] = MyValueGetter;
ENVIRONMENT
print(dash._version_), print(dag._version_), print(html._version_)
4.1.0, 35.2.0, 4.1.0