Comment colSpan et row Span ont été ajoutés à l'en-tête de la table des matières Angular 7?

Question

J'essaie d'ajouter rowSpan and colSpan dans Angular material Table header. Quelqu'un peut-il m'aider à y parvenir?.

Ci-dessous se trouve l'en-tête attaché que je veux obtenir en utilisant le tableau des matériaux

Answer 1

Pour votre exemple essayez ceci

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

Je viens d'inverser l'ordre de la rangée d'été parce que ça ne marche pas comme ça