Angular MatTable

Question

Я хочу отобразить мой json с помощью Mattable.

Мой json:

{
    "cat": {
        "cat.id": 127,
        "cat.name": "Max",
        "catInfo": {
            "siblingList": [
                {
                    "colorList": [
                        {
                            "color1": "black"
                        }
                    ],
                    "info": {
                        "name": "Sam",
                        "id": 1
                    }
                }
            ]
        }
    },
    "dog": {
        "dog.id": "127.0.0.1",
        "dog.name": "Fire"
    }
}

HTML;

<mat-card>

<div class= "page">
      <mat-table [dataSource]="dataSource" matSort>
          <ng-container matColumnDef="title">
              <mat-header-cell *matHeaderCellDef mat-sort-header>Title</mat-header-cell>
              <mat-cell *matCellDef="let cat">{{cat}}</mat-cell>
          </ng-container>
          <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
          <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
      </mat-table>
</div>
</mat-card>

Я использую сервис для получения данные. Но я не могу отобразить данные с ключами и значениями через mattable. Как я могу это сделать?