I'm having trouble displaying the total sum at the bottom of my table.
Despite following the steps outlined in the documentation exactly, it still doesn't seem to be working for me.
Below you can find the code from my template:
<table mat-table [dataSource]="transactions" matSort class="table table-hover">
<ng-container *ngFor="let columnName of displayedColumns" [matColumnDef]="columnName">
<th mat-header-cell *matHeaderCellDef mat-sort-header class="text-danger">{{ columnName }}</th>
<td mat-cell *matCellDef="let row">{{ row[columnName] }}</td>
<td mat-footer-cell *matFooterCellDef> Total </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns" (click)="getRecord(row)"></tr>
<td mat-footer-cell *matFooterCellDef>{{ total }}</td>
</table>
This is how I have implemented the calculation in my component:
total = this.transactions.map(t => t.cost).reduce((acc, value) => acc + value, 0);
Unfortunately, the total sum is not appearing as expected. Here is a link to a working example that might help pinpoint the issue:
https://stackblitz.com/edit/angular-ehc6fn?file=src%2Fapp%2Ftable-footer-row-example.ts