CODEWITHSUNDEEP
angularangular-material
zacko
zacko

Reputation: 399

How to create a horizontally oriented table with Angular Material (mat-table

I'm using angular material 8.2.3 for my site. But currently I'm stuck with a seemingly easy problem. I want to order a table horizontally instead of vertically.

My table consists of only two columns. Here's the code:

<table mat-table [dataSource]="items" class="mat-elevation-z8 table-hover">

  <ng-container matColumnDef="percent">
    <th mat-header-cell *matHeaderCellDef> %</th>
    <td mat-cell *matCellDef="let items">{{items.percent}}</td>
  </ng-container>

  <ng-container matColumnDef="value">
    <th mat-header-cell *matHeaderCellDef> val. </th>
    <td mat-cell *matCellDef="let items">{{items.value}}</td>
  </ng-container>

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

</table>

The resulting table looks like this:

|------|------|
|  %   | val. |
|------|------|
|   1  |   5  |
|   2  |   4  |
|   3  |   3  |

But what I want is this:

|------|------|------|------|
|  %   |   1  |   2  |   3  |
|------|------|------|------|
| val  |   5  |   4  |   3  |
|------|------|------|------|

What do I have to do to achieve this?

Upvotes: 5

Views: 11466

Answers (3)

anup
anup

Reputation: 11

I was also struggling to find a similar solution using Mat-Table, but it's not available.

So I went in the same way as https://stackoverflow.com/a/59246035/13834563.

Even though I haven't written custom CSS to look like a Mat-table, instead I have used the existing CSS classes from material CSS and a little bit change in the HTML (adding <thead>, <tbody>).

Something like this -

    <table class="mat-table">
      <thead>
        <tr>
          <th class="mat-header-cell">Percent:</th>
          <td class="mat-cell" *ngFor="let i of items">
            {{i.percent}} %
          </td>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th class="mat-header-cell">Value:</th>
          <td class="mat-cell" *ngFor="let i of items">
            {{i.value}}
          </td>
        </tr>
      </tbody>
    </table>

This will make <HTML Table> exactly look similar to mat-table without custom CSS.

Upvotes: 1

zacko
zacko

Reputation: 399

I expected that there is a hidden trick or property for mat-table to render the table in a certain direction, but obviously there is none.

As suggested solutions with some CSS magic didn't really bring desired result, I decided to code the table without material like this:

<table style="width:100%; margin-top: 10pt;">
  <tr>
    <th>Percent:</th>
    <td class="right" *ngFor="let i of items">
      {{i.percent}} %
    </td>
  </tr>
  <tr>
    <th>Value:</th>
    <td class="right" *ngFor="let i of items">
      {{i.value}}
    </td>
  </tr>
</table>

With an ordinary table a horizontal layout is extremely easy to achieve. All I have to do now is a bit of CSS to make it look like the other tables I have.

Thanks for your help anyway. To know, there is no easy way to do this with mat-table is also a valuable lesson.

Upvotes: 0

SELA
SELA

Reputation: 6858

This is really hard to archieve with MatTable it self, but you can use a scss or css trick to archieve this.

Use the below class where you are using on the MatTable as @dev mentioned you can use flex for this. Its also correct. Only and easy way to do this is via css or scss overriding of the MatTable. 

mat-table {
  display: flex;
  flex-direction: row;
}

mat-row, mat-header-row {
  flex-direction: column;
}

Upvotes: 0

Related Questions