How to make headers like parent&children in Angular Material?
I wanna have smth like this:
I found only this example: https://stackblitz.com/edit/angular-bklajw?file=app%2Ftable-basic-example.html
But I dont need 2 rows of headers.
Add a comment
|
1 Answer
Welcome to SO, Added 3 header group with
colnrowspanUse below HTMl in above stack-blitz code to see result
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
<!--- Note that these columns can be defined in any order.
The actual rendered columns are set as a property on the row definition" -->
<!-- Position Column -->
<ng-container matColumnDef="position">
<th [ngStyle]="{'display': 'none'}" mat-header-cell *matHeaderCellDef [attr.rowspan]="2"> 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 [attr.rowspan]="2" mat-header-cell *matHeaderCellDef [ngStyle]="{'display': 'none'}"> Symbol </th>
<td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
</ng-container>
<!-- Header row first group -->
<ng-container matColumnDef="header-row-first-group">
<th mat-header-cell *matHeaderCellDef
[style.text-align]="center"
[attr.rowspan]="2">
No
</th>
</ng-container>
<ng-container matColumnDef="header-row-sec-group">
<th mat-header-cell *matHeaderCellDef
[style.text-align]="center"
[attr.colspan]="2">
Name
</th>
</ng-container>
<ng-container matColumnDef="header-row-third-group">
<th mat-header-cell *matHeaderCellDef
[style.text-align]="center"
[attr.rowspan]="2" >
Role
</th>
</ng-container>
<tr mat-header-row *matHeaderRowDef="['header-row-first-group','header-row-sec-group','header-row-third-group']"></tr>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
19 Comments
Awais
@Catalonec Sorry i cant understand, You need this right? i.sstatic.net/usBvH.png
Awais
@Catalonec Got it updated my answer please have a look and do let me is it working or not
Awais
@CATALONEC Glad that helps.. Cheers
Awais
@app Can you roughly explain that please like a simple sketch
|