Angular Material v6 Mat-Footer - "Cannot read property 'template' of undefined"

Question

I'm trying to implement a footer row into a mat-table component after recently upgrading to angular 6 for this purpose, but after adding both the mat-footer-cell and mat-footer-row elements in the table, I get the following error:

ERROR TypeError: Cannot read property 'template' of undefined at MatFooterRowDef.push../node_modules/@angular/cdk/esm5/table.es5.js.CdkFooterRowDef.extractCellTemplate (vendor.js:17400)

The table still appears on the page, but with no data, no footer row, and a T symbol where to the right of each column heading.

HTML:

  <ng-container matColumnDef="total">

    <mat-header-cell *matHeaderCellDef mat-sort-header style="width: 15%; flex: none">Total</mat-header-cell>

    <mat-cell *matCellDef="let item" style="width: 15%; flex: none">{{item.total | currency: 'GBP'}}</mat-cell>

    <td mat-footer-cell *matFooterCellDef>100</td>

  </ng-container>

  <mat-header-row *matHeaderRowDef="tableColumns"></mat-header-row>

  <mat-row *matRowDef="let row; columns: tableColumns" (click)="editItem(row)"></mat-row>

  <tr mat-footer-row *matFooterRowDef="tableColumns"></tr>

</mat-table>

does the table display normally without the `mat-footer-row`? — Michael Doye, Jun 01 '18 at 11:12
Are you perhaps able to recreate this error in a stackblitz? https://stackblitz.com/angular/klengxeqvdd — Michael Doye, Jun 01 '18 at 13:03

score 77 · Accepted Answer · answered Jun 05 '18 at 10:42

77

FIXED: This was not made clear in the material documentation, but all columns must contain a <mat-footer-cell/> element, even if only one column will contain content.

answered Jun 05 '18 at 10:42

nick.cook

2,071
4
18
36

1

Absolutely true. If you want to show footer content then each column must contain **footer** cell. I accomplished this in another way: ``. – akgupta Jan 08 '19 at 06:55
1

alternatively, you can also restrict the columns to be displayed in footer. ``. This would be useful in scenarios when you have to use `colspan`. – M M Nov 26 '19 at 19:22
True. Even columns defined for check boxes require this. – Mario Orozco Mar 09 '20 at 16:18

score 9 · Answer 2 · answered Jun 25 '19 at 11:01

9

You can define your own "tableFooterColumns" variable.

tableFooterColumns: string[] = ['total'];

and use it in the template (change "colspan" for your needs):

 <tr mat-footer-row *matFooterRowDef="tableFooterColumns" colspan="2"></tr>

answered Jun 25 '19 at 11:01

Volodymyr

91
1
3

score 8 · Answer 3 · edited Sep 05 '20 at 19:54

Need to include mat-footer-cell for each column:

<div class="example-container mat-elevation-z8">
  <mat-table #table [dataSource]="dataSource">

    <mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>

    <ng-container matColumnDef="categoryName">
      <mat-header-cell *matHeaderCellDef> First Name </mat-header-cell>
      <mat-cell *matCellDef="let row"> {{row.firstName}} </mat-cell>
      
      //This is the part for which the code is breaking
      <mat-footer-cell *matFooterCellDef> Your footer column Name will goes here </mat-footer-cell>**
    </ng-container>
    <ng-container matColumnDef="categoryName">
      <mat-header-cell *matHeaderCellDef> Last Name </mat-header-cell>
      <mat-cell *matCellDef="let row"> {{row.lastName}} </mat-cell>
      
      //This need to be included in all your columns
      <mat-footer-cell *matFooterCellDef> Your 2nd footer column Name will goes here </mat-footer-cell>**
    </ng-container>
    <mat-footer-row *matFooterRowDef="displayedColumns; sticky: true"></mat-footer-row>
  </mat-table>
</div>

score 1 · Answer 4 · answered Mar 23 '23 at 06:53

For new comes, you need a foot in each column from your table:

        <table mat-table [dataSource]="dataSource" class="mat-elevation-z8 demo-table">

            <!-- Name Column -->
            <ng-container matColumnDef="name">
                <th mat-header-cell *matHeaderCellDef> Nome </th>
                <td mat-cell *matCellDef="let element"> {{element.name}} </td>
                <td mat-footer-cell *matFooterCellDef> Total </td>
            </ng-container>

            <!-- age Column -->
            <ng-container matColumnDef="age">
                <th mat-header-cell *matHeaderCellDef> Age </th>
                <td mat-cell *matCellDef="let element"> {{element.age}} </td>
                <td mat-footer-cell *matFooterCellDef> {{your information}} </td>

            </ng-container>

...
            <tr mat-footer-row *matFooterRowDef="displayedColumns; sticky: true"></tr>

        </table>

Angular Material v6 Mat-Footer - "Cannot read property 'template' of undefined"

4 Answers4

Linked