You could use the pinnedBottomRowData grid property that is talked about in the Row Pinning section of AgGrid's documentation.
Using the columns from the question you could do something like the following:
getTotalRow(rowData) {
const initial = {
fname: undefined,
lname: undefined,
position: undefined,
office: 'Total', // if you want to display in the 'Total' in the Office column
salary: 0,
};
// iterate overRow data summing each property for total
// assuming lodash reduce is available and skipping actual summing logic of salary
const rowTotal = reduce((totals, rowData) => {...}, initial)
// rowTotal has a structure like:
// {
// fname: undefined, // undefined should render blank cell in row at column
// lname: undefined,
// position: undefined,
// office:
// salary: 1234567.89,
// }
// have to format in an array as pinnedBottomRowData expects the same format as rowData
return [rowTotal];
}
The downside of this approach is that you have to run the column summations manually and build the rowData
object yourself but I think this is a much more trivial solution than column aggregations which get complex pretty quick if you are doing more than displaying data (making cell edits, recalculating specific cells after edits, etc.)
Also this is pinned to the bottom of the grid, so if you don't have enough rows you will have space between the last row of data and the Total row (see screenshot). Row/Column headers don't matter so I blacked them out.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.