How do you render an Angular 9 mat-table without a header row?

I'm using Angular 9. How do I construct a mat-table without a header row (th) for the table? Sounds silly but if I do this

<table mat-table *ngIf="isMobile" #mobile_table [dataSource]="dataSource"> <ng-container matColumnDef="item"> <td mat-cell *matCellDef="let item_stat"> <div> {{ item_stat.max_date }} m </div> <div> <a href="{{ item_stat.mobile_path }}">{{ item_stat.title }}</a> · {{ getScore(item_stat) }} </div> </td> </ng-container> <tr mat-header-row *matHeaderRowDef="mobileDisplayedColumns"></tr> <tr mat-row *matRowDef="let row; columns: mobileDisplayedColumns;" [ngClass]="getRowClass(row)"></tr> </table> 

It produces the error

ERROR TypeError: Cannot read property 'template' of undefined at MatHeaderRowDef.extractCellTemplate (table.js:567) at table.js:2522 at Function.from (<anonymous>) at MatTable._getCellTemplates (table.js:2512) at MatTable._renderRow (table.js:2467) at table.js:2326 at Array.forEach (<anonymous>) at MatTable._forceRenderHeaderRows (table.js:2321) at MatTable.ngAfterContentChecked (table.js:1800) at callHook (core.js:4730) 

I must add

<th mat-header-cell *matHeaderCellDef></th> 

to get the table to render properly. This seems unnecessary as I don't want a header row for my table. How do I build my mat-table so that this isn't required?

4 Answers

You just need to remove the header line mat-header-row

<tr mat-header-row *matHeaderRowDef="mobileDisplayedColumns"></tr> 

It works fine to me.

just delete the this line:

<tr mat-header-row *matHeaderRowDef="mobileDisplayedColumns"></tr> 

Two ways

Delete <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>

Or

on your css component add :host ::ng-deep thead{display: none;}

.mat-header-row { display: none; }