Отображение таблицы данных по вертикали в угловых 6 (материал)

Question

У меня есть набор данных, который я отображаю в угловой таблице материалов (используя угловую 6).Перейдите по этой ссылке на документацию , чтобы сделать это.Я искал оптимизированный / аккуратный способ представления строк в виде столбцов и столбцов в виде строк

Вот мой HTML:

<table mat-table [dataSource]="subscriptionPlans" class="mat-elevation-z8 subscription-table text-left">
    <ng-container matColumnDef="subscription">
      <th mat-header-cell *matHeaderCellDef> Subscription </th>
      <td mat-cell *matCellDef="let element"> {{element.name}} </td>
    </ng-container>
    <ng-container matColumnDef="rows">
      <th mat-header-cell *matHeaderCellDef> Rows in million </th>
      <td mat-cell *matCellDef="let element"> {{(element.rowsInMillion) ? element.rowsInMillion : 'custom'}} </td>
    </ng-container>

    <ng-container matColumnDef="price">
      <th mat-header-cell *matHeaderCellDef> Pricing </th>
      <td mat-cell *matCellDef="let element"> {{(element.price) ? element.price : 'custom'}} </td>
    </ng-container>

    <ng-container matColumnDef="additionalPricing">
      <th mat-header-cell *matHeaderCellDef> Pricing for additional 1 million rows </th>
      <td mat-cell *matCellDef="let element"> {{(element.extraPerMillion) ? element.extraPerMillion : 'custom'}} </td>
    </ng-container>

    <ng-container matColumnDef="numberOfIntegrations">
        <th mat-header-cell *matHeaderCellDef> Number of integrations </th>
        <td mat-cell *matCellDef="let element"> {{(element.noOfIntegrations) ? element.noOfIntegrations : 'custom'}} </td>
      </ng-container>

      <ng-container matColumnDef="subscriptionRadio">
          <th mat-header-cell *matHeaderCellDef></th>
          <td mat-cell *matCellDef="let element"> 
              <mat-radio-button class="example-radio-button" [value]="element.subscriptionId"></mat-radio-button>  
          </td>
      </ng-container>

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

и вот данные, которые я связываю: subscriptionPlans = [{name: 'Enterprise', rowInMillion: 'custom', цена: 'custom', extraPerMillion: 'custom', noOfIntegrations: 'unlimited'}, {name: 'Standard', rowInMillion: 10, цена: 10, extraPerMillion: 1,noOfIntegrations: 10 '}];

Этот код работает нормально, но я не могу понять, как отобразить таблицу с взаимозаменяемыми строками и столбцами (вертикальное отображение таблицы), используя те же данные.Есть отвратительный способ просматривать данные и изменять структуру subscriptionPlans, но это очень плохой способ.Надеюсь, я проясню вопрос.