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.

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.

• javascript
• ag-grid

• Have you checked this? stackoverflow./questions/55009358/… – Ishraq Ahmad Commented Oct 3, 2019 at 4:05
• yes i have seen this but its angular js solution and i need this solution in normal js api – Prashant Sonar Commented Oct 3, 2019 at 4:34
• Yes, it really sucks that agGrid doesn't have a friendly FooterRow option for grids, just the ugly pinnedBottomRowData implementation. – Mike Gledhill Commented Jun 18, 2020 at 12:09

1 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 plex 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.