Display a data table vertically in angular 6 (material)

Question

I have a data set which I am displaying in an angular material table (using angular 6). Have followed this documentation link to do this. I was looking for an optimized/neat way to represent rows as columns and columns as rows

Here's my 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>

and here's the data that I is binding: subscriptionPlans = [ { name: 'Enterprise', rowsInMillion: 'custom', price: 'custom', extraPerMillion: 'custom', noOfIntegrations: 'unlimited' },{ name: 'Standard', rowsInMillion: 10, price: 10, extraPerMillion: 1, noOfIntegrations: 10' }];

This code works fine but I cannot figure out how to display the table with rows and columns interchanged(vertically display the table) using the same data. There's an ugly way of lopping through data and changing the structure of subscriptionPlans but it's a very bad way. Hope I am clear about the question.