Angular Материал: Как сделать многорядный столбец в таблице материалов

Question

Я пишу таблицу материалов следующим образом:

<mat-table multiTemplateDataRows [dataSource]="dataSource">
  <h4>TEST</h4>

  <ng-container matColumnDef="Title">
    <mat-header-cell *matHeaderCellDef> Title </mat-header-cell>
    <mat-cell *matCellDef="let element" (click)="onEditActivityTemplate(element); $event.stopPropagation();">
      <h4>Title: </h4>
      <p>{{element.title || 'None'}}</p>
    </mat-cell>
  </ng-container>

  <ng-container matColumnDef="Time">
    <mat-header-cell *matHeaderCellDef> Time </mat-header-cell>
    <mat-cell *matCellDef="let element" (click)="onEditActivityTemplate(element); $event.stopPropagation();">
      <h4>Time: </h4>
      <p>{{element.time || 'None'}}</p>
    </mat-cell>
  </ng-container>

  <ng-container matColumnDef="Created By">
    <mat-header-cell *matHeaderCellDef> Created By </mat-header-cell>
    <mat-cell *matCellDef="let element" (click)="onEditActivityTemplate(element); $event.stopPropagation();">
      <h4>Created By: </h4>
      <p>{{element.createdBy || 'None'}}</p>
    </mat-cell>
  </ng-container>

  <ng-container matColumnDef="Output">
    <mat-header-cell *matHeaderCellDef> Output </mat-header-cell>
    <mat-cell *matCellDef="let element" (click)="onEditActivityTemplate(element); $event.stopPropagation();">
      <h4>Output: </h4>
      <p>{{element.output || 'None'}}</p>
    </mat-cell>
  </ng-container>

  <ng-container matColumnDef="Description">
    <mat-header-cell *matHeaderCellDef> Description </mat-header-cell>
    <mat-cell *matCellDef="let element" (click)="onEditActivityTemplate(element); $event.stopPropagation();">
      <h4>Description: </h4>
      <p>{{element.description || 'None'}}</p>
    </mat-cell>
  </ng-container>

  <ng-container matColumnDef="Divider">
    <mat-header-cell *matHeaderCellDef> Divider </mat-header-cell>
    <mat-cell *matCellDef="let element" (click)="onEditActivityTemplate(element); $event.stopPropagation();">
      <mat-divider></mat-divider>
    </mat-cell>
  </ng-container>

  <mat-row *matRowDef="let row; columns: ['Title', 'Time'];"></mat-row>
  <mat-row *matRowDef="let row; columns: ['Created By', 'Output'];"></mat-row>
  <mat-row *matRowDef="let row; columns: ['Description'];"></mat-row>
  <mat-row *matRowDef="let row; columns: ['Divider'];"></mat-row>

</mat-table>

Мне как-то нужно показать изображение, связанное с этими строками, вот так:

Итак, у меня есть 2 вопроса. 1 Возможно ли это? И 2, как мне подойти к этому? Также, если это возможно, я бы хотел вставить разделитель матов под каждым набором данных, однако мне это тоже не удалось.

Мои данные - это массив следующего объекта:

export interface MaterialImage {
  id: number;
  url: string;
  title: string;
  description: string;
  timestamp: string;
  createdBy: string;
  output: string;
}