How to add mutiple header rows using angular material table

Question

Parameter 1: Time Period {{element.value}} Parameter 2: Gender {{element.gender}}

<ng-container matColumnDef="column3">
  <mat-header-cell *matHeaderCellDef rowspan="2"> Patients with Base Condition </mat-header-cell>
  <mat-cell *matCellDef="let element"> {{element.value}} </mat-cell>
</ng-container>

<ng-container matColumnDef="column4">
  <mat-header-cell *matHeaderCellDef> Patients with Outcome</mat-header-cell>
  <mat-cell *matCellDef="let element"> {{element.value}} </mat-cell>
</ng-container>

<ng-container matColumnDef="column5">
  <mat-header-cell *matHeaderCellDef class="ColumnDivider"> Prevelance </mat-header-cell>
  <mat-cell *matCellDef="let element" class="ColumnDivider"> {{element.value}} </mat-cell>
</ng-container>

<ng-container matColumnDef="column6">
  <mat-header-cell *matHeaderCellDef> Patients at Risk </mat-header-cell>
  <mat-cell *matCellDef="let element"> {{element.value}} </mat-cell>
</ng-container>

<ng-container matColumnDef="column7">
  <mat-header-cell *matHeaderCellDef> New Patients with Outcome </mat-header-cell>
  <mat-cell *matCellDef="let element"> {{element.value}} </mat-cell>
</ng-container>

<ng-container matColumnDef="column8">
  <mat-header-cell *matHeaderCellDef class="ColumnDivider"> Incidence Proportion </mat-header-cell>
  <mat-cell *matCellDef="let element" class="ColumnDivider"> {{element.value}} </mat-cell>
</ng-container>

<ng-container matColumnDef="column8">
  <mat-header-cell *matHeaderCellDef> Total Patient Years at Risk </mat-header-cell>
  <mat-cell *matCellDef="let element"> {{element.value}} </mat-cell>
</ng-container>

<ng-container matColumnDef="column10">
  <mat-header-cell *matHeaderCellDef class="myMarginLeft"> New Patients with Outcome </mat-header-cell>
  <mat-cell *matCellDef="let element" class="myMarginLeft"> {{element.value}} </mat-cell>
</ng-container>

<ng-container matColumnDef="column11">
  <mat-header-cell *matHeaderCellDef >Incidence Rate </mat-header-cell>
  <mat-cell *matCellDef="let element"> {{element.value}} </mat-cell>
</ng-container>

<ng-container *matHeaderRowDef="displayedColumns">
  <div class="mat-header-row header-group-row">
    <div class="mat-header-cell" role="columnheader"></div>
    <div class="mat-header-cell" role="columnheader"></div>
  </div>
  <mat-header-row></mat-header-row>
</ng-container>
<mat-row *matRowDef="let row; columns: displayedColumns;" (click)="getRecord(row)" [ngClass]="{'highlight': selectedRowIndex == row.inp_analysis_name}"></mat-row>

Multiple columns with a single column.

here you can find official example for mat-table with multiple headers. — ysf
– ysf, Commented Jun 23, 2019 at 18:50
Since I am using angular 5 it doesn't work using the above mentioned solution. — v3nu
– v3nu, Commented Jun 24, 2019 at 8:51

Renjith P N · Accepted Answer · 2020-10-27 01:13:04Z

21

An example of re-creating multiple header rows and cell grouping using colspan.

https://stackblitz.com/edit/angular-bklajw?file=app%2Ftable-basic-example.html

answered Oct 27, 2020 at 1:13

Renjith P N

4,3415 gold badges34 silver badges44 bronze badges

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

5 Comments

app Over a year ago

How we can subgroup in the second group again? Like thirdgroup which have weight and symbol while forth group have some other parameter like height?

Bigeyes Over a year ago

I got [style.text-align]="center" not found error in Angular 11.

nikhil kekan Over a year ago

how to add third header lets say "group" which is grouping of "First Group" and "Secoind Group"?

nikhil kekan Over a year ago

i am not able to do something like ` <tr mat-header-row *matHeaderRowDef="big-header-group"></tr> <tr mat-header-row *matHeaderRowDef="['header-row-first-group', 'header-row-second-group']"></tr> <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>`

nonozor Over a year ago

[attr.colspan] doesn't work for me

harryharryharry · Accepted Answer · 2024-02-12 12:48:50Z

The official solution was not useful for me because I needed the secondary header row to span all columns (this way I can use a separate component using content projection)

My solution is to create a SecondaryHeaderComponent which extends from CdkHeaderRow:

@Component({
   selector: 'mat-secondary-header-row',
   standalone: true,
   template: `<ng-content></ng-content>`
})
export class SecondaryHeaderComponent extends CdkHeaderRow {}

Which can then be used like this (for example beneath the mat-header-row element):

<mat-secondary-header-row *matHeaderRowDef="[]; sticky: true">
   <p>2nd header row content!</p>
</mat-secondary-header-row>

One quirk I came across is that the table contents are still visible beneath the (sticky) secondary header row.

Collectives™ on Stack Overflow

How to add mutiple header rows using angular material table

2 Answers 2

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related