How colSpan and row Span added to material table Header Angular 7?

Question

I'm trying to add rowSpan and colSpan in Angular material Table header. Can anyone help me to achieve it.

Below is the Attached Header I want to get using material table

Answer 1

I have the sample task like you. I just easy to display none with second header.

  <ng-container matColumnDef="position">
    <th mat-header-cell *matHeaderCellDef [ngStyle]="{'display': 'none'}"> No. </th>
    <td mat-cell *matCellDef="let element"> {{element.position}} </td>
  </ng-container>

 <!-- first stage header -->
  <ng-container matColumnDef="No">
    <th mat-header-cell *matHeaderCellDef [attr.rowspan]="2">No</th>
  </ng-container>

Here is my result

You can follow my link to know more: StackBlitz

Answer 2

I ran into the same issue and, using some inspiration from previous answers, found the following to work perfectly.

To achieve the example provided in the question, you will need two table headers. The first will contain the State, Utilities company and Summer Period columns, while the second will contain the data1, data2 & data3 columns. To do this, start with the following:

<table mat-table [dataSource]="dataSource" class="my-table">
  <tr mat-header-row *matHeaderRowDef="['state', 'company', 'summer']"></tr>
  <tr mat-header-row *matHeaderRowDef="['data1', 'data2', 'data3']"></tr>
  <tr mat-row *matRowDef="let row; columns: ['state', 'company', 'data1', 'data2', 'data3']"></tr>
</table>

This piece of code creates a table with two table header rows and, for each data point in your dataSource, one row with 5 cells which use the columns provided.

To properly style these header rows, we need to use rowSpan and colSpan. For each column, we create our ng-container:

<ng-container matColumnDef="state">
  <th mat-header-cell *matHeaderCellDef [attr.rowspan]="2">State</th>
  <td mat-cell *matCellDef="let data">State name here (e.g. {{data.state}})</td>
</ng-container>

<ng-container matColumnDef="company">
  <th mat-header-cell *matHeaderCellDef [attr.rowspan]="2">Utilities company</th>
  <td mat-cell *matCellDef="let data">Utilities company here</td>
</ng-container>

<ng-container matColumnDef="summer">
  <th mat-header-cell *matHeaderCellDef [attr.colspan]="3">Summer</th>
  <!-- This column doesn't generate <td> items, so no need to add a definition for them -->
</ng-container>

<ng-container matColumnDef="data1">
  <th mat-header-cell *matHeaderCellDef>Data 1</th>
  <td mat-cell *matCellDef="let data">{{data.yourFirstDataPoint}}</td>
</ng-container>

<ng-container matColumnDef="data2">
  <th mat-header-cell *matHeaderCellDef>Data 2</th>
  <td mat-cell *matCellDef="let data">{{data.yourSecondDataPoint}}</td>
</ng-container>

<ng-container matColumnDef="data3">
  <th mat-header-cell *matHeaderCellDef>Data 3</th>
  <td mat-cell *matCellDef="let data">{{data.yourThirdDataPoint}}</td>
</ng-container>

This creates the desired result for you. If you want, you can add mat-sort definitions to your columns, as well. I hope this makes sense, if not, let me know and I'll try to expand my answer.