Adding Colspan to mat-table header

Question

I want to add a colspan to a mat-table mat-header.

Current Link: https://stackblitz.com/edit/angular-bklajw-mwqqvl?file=app/table-basic-example.html

I couldn't find any other example where one mat-header-cell is used with multiple mat-cell

Desired output:

Totati · Accepted Answer · 2021-10-11 12:35:46Z

2

you don't have to use the same array for the columns and the header columns. Use two different arrays :)

displayedHeaderColumns: string[] = ['name', 'weight'];
displayedColumns: string[] = ['name', 'weight', 'symbol'];

Now in your template you can use displayedHeaderColumns for the headerColumns

<ng-container matColumnDef="weight">
  <th mat-header-cell colspan="2" *matHeaderCellDef>Properties</th>
  <td mat-cell *matCellDef="let element">{{element.weight}}</td>
</ng-container>

<ng-container matColumnDef="symbol">
  <td mat-cell *matCellDef="let element">{{element.symbol}}</td>
</ng-container>

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

Notice the colspan attribute on the weight column.

Here you can see the running different header columns for a matTable example.

edited Oct 11, 2021 at 12:35

answered Oct 10, 2021 at 12:05

Totati

1,62214 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Eliseo Over a year ago

you has a type error in your stackblitz -you use in your ts "displazedHeaderColumns" and hould be "displayedHeaderColumns" (see that the "z" should be a "y")

Collectives™ on Stack Overflow

Adding Colspan to mat-table header

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related