feat(paginator): Add functionality to jump to first and last page

Add two buttons which allow you to jump to the first and last page.
Hidden by default and can be toggled with showHideFirstButtons

Fixes #9278

Author: lharries

src/demo-app/table/table-demo.html

@@ -172,6 +172,61 @@ <h3>MatTable Example</h3>
   </mat-paginator>
 </div>
 
+<h3>MatTable with First/Last Buttons Example</h3>
+
+<div class="demo-table-container demo-mat-table-example mat-elevation-z4">
+
+  <table-header-demo (shiftColumns)="displayedColumns.push(displayedColumns.shift())"
+                     (toggleColorColumn)="toggleColorColumn()">
+  </table-header-demo>
+
+  <mat-table [dataSource]="dataSource" [trackBy]="userTrackBy">
+
+    <!-- Column Definition: ID -->
+    <ng-container cdkColumnDef="userId">
+      <mat-header-cell *matHeaderCellDef> ID </mat-header-cell>
+      <mat-cell *matCellDef="let row"> {{row.id}} </mat-cell>
+    </ng-container>
+
+    <!-- Column Definition: Progress -->
+    <ng-container matColumnDef="progress">
+      <mat-header-cell *matHeaderCellDef> Progress </mat-header-cell>
+      <mat-cell *matCellDef="let row">
+        <div class="demo-progress-stat">{{row.progress}}%</div>
+        <div class="demo-progress-indicator-container">
+          <div class="demo-progress-indicator"
+               [style.background]="row.progress > 50 ? 'green' : 'red'"
+               [style.opacity]="getOpacity(row.progress)"
+               [style.width.%]="row.progress"></div>
+        </div>
+      </mat-cell>
+    </ng-container>
+
+    <!-- Column Definition: Name -->
+    <ng-container matColumnDef="userName">
+      <mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
+      <mat-cell *matCellDef="let row"> {{row.name}} </mat-cell>
+    </ng-container>
+
+    <!-- Column Definition: Color -->
+    <ng-container matColumnDef="color">
+      <mat-header-cell *matHeaderCellDef>Color</mat-header-cell>
+      <mat-cell *matCellDef="let row" [style.color]="row.color"> {{row.color}} </mat-cell>
+    </ng-container>
+
+    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+    <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
+
+  </mat-table>
+
+  <mat-paginator #paginator
+                [length]="_peopleDatabase.data.length"
+                [pageSize]="10"
+                [pageSizeOptions]="[5, 10, 25, 100]"
+                [showFirstLastButtons]="true">
+  </mat-paginator>
+</div>
+
 <mat-card class="demo-table-card">
   <h3> MatTable Using 'When' Rows for Interactive Details</h3>
 

src/lib/paginator/_paginator-theme.scss

@@ -16,15 +16,22 @@
     color: mat-color($foreground, secondary-text);
   }
 
-  .mat-paginator-increment,
-  .mat-paginator-decrement {
+  .mat-paginator-decrement,
+  .mat-paginator-increment {
     border-top: 2px solid mat-color($foreground, 'icon');
     border-right: 2px solid mat-color($foreground, 'icon');
   }
 
+  .mat-paginator-first,
+  .mat-paginator-last {
+    border-top: 2px solid mat-color($foreground, 'icon');
+  }
+
   .mat-icon-button[disabled] {
+    .mat-paginator-decrement,
     .mat-paginator-increment,
-    .mat-paginator-decrement {
+    .mat-paginator-first,
+    .mat-paginator-last {
       border-color: mat-color($foreground, 'disabled');
     }
   }

src/lib/paginator/paginator-intl.ts

@@ -30,6 +30,12 @@ export class MatPaginatorIntl {
   /** A label for the button that decrements the current page. */
   previousPageLabel: string = 'Previous page';
 
+  /** A label for the button that moves to the first page. */
+  firstPageLabel: string = 'First page';
+
+  /** A label for the button that moves to the last page. */
+  lastPageLabel: string = 'Last page';
+
   /** A label for the range of items within the current page and the length of the whole list. */
   getRangeLabel = (page: number, pageSize: number, length: number) => {
     if (length == 0 || pageSize == 0) { return `0 of ${length}`; }

src/lib/paginator/paginator.html

@@ -25,14 +25,25 @@
       {{_intl.getRangeLabel(pageIndex, pageSize, length)}}
     </div>
 
+    <button mat-icon-button type="button"
+            class="mat-paginator-navigation-first"
+            (click)="firstPage()"
+            [attr.aria-label]="_intl.firstPageLabel"
+            [matTooltip]="_intl.firstPageLabel"
+            [matTooltipPosition]="'above'"
+            [disabled]="!hasPreviousPage()"
+            *ngIf="showFirstLastButtons">
+            <div class="mat-paginator-first"></div>
+            <div class="mat-paginator-decrement"></div>
+    </button>
     <button mat-icon-button type="button"
             class="mat-paginator-navigation-previous"
             (click)="previousPage()"
             [attr.aria-label]="_intl.previousPageLabel"
             [matTooltip]="_intl.previousPageLabel"
             [matTooltipPosition]="'above'"
             [disabled]="!hasPreviousPage()">
-      <div class="mat-paginator-increment"></div>
+      <div class="mat-paginator-decrement"></div>
     </button>
     <button mat-icon-button type="button"
             class="mat-paginator-navigation-next"
@@ -41,7 +52,18 @@
             [matTooltip]="_intl.nextPageLabel"
             [matTooltipPosition]="'above'"
             [disabled]="!hasNextPage()">
-      <div class="mat-paginator-decrement"></div>
+      <div class="mat-paginator-increment"></div>
+    </button>
+    <button mat-icon-button type="button"
+            class="mat-paginator-navigation-last"
+            (click)="lastPage()"
+            [attr.aria-label]="_intl.lastPageLabel"
+            [matTooltip]="_intl.lastPageLabel"
+            [matTooltipPosition]="'above'"
+            [disabled]="!hasNextPage()"
+            *ngIf="showFirstLastButtons">
+      <div class="mat-paginator-increment"></div>
+      <div class="mat-paginator-last"></div>
     </button>
   </div>
 </div>

src/lib/paginator/paginator.md

@@ -26,4 +26,4 @@ This will allow you to change the following:
  3. The tooltip messages on the navigation buttons.
 
 ### Accessibility
-The `aria-label`s for next page and previous page buttons can be set in `MatPaginatorIntl`.
+The `aria-label`s for next page, previous page, first page and last page buttons can be set in `MatPaginatorIntl`.

src/lib/paginator/paginator.scss

@@ -15,8 +15,18 @@ $mat-paginator-button-margin: 8px;
 $mat-paginator-button-icon-height: 8px;
 $mat-paginator-button-icon-width: 8px;
 
-$mat-paginator-button-decrement-icon-margin: 12px;
-$mat-paginator-button-increment-icon-margin: 16px;
+$mat-paginator-button-increment-icon-margin: 12px;
+$mat-paginator-button-decrement-icon-margin: 16px;
+
+$mat-paginator-button-first-last-icon-width: 14px;
+
+$mat-paginator-button-first-icon-margin: 3px;
+$mat-paginator-button-last-icon-margin: 15px;
+
+
+$mat-paginator-button-first-decrement-icon-margin: 21px;
+$mat-paginator-button-last-increment-icon-margin: 9px;
+
 
 .mat-paginator {
   display: block;
@@ -50,43 +60,71 @@ $mat-paginator-button-increment-icon-margin: 16px;
   margin: $mat-paginator-range-label-margin;
 }
 
-.mat-paginator-increment-button + .mat-paginator-increment-button {
+.mat-paginator-decrement-button + .mat-paginator-decrement-button {
   margin: 0 0 0 $mat-paginator-button-margin;
 
   [dir='rtl'] & {
     margin: 0 $mat-paginator-button-margin 0 0;
   }
 }
 
-.mat-paginator-increment,
-.mat-paginator-decrement {
+.mat-paginator-decrement,
+.mat-paginator-increment {
   width: $mat-paginator-button-icon-width;
   height: $mat-paginator-button-icon-height;
 }
 
-.mat-paginator-decrement,
-[dir='rtl'] .mat-paginator-increment {
-  transform: rotate(45deg);
-}
 .mat-paginator-increment,
 [dir='rtl'] .mat-paginator-decrement {
+  transform: rotate(45deg);
+}
+.mat-paginator-decrement,
+[dir='rtl'] .mat-paginator-increment {
   transform: rotate(225deg);
 }
 
+.mat-paginator-increment {
+  margin-left: $mat-paginator-button-increment-icon-margin;
+  [dir='rtl'] & {
+    margin-right: $mat-paginator-button-increment-icon-margin;
+  }
+}
+
 .mat-paginator-decrement {
   margin-left: $mat-paginator-button-decrement-icon-margin;
   [dir='rtl'] & {
     margin-right: $mat-paginator-button-decrement-icon-margin;
   }
 }
 
-.mat-paginator-increment {
-  margin-left: $mat-paginator-button-increment-icon-margin;
-  [dir='rtl'] & {
-    margin-right: $mat-paginator-button-increment-icon-margin;
+.mat-paginator-first {
+  transform: rotate(90deg);
+  width: $mat-paginator-button-first-last-icon-width;
+  height: $mat-paginator-button-icon-height;
+  float:left;
+  margin-left: $mat-paginator-button-first-icon-margin;
+}
+
+.mat-paginator-navigation-first {
+  .mat-paginator-decrement {
+    margin-left: $mat-paginator-button-first-decrement-icon-margin;
   }
 }
 
+.mat-paginator-navigation-last {
+  .mat-paginator-increment {
+    float: left;
+    margin-left: $mat-paginator-button-last-increment-icon-margin;
+  }
+}
+
+.mat-paginator-last {
+  transform: rotate(90deg);
+  width: $mat-paginator-button-first-last-icon-width;
+  height: $mat-paginator-button-icon-height;
+  margin-left: $mat-paginator-button-last-icon-margin;
+}
+
 .mat-paginator-range-actions {
   display: flex;
   align-items: center;