Can we have a generalized example for the documentation of getGroupRowAgg to implement the aggregation logic for all/a lost of columns - without hardcoding the column names like gold , silver etc. At the moment as I have a large number of columns and the column names can vary is there an elegant way to do this ?
let gridApi;
const gridOptions = {
columnDefs: [
{ field: "country", rowGroup: true, hide: true },
{ field: "year", rowGroup: true, hide: true },
{ field: "gold" },
{ field: "silver" },
{ field: "bronze" },
{ headerName: "Gold*pi", field: "goldPi", minWidth: 200 },
{ headerName: "Silver*pi", field: "silverPi", minWidth: 200 },
{ headerName: "Bronze*pi", field: "bronzePi", minWidth: 200 },
],
defaultColDef: {
flex: 1,
minWidth: 150,
filter: true,
},
autoGroupColumnDef: {
headerName: "Athlete",
field: "athlete",
minWidth: 250,
},
sideBar: true,
getGroupRowAgg: getGroupRowAgg,
};
function getGroupRowAgg(params) {
const result = {
gold: 0,
silver: 0,
bronze: 0,
goldPi: 0,
silverPi: 0,
bronzePi: 0,
};
params.nodes.forEach((node) => {
const data = node.group ? node.aggData : node.data;
if (typeof data.gold === "number") {
result.gold += data.gold;
result.goldPi += data.gold * Math.PI;
}
if (typeof data.silver === "number") {
result.silver += data.silver;
result.silverPi += data.silver * Math.PI;
}
if (typeof data.bronze === "number") {
result.bronze += data.bronze;
result.bronzePi += data.bronze * Math.PI;
}
});
return result;
}
function expandAll() {
gridApi.expandAll();
}
function collapseAll() {
gridApi.collapseAll();
}
// setup the grid after the page has finished loading
document.addEventListener("DOMContentLoaded", () => {
const gridDiv = document.querySelector("#myGrid");
gridApi = agGrid.createGrid(gridDiv, gridOptions);
fetch("https://www.ag-grid.com/example-assets/olympic-winners.json")
.then((response) => response.json())
.then((data) => gridApi.setGridOption("rowData", data));
});