CODEWITHSUNDEEP
htmlcssangulartypescriptangular-material
denisiulian
denisiulian

Reputation: 273

Split a column of Angular Material Table

I'm trying to create a custom Angular Material Table, more exactly, to split one column in 5 columns like here:enter image description here

The first row with No, Name, Weight and Symbol (with the 5 columns) represent the header of the table. How can I split the Symbol column in 5 columns? My code is that one from Angular Material:

<div class="mat-elevation-z8">
  <table mat-table [dataSource]="dataSource">
    <!-- Position Column -->
    <ng-container matColumnDef="position">
      <th mat-header-cell *matHeaderCellDef>No.</th>
      <td mat-cell *matCellDef="let element">{{ element.position }}</td>
    </ng-container>

    <!-- Name Column -->
    <ng-container matColumnDef="name">
      <th mat-header-cell *matHeaderCellDef>Name</th>
      <td mat-cell *matCellDef="let element">{{ element.name }}</td>
    </ng-container>

    <!-- Weight Column -->
    <ng-container matColumnDef="weight">
      <th mat-header-cell *matHeaderCellDef>Weight</th>
      <td mat-cell *matCellDef="let element">{{ element.weight }}</td>
    </ng-container>

    <!-- Symbol Column -->
    <ng-container matColumnDef="symbol">
      <th mat-header-cell *matHeaderCellDef>Symbol</th>
      <td mat-cell *matCellDef="let element">{{ element.symbol }}</td>
    </ng-container>

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

  <mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons aria-label="Select page of periodic elements"> </mat-paginator>
</div>

Upvotes: 0

Views: 3545

Answers (1)

fergus
fergus

Reputation: 71

I had to do a similar thing this week and I put together a Stackblitz to play around and have something working that might help?

https://stackblitz.com/edit/generic-mat-table-kji9ey?file=src%2Fapp%2Fapp.component.html

The key seems to be to configure the two header rows with colspan and rowspan attributes for the resultant columns

This answer was useful too: https://stackoverflow.com/a/59626423/2928193

Upvotes: 1

Related Questions