md-table footer row

1,250 views

Skip to first unread message

BEAUFORT Stéphane

unread,

Aug 4, 2017, 4:25:17 AM8/4/17

to angular-material2

Hello,

I am surprised to find no example of md-table footer where one displays some totals.

How would you do that ?

       column 1  column 2

1          12          1         
2           1          0         
3           6          2         

total      19           3

<div class="data-table-container mat-elevation-z2">
    <md-table #table [dataSource]="dataSource" class="data-table"> 

        <md-header-row *cdkHeaderRowDef="displayedColumns" class="data-header-row"></md-header-row>
        <md-row *cdkRowDef="let row; columns: displayedColumns;" class="data-row"></md-row>
        <md-header-row *cdkHeaderRowDef="displayedColumns" class="data-header-row"></md-header-row>

        <ng-container cdkColumnDef="column1">
            <md-header-cell *cdkHeaderCellDef class="data-header-cell">Column 1</md-header-cell>
            <md-cell *cdkCellDef="let row" class="data-cell"> {{row.column1}}</md-cell>
        </ng-container>

        <ng-container cdkColumnDef="column2">
            <md-header-cell *cdkHeaderCellDef class="data-header-cell">Column 2</md-header-cell>
            <md-cell *cdkCellDef="let row" class="data-cell"> {{row.column2}}</md-cell>
        </ng-container>

    </md-table>

</div>

Stephane BEAUFORT

unread,

Aug 21, 2017, 9:43:06 AM8/21/17

to angular-material2

My temporary solution :

<div class="data-table-container mat-elevation-z2">
    <md-table #table [dataSource]="dataSource" class="data-table"> 

        <md-header-row *cdkHeaderRowDef="displayedColumns" class="data-header-row"></md-header-row>
        <md-row *cdkRowDef="let row; columns: displayedColumns;" class="data-row"></md-row>
        <md-header-row *cdkHeaderRowDef="displayedColumns" class="data-header-row"></md-header-row>

        <ng-container cdkColumnDef="column1">
            <md-header-cell *cdkHeaderCellDef class="data-header-cell">Column 1</md-header-cell>
            <md-cell *cdkCellDef="let row" class="data-cell"> {{row.column1}}</md-cell>
        </ng-container>

        <ng-container cdkColumnDef="column2">
            <md-header-cell *cdkHeaderCellDef class="data-header-cell">Column 2</md-header-cell>
            <md-cell *cdkCellDef="let row" class="data-cell"> {{row.column2}}</md-cell>
        </ng-container>

    </md-table>

    <div class="data-table-header-row mat-header-row" role="row">


        <div class="data-table-header-cell mat-header-cell cdk-column-column1 mat-column-column1" role="columnheader" >
            {{this.column1Sum$ |async}}
        </div>

        <div class="data-table-header-cell mat-header-cell cdk-column-column2 mat-column-column2" role="columnheader" >
            {{this.column2Sum$ |async}}
        </div>    

    </div>


</div>