Мат-стол с rowGroup

Question

В моей Mat-таблице мне нужно отобразить результат, подобный картинке ниже, со строкой, которая задает определенное свойство элементов.

Я следую этому примеру: stackblitz , но в моем случае я сравниваю текущее свойство элемента с предыдущим, и если эти свойства не совпадают, мне нужно показать rowGroup. Я не знаю, правильно ли это с материалом, но вметод, который делает это сравнение, я не смогу получить прецедент.

Метод

isGroup(index, item: AccessLog): boolean {
  if (index == null) return false;
    if (this.accesslogs && this.accesslogs.length > 0) {
      if (index == 0) return true;
      else {
        if (item.remoteAddress == this.accesslogs[index - 1].remoteAddress) {
          return false;
        } else {
          return true;
        }
      }
    }
    return false;
}

HTML

  <table mat-table [dataSource]="accesslogs" class="example-table" matSort (matSortChange)="temp($event)">
    <!-- Number Column -->
    <ng-container matColumnDef="createdDate">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ "accesslogs.table.headers.createddate" | translate }}</th>
      <td mat-cell *matCellDef="let row">{{ row.createdDate | date: ("pattern.datehourmin" | translate) }}</td>
    </ng-container>


    <ng-container matColumnDef="remoteAddress">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ "accesslogs.table.headers.remoteaddress" | translate }}</th>
      <td mat-cell *matCellDef="let row">{{ row.remoteAddress }}</td>
    </ng-container>

    <!-- Created Column -->
    <ng-container matColumnDef="created">
      <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear>{{ "accesslogs.table.headers.useragent" | translate }}</th>
      <td mat-cell *matCellDef="let row">{{ row.userAgent | ellipse: 50 }}</td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>

    <!-- Group header -->
    <ng-container matColumnDef="groupHeader">
      <td colspan="999" mat-cell *matCellDef="let row">
        <strong>ip {{ row.remoteAddress }}</strong>
      </td>
    </ng-container>

    <tr mat-row *matRowDef="let row; columns: ['groupHeader']; when: isGroup"></tr>
  </table>