Как зафиксировать row в mat-table angular?

Question

[Виталий Мудрый]

Всем привет. Делаю таблицу в которой отображается статистика. В последней строчке выводиться total. Таблицу можно сортировать и этот total сортируется вместе с таблицей. Мне нужно что бы он быть всегда внизу. Возможно ли это сделать. Вот код:

<mat-table [dataSource]="dataSource" matSort>

  <ng-container matColumnDef="date">
    <mat-header-cell *matHeaderCellDef mat-sort-header>Date</mat-header-cell>
    <mat-cell *matCellDef="let row">{{row.date | date: 'dd.MM.yyyy'}}</mat-cell>
  </ng-container>

  <ng-container matColumnDef="spent">
    <mat-header-cell *matHeaderCellDef mat-sort-header>Spent</mat-header-cell>
    <mat-cell *matCellDef="let row">${{row.spent}}</mat-cell>
  </ng-container>

  <ng-container matColumnDef="revenue">
    <mat-header-cell *matHeaderCellDef mat-sort-header>Revenue</mat-header-cell>
    <mat-cell *matCellDef="let row">${{row.revenue}}</mat-cell>
  </ng-container>

  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
  <mat-row *matRowDef="let row; columns: displayedColumns" [class.total]="row.date === null"></mat-row>

</mat-table>

Если date null, то я добавляю сlass total, который делает строчку зеленным цветом

.mat-row.total {
  background: #bde1a0;
  display: flex;
  bottom: 0;
  
  .mat-cell {
    font-size: 1.2em;
  }
}

Помогите пожалуйста. Спасибо