angular add a sum column-CodePudding

How do we insert a column in an angular table , for example based on the screenshot I want to add Total text below the last value of the Rent ($/SF) , I tried adding tr , td and mat footer cell but it does not work . Any idea guys ? Thanks. Appreaciated.

how to add a total which is just a text below the last value of the Rent ($/SF) ???

I tried <td mat-footer-cell *matFooterCellDef> Total but it does not work.

enter image description here

#html code

  <table mat-table [dataSource]="bovRentComsCompleted" >
                <ng-container *ngFor="let p of rentCompsTableLabel; last as l" matColumnDef="{{p.key}}">
                  <th [ngClass]="{'th-rents-completed-min-width':!l}" mat-header-cell *matHeaderCellDef >{{p.label}}</th>
                  <td mat-cell *matCellDef="let element; index as i"
                    [ngClass]="{'border-none': i === bovRentComsCompleted.length - 1}" >
                    <span *ngIf="p.key === 'rent'">{{element[p.key] != null ? '$' : ''}}{{element[p.key] !== null ? (element[p.key] | number : '1.2-2') : '-'}}</span>
                    <span *ngIf="p.key === 'distanceFromWag'">{{element[p.key] !== null ? (element[p.key] | number : '1.2-2') : '-'}}</span>
                    <span *ngIf="p.key === 'quality'">{{element[p.key] !== null ? (element[p.key]) : '-'}}</span>
                    <mat-slide-toggle [disabled]="true" [(ngModel)]="element[p.key]" *ngIf="p.key === 'isTls'" color="primary"></mat-slide-toggle>
                    <span *ngIf="p.key === 'address'">{{element[p.key] !== null ? (element[p.key]) : '-'}}</span>
                    <span *ngIf="p.key === 'leaseStart'">{{element[p.key] !== null ? (element[p.key] | date : 'MM/dd/yyyy') : '-'}}</span>
                    <span *ngIf="p.key === 'sf'">{{element[p.key] !== null ? (element[p.key] | number) : '-'}}</span>
                    <span *ngIf="p.key === 'notes'">{{element[p.key] !== null ? (element[p.key]) : '-'}}</span>
                  </td>
                </ng-container>
                <tr mat-header-row *matHeaderRowDef="tableRentComps"></tr>
                <tr mat-row *matRowDef="let row; columns: tableRentComps;" >
                </tr>
              </table>

CodePudding user response：

let total = 0;
let value = 0;

ngOnInit(): void {  
    this.findSum();  
}  

findSum(data) {
  for(d in data) {
    total  = data.value;
  }
  
  return total;
}

<table mat-table [dataSource]="data">
  <ng-container matColumnDef="sum">
    <th mat-header-cell *matHeaderCellDef> Total: </th>
    <td mat-cell *matCellDef="let d"> {{d.total}} </td>
  </ng-container>
  
</table>