title: How to calculate sum of table columns and show in footer using Angular?
body: <p>I am trying to show the total of the column values in table footer using Angular.
  <a href="https://i.stack.imgur.com/3vRXw.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3vRXw.png" alt="enter image description here"></a></p>
  
  <pre><code> &lt;mat-header-row class="sticky-header" *matHeaderRowDef="['player', 'team', 'goals']"&gt;&lt;/mat-header-row&gt;
        &lt;mat-row *matRowDef="let row; columns: ['player', 'team', 'goals']"&gt;&lt;/mat-row&gt;
        &lt;mat-row class="sticky-footer" *matRowDef="let row: columns: ['total']; when:isLastRow"&gt;&lt;/mat-row&gt;
  </code></pre>
  
  <p>...</p>
  
  <pre><code> export class AppComponent {
  
    dataSource: PlayerDataSource;
  
    isLastRow = (data, index) =&gt; index === this.players.length;
  
    players = STATS.slice();
  
    constructor() {
      this.dataSource = new PlayerDataSource();
      this.dataSource.use(this.players.slice());
    }
  
  }
  </code></pre>
  
  <p>After reading this <a href="https://github.com/angular/material2/issues/7548" rel="nofollow noreferrer">github topic</a> I created <a href="https://stackblitz.com/edit/angular-jk2jtx" rel="nofollow noreferrer">this stackblitz</a> example but the sum is not displayed in the footer.</p>
  
  <p>Can anyone shed some light on this subject? There is no example regarding this. Thank you.</p>