How display particular column summation in footer in ag-grid

Question

How to Display total sum of particular column at in footer of ag-grid table. for example if i have column name salary in ag-grid table then i want to show total salary sum at the bottom of grid as display in following screen.

Answer 1

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.