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

问题

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

回答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

回答2:

If you want to use native-table features such as colspan and rowspan you will need to use:

<table mat-table>

  ...

</table>

Ref: Native table element tags

For example:

Ref: Serendipity CRM

回答3:

For your exemple try this

    <table mat-table [dataSource]="dataSource" multiTemplateDataRows>
  <ng-container matColumnDef="state">
            <th mat-header-cell *matHeaderCellDef rowspan="2">state</th>
        <td mat-cell *matCellDef="let company;let i = dataIndex" >alabama</td>
        </ng-container>
        <ng-container matColumnDef="utility">
            <th mat-header-cell *matHeaderCellDef rowspan="2">utility company</th>
        <td mat-cell *matCellDef="let company;let i = dataIndex" >company1</td>
        </ng-container>
        <ng-container matColumnDef="data1">
            <th mat-header-cell *matHeaderCellDef>{{'data1' | translate}}</th>
        <td mat-cell *matCellDef="let company;let i = dataIndex" >3.45</td>
        </ng-container>
        <ng-container matColumnDef="data2">
            <th mat-header-cell *matHeaderCellDef>{{'data2' | translate}}</th>
        <td mat-cell *matCellDef="let company;let i = dataIndex" >1.73</td>
        </ng-container>
        <ng-container matColumnDef="data3">
            <th mat-header-cell *matHeaderCellDef>{{'data3' | translate}}</th>
        <td mat-cell *matCellDef="let company;let i = dataIndex" >0.58</td>
        </ng-container>

        <ng-container matColumnDef="summer">
            <th mat-header-cell *matHeaderCellDef colspan="3">{{'summer period' | translate}}</th>
        <td mat-cell *matCellDef="let company;let i = dataIndex" ></td>
        </ng-container>

 <tr mat-row *matHeaderRowDef="['state','utility','data1','data2','data3']"></tr>
 <tr mat-row *matHeaderRowDef="['summer']"></tr>
 <tr mat-row *matRowDef="let element; columns:['state','utility','data1','data2','data3']"></tr>
</table>

I just reverse the order of the summer row because seem to not work this way

来源：https://stackoverflow.com/questions/55701270/how-colspan-and-row-span-added-to-material-table-header-angular-7

标签

angular-material

angular-material2

angular7

tableheader

mat-table