[Table] Allow multiple header rows

[Maximaximum]

Bug, feature request, or proposal:

It would be great if you could add possibility to have multiple header rows in an md-table.

What is the expected behavior?

The output table should have multiple header rows, it should look something like this: http://www.jqueryscript.net/images/Minimal-jQuery-Plugin-For-Fix-Positioned-Table-Header-thscroll.jpg

(The image is not mine, I just googled it)

What is the current behavior?

As far as I have found, it is possible to define and have only one header row in an md-table.

What are the steps to reproduce?

Providing a Plunker (or similar) is the best way to get the team to see your issue.
Plunker template: https://goo.gl/DlHd6U

[ridj87]

I'm sorry but is this implemented and can I actually see an example of how to create irregular headers?
I've checked the referenced issue/proposals but they circle back to each other and are both closed.

Can anyone point me in the right direction? Thanks!

[Maximaximum]

@ridj87 Seems like the other issue has been closed in favor of this one, so you should follow this issue.

[finalxcode]

+1 how to achieve pivot grid use md-table?

[mmacfadden]

I also have a need for this use case. colspan / rowspan type behavior is required for many table use cases.

[Bsujeet]

Is there any update for this issue

[dhniels]

Bumping this. @mmacfadden is right about colspan and rowspan behavior (without changing mat-table to display:table)

[shlomiassaf]

I would like to propose a solution to solve this issue and help solving other issues:

• Allow multiple header rows
• Add a colspan input for columns [Table] Add a colspan input for columns #5888
• Create helper for sticky positioning Create helper for sticky positioning #474

The basic concept is to allow multiple mat-header-row in a table, rendering them at the order they are defined.

<div class="example-container mat-elevation-z8">
  <div class="example-header">
    <mat-form-field>
      <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
    </mat-form-field>
  </div>

  <mat-table #table [dataSource]="dataSource">

    <!-- Position Column -->
    <ng-container matColumnDef="position">
      <mat-header-cell *matHeaderCellDef> No. </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.position}} </mat-cell>
    </ng-container>

    <!-- Name Column -->
    <ng-container matColumnDef="name">
      <mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.name}} </mat-cell>
    </ng-container>

    <!-- Weight Column -->
    <ng-container matColumnDef="weight">
      <mat-header-cell *matHeaderCellDef> Weight </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.weight}} </mat-cell>
    </ng-container>

    <!-- Symbol Column -->
    <ng-container matColumnDef="symbol">
      <mat-header-cell *matHeaderCellDef> Symbol </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.symbol}} </mat-cell>
    </ng-container>

    <!-- Group1 Column --> // The header template for the GROUP!
    <ng-container matColumnDef="group1">
      <mat-header-cell *matHeaderCellDef> Name & Weight </mat-header-cell>
    </ng-container>

   // the row for groups
    <mat-header-row *matHeaderRowDef="['group1']"></mat-header-row>
    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
  </mat-table>
</div>

Now, this will not work as is because we need to specify offset's and spans, if we can do so in the template it will work.

The span and offset should be defined in mat-header-cell, in the example above we need to specify a colspan of 2 for our group (as it groups 2 columns). The table will give it flex: 2.

This format is also good for stick headers, we can specify the header row that we want to stick, so if we have multiple header rows we can stick the last one only, the middle, etc...

Of course, the use can opt-in to fixed sizing by specifying a class or setting the style directly.

Note that this is a concept, the actual implementation might require a new directive for the column definition (instead of matColumnDef)

Cons

One issue with this approach is that it does not express the structure, i.e. a group does not "contain" it's children... it is not really a group in the structural sense... The good thing here is freedom, we are not bound to the concept of "groups" so we can do almost anything... not just groupping.

cc @jelbourn @mmalerba

[shlomiassaf]

UPDATE: It is doable with current features:

Good news, I was able to implement multiple rows and column spanning without much effort.

In a nut shell:

Replace the default way of setting a row header:

<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>

with this:

    <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 header-group" role="columnheader" style="flex: 2">Group1</div>
        <div class="mat-header-cell" role="columnheader"></div>
      </div>
      <mat-header-row></mat-header-row>
    </ng-container>

And some CSS:

.mat-header-cell, .mat-cell {
  padding: 0 10px; 
}

.header-group-row {
  border: none;
  align-items: stretch;
}
.header-group {
    display: flex;
    align-items: center;
    border-right: 1px solid rgba(0, 0, 0, 0.12);
    border-left: 1px solid rgba(0, 0, 0, 0.12);
}

And get this:

This manual approach shows how it can be done, for here we can build a custom component to build the group elements for us, calculating the spans...

For more details and notes see this example

From here, most features can be implemented, by the team or as 3rd party packages. It's just components... Things like drag&drop, grouping and what not.

It shows the power of this table, bummer one must fully understand how it works to do this things

[ksaikiranr]

@shlomiassaf please can to tell me how to achieve this type of header?

[BramMusters]

@shlomiassaf
I am not getting your behavior since the upper row with groupings are not mat-header-row and mat-header-cell elements but div's with mat-header-row and mat-header-cell as classes.
The default CSS is styling the elements. Is there a way to accomplish your behavior without adding more CSS than needed?

[prameshbajra]

@ksaikiranr Did you figure out a way to do that structure in the image? If so please share the code if possible. Would be a great help. Thanks.

[andrewseguin]

@ksaikiranr @prameshbajra Here's a very trivial example of re-creating that type of header cell grouping by using multiple header rows and colspan

https://stackblitz.com/edit/angular-bklajw?file=app/table-basic-example.css

[nikme]

@ksaikiranr @prameshbajra Here's a very trivial example of re-creating that type of header cell grouping by using multiple header rows and colspan

https://stackblitz.com/edit/angular-bklajw?file=app/table-basic-example.css

THANK YOU!

[AndersonIctus]

@ksaikiranr @prameshbajra Here's a very trivial example of re-creating that type of header cell grouping by using multiple header rows and colspan

https://stackblitz.com/edit/angular-bklajw?file=app/table-basic-example.css

it was very useful ... thanks !!! 0/

[satdevmaster]

@ksaikiranr @prameshbajra Here's a very trivial example of re-creating that type of header cell grouping by using multiple header rows and colspan

https://stackblitz.com/edit/angular-bklajw?file=app/table-basic-example.css

Thanks. It is also working on production version? not working for me. Only working on dev version.

[am-awais]

@andrewseguin It work like a charm now can you guide me how to fixed multiple header with position sticky in this case?
and also i need 2 columns fixed as well

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}