How to display the table headers in a row, in angular material table?

Question

My Material table displays the value in below manner:

Name |quatity

Mango|10

    <div class="table-cover center-table">
      <div class="mat-elevation-z8 elevation-scroll-control">
        <table mat-table class="full-width-table left-margin" [dataSource]="dataSource" matSort aria-label="Elements">

          <!-- Name Column -->
          <ng-container matColumnDef="name">
            <td mat-header-cell *matHeaderCellDef >Name</td>
            <td mat-cell *matCellDef="let row" class="">
              <div class="cell-style padding-left">{{row.Name}}</div>
            </td>
          </ng-container>

          <!-- quantity Column -->
          <ng-container matColumnDef="quantity">
            <td mat-header-cell *matHeaderCellDef>quantity</td>
            <td mat-cell *matCellDef="let row">
              <div class="cell-style">{{row.quantity}}</div>
            </td>
          </ng-container>

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

      </div>      
    </div>

But I want to display the value like below:

Name | Mango

quatity | 10

How can I achieve this? any help is much appreciated

Arrange you element and data as given in this link w3.org/WAI/tutorials/tables/irregular — Vijay Sankhat
– Vijay Sankhat, Commented Nov 27, 2018 at 5:44

GCSDC · Accepted Answer · 2018-11-27 16:53:01Z

5

You may do that by:

Transposing your data from columns to row:

Before: Mango |10 Banana|5

After: Mango|Banana 10|5
Including the labels as the first column of your data:

Name|Mango|Banana Quantity|10|5
Adjust your table to display columns dynamically (so that you may have any number of columns), as on this example from angular material table documentation:

<table mat-table [dataSource]="data" class="mat-elevation-z8">
  <ng-container [matColumnDef]="column" *ngFor="let column of displayedColumns">
    <th mat-header-cell *matHeaderCellDef> {{column}} </th>
    <td mat-cell *matCellDef="let element"> {{element[column]}} </td>
  </ng-container>

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

If not required you may remove the header row
If you want to format the first column, you may use some css as:

td.mat-cell:nth-child(1) { // formatting }
Also, if required, you may use property sticky of MatColumnDef to keep the first column sticky (in this case you may want to have the first column separate from the dynamic *ngFor loop, so that you may easily have only the first column sticky)

I've created a working stackblitz example

edited Nov 27, 2018 at 16:53

answered Nov 27, 2018 at 5:52

GCSDC

3,5304 gold badges31 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Rajath Over a year ago

Thank you for your response @GCSDC. I tried your solution but it still not displaying the expected result. Can please alter my code for better understanding.

GCSDC Over a year ago

@Rajath I've included a working stackblitz example on my answer. Please let me know if this solves the issue.

Rajath Over a year ago

Thank you very much! One more concern - if we do like that, then it becomes very difficult to update the data in the table(database) right? How we can address this issue.

GCSDC Over a year ago

Not sure if I got your point, but if you need the data on the initial format, you may just transpose it again.

Collectives™ on Stack Overflow

How to display the table headers in a row, in angular material table?

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related