[Table] Multiple footers/headers with different data

[timwright35]

Bug, feature request, or proposal:

Feature Request

What is the expected behavior?

To be able to make a second footer/header in which I can use the same columns but different data for the cells then the other footer/header

What is the current behavior?

Currently you can have multiple mat-footer-rows on a table but it has to have matColumnDefs for each one. IE let's say I have a second footer row that I want to go into the same columns that are setup but with different data. The only way I can see to do this is to make a new array of columns, send that into that footerDef and make the matColumnDefs for those.

What are the steps to reproduce?

https://stackblitz.com/edit/angular-tcdbaj

What is the use-case or motivation for changing an existing behavior?

The use case is to have multiple footers or headers that have different data, about that column

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular 6.0.9, Newest Material, etc

Is there anything else we should know?

[nickwinger]

We also need that, why there is no reaction ? And why everything is always half baked. There comes footers but no ability to pass data. Why this is not working: (like with normal rows) <ng-container *ngFor="let footerRow of footerRows"> <tr mat-footer-row *matFooterRowDef="let footerRow; columns:getDisplayedFooterColumns()"></tr> </ng-container>

<td mat-footer-cell *matFooterCellDef="let element"> {{element[i]}} <!-- have acces to the passed data --> </td>

[AyhamNasser]

I need that

[MkFelipe]

I need that too!

[IvanCreatio]

I have the same problem

[therawk]

Has anyone found a workaround?

[ethanke]

Facing the same issue

[jlabanca]

Also having this issue

[nani2ratna]

I need this to add multiple footer with having different number of columns

[xsip]

One ugly, but working solution I found, is to define multiple cells dynamically as shown in the Example below:

<ng-container *ngFor="let footerEntry of footerData; let footerEntryIndex = index">
    <ng-container matColumnDef="column1-{{footerEntryIndex}}">
        <mat-footer-cell *matFooterCellDef>
            <span>{{ footerEntry.footerEntryProp}}</span>
        </mat-footer-cell>
    </ng-container>

    <ng-container matColumnDef="column2-{{footerEntryIndex}}">
        <mat-footer-cell *matFooterCellDef>
            <span> {{ footerEntry.footerEntryProp2}}</span>
        </mat-footer-cell>
    </ng-container>
</ng-container>

You can then render all of your footer data as shown in this snippet:

<ng-container *ngFor="let footerEntry of footerData; let footerEntryIndex = index">
      <mat-footer-row *matFooterRowDef="['column1-'+footerEntryIndex, 'column2-'+footerEntryIndex]; sticky: true"  ></mat-footer-row>
</ng-container>

hope that someone can use this workaround.

[BobDankert]

I had this same need (multiple footer rows), and solved it similar to the above comment. I modified the Angular Material example table footer code to show this in use, in case it helps anyone: https://stackblitz.com/edit/angular-ztyat1?file=src/app/table-footer-row-example.html

[dsbert]

Related to https://github.com/angular/components/pull/11245 https://github.com/angular/components/issues/5997