Как добавить итог ниже дочерней записи с помощью ag grd react

@CodeChanger предоставил ответ на эту здесь, а интерактивная демонстрация настроена здесь.

Чтобы поместить закрепленные строки в сетку, установите pinnedTopRowData или pinnedBottomRowData так же, как вы устанавливаете обычные данные в rowData. Дополнительную информацию также можно найти в этом разделе документации.

Пример кода из демонстрации:

import { Component, ViewChild } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import "ag-grid-enterprise";
import { CustomStatsToolPanel } from "./custom-stats-tool-panel.component";

@Component({
  selector: "my-app",
  template: `
    <div style="height: 100%; box-sizing: border-box;">
      <ag-grid-angular
        #agGrid
        style="width: 100%; height: 100%;"
        id="myGrid"
        class="ag-theme-balham"
        [columnDefs]="columnDefs"
        [defaultColDef]="defaultColDef"
        [sideBar]="sideBar"
        [frameworkComponents]="frameworkComponents"
        [rowData]="rowData"
        (gridReady)="onGridReady($event)"
      ></ag-grid-angular>
    </div>
  `
})
export class AppComponent {
  private gridApi;
  private gridColumnApi;

  private columnDefs;
  private defaultColDef;
  private sideBar;
  private frameworkComponents;
  private rowData: [];

  constructor(private http: HttpClient) {
    this.columnDefs = [
      {
        field: "athlete",
        width: 150,
        filter: "agTextColumnFilter",
        pinnedRowCellRenderer: function (params) { return '<strong>' + params.data.athlete + '</strong>'},
      },
      {
        field: "age",
        width: 190,
        pinnedRowCellRenderer: function (params) { return '<strong>' + params.data.age + '</strong>'},
      },
      {
        field: "country",
        width: 120
      },
      {
        field: "year",
        width: 90
      },
      {
        field: "date",
        width: 110
      },
      {
        field: "gold",
        width: 100,
        filter: false
      },
      {
        field: "silver",
        width: 100,
        filter: false
      },
      {
        field: "bronze",
        width: 100,
        filter: false
      },
      {
        field: "total",
        width: 100,
        filter: false
      }
    ];
    this.defaultColDef = { filter: true };
    this.sideBar = {
      toolPanels: [
        {
          id: "columns",
          labelDefault: "Columns",
          labelKey: "columns",
          iconKey: "columns",
          toolPanel: "agColumnsToolPanel"
        },
        {
          id: "filters",
          labelDefault: "Filters",
          labelKey: "filters",
          iconKey: "filter",
          toolPanel: "agFiltersToolPanel"
        },
        {
          id: "customStats",
          labelDefault: "Custom Stats",
          labelKey: "customStats",
          iconKey: "custom-stats",
          toolPanel: "customStatsToolPanel"
        }
      ],
      defaultToolPanel: "null"
    };
    this.frameworkComponents = { customStatsToolPanel: CustomStatsToolPanel };
  }
  generatePinnedBottomData(){
        // generate a row-data with null values
        let result = {};

        this.gridColumnApi.getAllGridColumns().forEach(item => {
            result[item.colId] = null;
        });
        return this.calculatePinnedBottomData(result);
    }
    calculatePinnedBottomData(target: any){
        //console.log(target);
        //list of columns fo aggregation
        let columnsWithAggregation = ['age','gold','silver']
        columnsWithAggregation.forEach(element => {
          console.log('element', element);
            this.gridApi.forEachNodeAfterFilter((rowNode: RowNode) => {
              //if(rowNode.index < 10){
                //console.log(rowNode);
              //}
                if (rowNode.data[element])
                    target[element] += Number(rowNode.data[element].toFixed(2));
            });
            if (target[element])
                target[element] = `${target[element].toFixed(2)}`;
        })
        //console.log(target);
        target['athlete'] = 'Total';
        return target;
    }
  onGridReady(params) {
    this.gridApi = params.api;
    this.gridColumnApi = params.columnApi;
    console.log(this.gridColumnApi.getAllGridColumns())
    this.http
      .get("https://raw.githubusercontent.com/ag-grid/ag-grid/master/packages/ag-grid-docs/src/olympicWinners.json")
      .subscribe(data => {
        this.rowData = data;
        setTimeout(()=>{
          let pinnedBottomData = this.generatePinnedBottomData();
        this.gridApi.setPinnedBottomRowData([pinnedBottomData]);
        }, 500)
        

    

    
        
      });
  }
}