Show sum of a column in ag-grid

Question

I am using ag-grid for my table. I need to show the sum of each column at the end of the table. After editing the cell, the sum value should be updated

Below is my html:

<div>
  <ag-grid-angular style="width: 100%; height: 500px;" class="ag-theme-alpine" [rowData]= "rowData"
    [columnDefs]= "columnDefs" >
  </ag-grid-angular>
</div>

Below is Typescript

import { Component } from '@angular/core';
import { GridRes } from './gridres.model';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'ag-custom';


  columnDefs = [
    {headerName: "Make", field: "make"},
    {headerName: "Model", field: "model"},
    {headerName: "Price", field: "price"}
];

rowData = [
  {make: "Toyota", model: "Celica", price: 35000},
  {make: "Ford", model: "Mondeo", price: 32000},
  {make: "Porsche", model: "Boxter", price: 72000}
];

}

My Output is like below

I need to show the sum of price column at the end of the table. I gone show aggregator functions. But all are showing in the right side as grouping. But I need to show in the bottom of the table. The sum need to reflect if someone edits the cells

Please help me on this.

Answer 1

Here is how you can add a table footer to show the sum of a column:

• Set [groupIncludeTotalFooter]="true".
• Add aggFunc property to the column you want to compute the sum value.
• Add valueParser: 'Number(newValue)' to the columnDefs to parse the updated value as number to calculate the sum value correctly after an edit.

columnDefs = [
  { field: "make" },
  { field: "model" },
  {
    field: "price",
    aggFunc: "sum",
    editable: true,
    valueParser: "Number(newValue)",
  }
];

<ag-grid-angular style="width: 100%; height: 600px;" class="ag-theme-alpine" [rowData]="rowData"
  [columnDefs]="columnDefs" [groupIncludeTotalFooter]="true">
</ag-grid-angular>

Live Demo