[Table] Add a footer row (e.g. totals)

[Knoxvillekm]

Bug, feature request, or proposal:

feature reques

What is the expected behavior?

Add total row:

  <md-table [dataSource]="dataSource">

    <!-- Name Column -->
    <ng-container mdColumnDef="name">
      <md-header-cell *mdHeaderCellDef> Name </md-header-cell>
      <md-cell *mdCellDef="let row"> {{row.name}} </md-cell>
      <md-total-cell *mdTotalCellDef> Total </md-total-cell>
    </ng-container>

    <!-- Count Column -->
    <ng-container mdColumnDef="count">
      <md-header-cell *mdHeaderCellDef> Count </md-header-cell>
      <md-cell *mdCellDef="let row"> {{row.count}} </md-cell>
      <md-total-cell *mdTotalCellDef> {{dataSource.sumBy('count')}} </md-total-cell>
    </ng-container>

    <md-header-row *mdHeaderRowDef="displayedColumns"></md-header-row>
    <md-row *mdRowDef="let row; columns: displayedColumns;"></md-row>
    <md-total-row *mdTotalRowDef="displayedColumns"></md-total-row>
  </md-table>

Result:

Name       Count 
row 1       1        
row 2       2
Total       3

Or something like md-pagination.

  <md-table [dataSource]="dataSource">

    <!-- Name Column -->
    <ng-container mdColumnDef="name">
      <md-header-cell *mdHeaderCellDef> Name </md-header-cell>
      <md-cell *mdCellDef="let row"> {{row.name}} </md-cell>
    </ng-container>

    <!-- Count Column -->
    <ng-container mdColumnDef="count">
      <md-header-cell *mdHeaderCellDef> Count </md-header-cell>
      <md-cell *mdCellDef="let row"> {{row.count}} </md-cell>
    </ng-container>

    <md-header-row *mdHeaderRowDef="displayedColumns"></md-header-row>
    <md-row *mdRowDef="let row; columns: displayedColumns;"></md-row>
  </md-table>

  <md-table-total [dataSource]="dataSource">

    <!-- Name Column -->
    <ng-container mdColumnDef="name">
      <md-total-cell *mdTotalCellDef> Total </md-total-cell>
    </ng-container>

    <!-- Count Column -->
    <ng-container mdColumnDef="count">
      <md-total-cell *mdTotalCellDef> {{dataSource.sumBy('count')}} </md-total-cell>
    </ng-container>
  </md-table-total>

[willshowell]

See #6570

[jelbourn]

@andrewseguin it's probably worth talking about a more convenient shortcut for adding a summary row at some point

[andrewseguin]

To be clear - this is meant to be a sticky footer at the bottom rather than a "last row"?

[jelbourn]

I think so, but we should collect a few use-cases before committing to anything.

[andrewseguin]

Since the table itself doesn't have knowledge of its scrollable container (its just a repeat of rows), I wonder if this would be out of scope. We should definitely chat more about this (and the sections feature seems similar actually).

In the meantime, a solution to this would be to create a new table and append it right after the initial table. Hide the header row and keep the column IDs similar (to re-use any column-specific class styles you might have).

This way, the table can be its own scrollable and the footer could just append right after the scrolling container.

A separate data source should be provided since the data is unique.

Here's a proof of concept
https://plnkr.co/edit/vZz0ZuMII8Pudd0zMewC?p=preview

Unfortunately most browsers push content left when a scrollbar appears, so it's likely that the columns will be misaligned for most users :(

Edit: Reminds me of a simple solution for sticky headers as well =P

[willshowell]

I was making this to supplement #6570 (comment), but figure I'll add it here as an alternative solution in the mean-time,

https://stackblitz.com/edit/material2-beta12-fkcu2t

cc @Tempus35

[timwright35]

@willshowell Thanks!

[pantonis]

This is a very important feature for a datatable. Since datatables are used mostly for showing numeric tabular data, totals is a must feature.