mat-table with no records found display

template.html

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

  <!-- columns here -->

  <ng-container matColumnDef="noData">
    <mat-footer-cell *matFooterCellDef [attr.colspan]="displayedColumns.length">
      No records found.
    </mat-footer-cell>
  </ng-container>
  
  <ng-container matColumnDef="loading">
    <mat-footer-cell *matFooterCellDef [attr.colspan]="displayedColumns.length">
      Loading, please wait...
    </mat-footer-cell>
  </ng-container>

  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
  <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
  <mat-footer-row *matFooterRowDef="['noData']" [hidden]="dataSource && dataSource.data.length > 0"></mat-footer-row>
  <mat-footer-row *matFooterRowDef="['loading']" [hidden]="dataSource !== undefined"></mat-footer-row>

</mat-table>

template.ts

  displayedColumns = [];
  dataSource = new MatTableDataSource([]);

Thanks! Great gist!
You can use datasource.filteredData.length to allow usage together with the filter function in mat-table