5

How to make headers like parent&children in Angular Material?

I wanna have smth like this: Name&(First Name, Last Name)

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.

Catalonec
  • 93
  • 1
  • 4

1 Answers1

5

Welcome to SO, Added 3 header group with col n row span Use 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>
Awais
  • 4,752
  • 4
  • 17
  • 40
  • this is not exactly what I wanted to get : https://ibb.co/VWKRBkf – Catalonec Feb 17 '20 at 08:19
  • i want to have 1 header row, but split up one header cell for 2 header rows : https://i.stack.imgur.com/usBvH.png – Catalonec Feb 17 '20 at 08:21
  • 1
    @Catalonec Sorry i cant understand, You need this right? https://i.stack.imgur.com/usBvH.png – Awais Feb 17 '20 at 08:52
  • yes. I need 1 header row, but one header cell must be divided on parent header(Name) and child headers(First Name & Last Name) – Catalonec Feb 17 '20 at 12:49
  • 2
    @Catalonec Got it updated my answer please have a look and do let me is it working or not – Awais Feb 17 '20 at 13:17
  • Thank you. It is exactly what i was looking for – Catalonec Feb 17 '20 at 16:21
  • 1
    @CATALONEC Glad that helps.. Cheers – Awais Feb 17 '20 at 17:49
  • 1
    @Awais in your example where you have name in the second group: I want to add subgroup name as grouped name which have two property name and new name and other field will be same. – app Dec 10 '20 at 18:35
  • 2
    @app Can you roughly explain that please like a simple sketch – Awais Dec 14 '20 at 08:32
  • I have tried your example and I was able to make changes.. thanks.. only issue is if i reduce the size last group is becoming smaller than other two.. please check this stackblitz https://stackblitz.com/edit/angular-bklajw-5foa62 – app Dec 14 '20 at 20:53
  • 2
    https://stackoverflow.com/questions/65296518/how-to-support-same-column-size-when-screen-size-reducing-in-mat-table – app Dec 14 '20 at 21:10
  • @Awais you can check above question – app Dec 14 '20 at 21:10
  • @app Thanks for clear explanation I have answered you question on above link, Please fell free to ping me if you got any issue on above post. – Awais Dec 15 '20 at 05:42
  • Is there a way to add sorting to this type of table? – WorldFam Dec 01 '22 at 10:43
  • @WorldFam I never tried that but I think yes just like we do in normal angular material table, plz check ref: https://www.angularjswiki.com/material/mat-table-sort/ , https://stackoverflow.com/questions/46893164/mat-table-sorting-demo-not-working – Awais Dec 05 '22 at 08:23
  • @Awais I don't think that would work as each column in mat sorting requires unique id – WorldFam Dec 06 '22 at 15:21
  • @WorldFam you can set ids on child column as we do just ignore the parent level as its for the UI purpose only. – Awais Dec 07 '22 at 08:28
  • @Awais That's a good idea, but then I will not able to sort subcolumns – WorldFam Dec 07 '22 at 13:36
  • @WorldFam can you please share the code on stackblitz, what you have achieved so far as a new stack overflow question please. – Awais Dec 12 '22 at 05:46