angular / components

Component infrastructure and Material Design components for Angular
https://material.angular.io
MIT License
24.35k stars 6.74k forks source link

[Table] Multiple footers/headers with different data #12287

Open timwright35 opened 6 years ago

timwright35 commented 6 years ago

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 commented 6 years ago

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 commented 5 years ago

I need that

MkFelipe commented 5 years ago

I need that too!

IvanCreatio commented 5 years ago

I have the same problem

therawk commented 5 years ago

Has anyone found a workaround?

ethanke commented 5 years ago

Facing the same issue

jlabanca commented 5 years ago

Also having this issue

nani2ratna commented 4 years ago

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

xsip commented 4 years ago

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 commented 3 years ago

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 commented 3 years ago

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