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 class="smallHeading">
{{ item_stat.max_date }} m
</div>
<div class="mainRow divider">
<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?
You just need to remove the header line mat-header-row *<tr mat-header-row matHeaderRowDef="mobileDisplayedColumns"> It works fine to me.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With