How Do You Render an Angular 9 Mat-Table Without a Header Row?

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 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?

1

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;
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Sarah Jenkins
Author

Sarah Jenkins

Sarah Jenkins is a veteran tech journalist with over 12 years of experience covering artificial intelligence, mobile innovations, and digital ethics. Her insights have appeared in leading technology publications worldwide.