material table with stacked header

Question

Hi I am looking to achieve following structure on material table. So far I have seen some examples but I'm not able to achieve this

What I want to achieve:

|        |       |
|--------|-------|
| header | value |
| header | value |
| header | value |

<table >     
      <tbody><tr>
          <th>name</th>
          <td>
            value
          </td>
      </tr>

      <tr>
          <th>name2</th>
          <td>
            value2
          </td>
      </tr>
  </tbody>
</table>

when I do this implementation I'm only getting the result below:

<mat-table #table [dataSource]="dataSource" matSort>
    <ng-container matColumnDef="{{key}}" *ngFor="let key of objectKeys(dataSource)">
      <mat-header-cell *matHeaderCellDef mat-sort-header> {{getData(key).toUpperCase()}} </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element[key]}} </mat-cell>
    </ng-container>
    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>

  </mat-table>

This is the result:

| header | header | header | Header | header |
|--------|--------|--------|--------|--------|
|        |        |        |        |        |
|        |        |        |        |        |
|        |        |        |        |        |

any help is Appreciated !

Answer 1

The table from angular material does not have a specific attribute that you can change to rotate it in the way you want. However, that doesn't mean you can't do it yourself.

You can't change the position of your headers via html like in your code example but, you can change their view position via css. Here's a way of doing it via flexbox:

  table.mat-table {
    display: flex;
    flex-direction: row;
  }
  .mat-table tbody{
    display:flex;
    flex-direction: row;
  }
  .mat-table tr {
    display: flex;
    flex-direction: column;
  }

Granted, you'll need to do a lot more to make it actually look good but, it should at least start to look the way you want.