title: Angular material table footer totals
body: <p>I am using angular material table 8.2.3. I have a lot of tables that are generated from a definition in the typescript. Most of the tables have to do with numbers so I have to show totals on the footer. Problem is that the material table examples in the material page have only one column and it does not show how to deal with multiple columns. I am looking for a way to dynamic calculate the sum of a column. I have the following code but it does not execute:</p>
  
  <p><a href="https://i.stack.imgur.com/axPZp.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/axPZp.png" alt="enter image description here"></a></p>
  
  <pre><code>&lt;table mat-table [dataSource]="dataSource" matSort matSortActive="Date" matSortDisableClear="true"&gt;
  
      &lt;ng-container *ngFor="let column of columns" [matColumnDef]="column.columnDef"&gt;
          &lt;th mat-header-cell *matHeaderCellDef mat-sort-header&gt;{{ column.header }}&lt;/th&gt;
          &lt;td mat-cell *matCellDef="let row"&gt;{{ column.cell(row) }}&lt;/td&gt;
          &lt;td mat-footer-cell *matFooterCellDef&gt; {{this.dataSource.data.reduce((data, val) =&gt; data+= val.cell(row), 0) &lt;/td&gt;
      &lt;/ng-container&gt;
  
      &lt;tr mat-header-row *matHeaderRowDef="displayedColumns"&gt;&lt;/tr&gt;
      &lt;tr mat-row *matRowDef="let row; columns: displayedColumns;"&gt;&lt;/tr&gt;
      &lt;tr mat-footer-row *matFooterRowDef="displayedColumns"&gt;&lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>