chore(table): clean up demo pages (#10669)

* chore(table): clean up demo pages

* fix errors

* update row contexts

* fix imports

* fix aot

Author: andrewseguin

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

@@ -1,7 +1,7 @@
 <mat-card>
   <h3> MatTable with Simple Columns </h3>
 
-  <mat-table [dataSource]="simpleTableDataSource"
+  <table mat-table [dataSource]="simpleTableDataSource"
              matSort #simpleTableSort="matSort">
     <!-- Basic column: name is used for header label AND data property -->
     <simple-column name="name" sortable></simple-column>
@@ -13,9 +13,9 @@ <h3> MatTable with Simple Columns </h3>
     <!-- Name doesn't match desired header text; define a custom label -->
     <simple-column name="symbol" label="SYMBOL!"></simple-column>
 
-    <mat-header-row *matHeaderRowDef="columnsToDisplay"></mat-header-row>
-    <mat-row *matRowDef="let data; columns: columnsToDisplay;"></mat-row>
-  </mat-table>
+    <tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
+    <tr mat-row *matRowDef="let data; columns: columnsToDisplay;"></tr>
+  </table>
 </mat-card>
 
 
@@ -27,14 +27,14 @@ <h3> Wrapper Table </h3>
                  matSort #wrapperTableSort="matSort">
     <!-- Name (normal column) -->
     <ng-container matColumnDef="name">
-      <mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
-      <mat-cell *matCellDef="let element"> {{element.name}} </mat-cell>
+      <th mat-header-cell *matHeaderCellDef> Name </th>
+      <td mat-cell *matCellDef="let element"> {{element.name}} </td>
     </ng-container>
 
     <!-- Position (simple column) -->
     <simple-column name="position"></simple-column>
 
-    <mat-header-row *matHeaderRowDef="columnsToDisplay"></mat-header-row>
-    <mat-row *matRowDef="let row; columns: columnsToDisplay; "></mat-row>
+    <tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
+    <tr mat-row *matRowDef="let row; columns: columnsToDisplay; "></tr>
   </wrapper-table>
 </mat-card>

src/demo-app/table/custom-table/custom-table.scss

@@ -1,8 +1,9 @@
-.mat-table {
-  height: 300px;
-  overflow: auto;
+.mat-table, wrapper-table {
+  width: 100%;
 }
 
 .mat-card {
   margin: 8px 0;
+  height: 300px;
+  overflow: auto;
 }

src/demo-app/table/custom-table/simple-column.ts

@@ -27,13 +27,8 @@ import {MatColumnDef, MatTable} from '@angular/material';
   selector: 'simple-column',
   template: `
     <ng-container matColumnDef>
-      <mat-header-cell *matHeaderCellDef mat-sort-header>
-        {{label || name}}
-      </mat-header-cell>
-
-      <mat-cell *matCellDef="let data">
-        {{getData(data)}}
-      </mat-cell>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{label || name}} </th>
+      <td mat-cell *matCellDef="let data"> {{getData(data)}}</td>
     </ng-container>
   `,
   host: {

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

@@ -1,15 +1,15 @@
-<mat-table [dataSource]="dataSource">
+<table mat-table [dataSource]="dataSource">
   <ng-content></ng-content>
 
   <!-- Weight Column -->
   <ng-container matColumnDef="weight">
-    <mat-header-cell *matHeaderCellDef mat-sort-header> Weight </mat-header-cell>
-    <mat-cell *matCellDef="let element"> {{element.weight}} </mat-cell>
+    <th mat-header-cell *matHeaderCellDef mat-sort-header> Weight </th>
+    <td mat-cell *matCellDef="let element"> {{element.weight}} </td>
   </ng-container>
 
   <!-- Color Column -->
   <ng-container matColumnDef="symbol">
-    <mat-header-cell *matHeaderCellDef> Symbol </mat-header-cell>
-    <mat-cell *matCellDef="let element"> {{element.symbol}} </mat-cell>
+    <th mat-header-cell *matHeaderCellDef> Symbol </th>
+    <td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
   </ng-container>
-</mat-table>
+</table>

src/demo-app/table/custom-table/wrapper-table.ts

@@ -17,9 +17,13 @@ import {SimpleColumn} from './simple-column';
   selector: 'wrapper-table',
   templateUrl: 'wrapper-table.html',
   styles: [`
+    :host {
+      display: block;
+      width: 100%;
+    }
+
     .mat-table {
-      height: 300px;
-      overflow: auto;
+      width: 100%;
     }
   `]
 })

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

@@ -9,9 +9,10 @@
 
 <div class="demo-actions">
   <strong>Data Changes: </strong>
-  <button mat-raised-button (click)="addRow()">Add Row</button>
-  <button mat-raised-button (click)="removeRow()">Remove Row</button>
-  <button mat-raised-button (click)="reassignDataClone()">Clone Data</button>
+  <button mat-raised-button (click)="addRow()"> Add Row </button>
+  <button mat-raised-button (click)="removeRow()"> Remove Row </button>
+  <button mat-raised-button (click)="reassignDataClone()"> Clone Data </button>
+  <button mat-raised-button (click)="shuffle()"> Shuffle </button>
 </div>
 
 <div class="demo-actions">
@@ -20,32 +21,32 @@
   <button mat-raised-button (click)="this.removeDataSource()">Remove Data Source</button>
 </div>
 
-<mat-card>
-  <h3> CdkTable </h3>
-
-  <cdk-table #cdkTable [dataSource]="dataSourceInput">
-    <!-- Name (normal column) -->
-    <ng-container [cdkColumnDef]="column" *ngFor="let column of columnsToDisplay">
-      <cdk-header-cell *cdkHeaderCellDef> {{column}} </cdk-header-cell>
-      <cdk-cell *cdkCellDef="let element"> {{element[column]}} </cdk-cell>
-    </ng-container>
+<div class="demo-actions">
+  <button mat-raised-button (click)="highlightFirstRow()"> Highlight first row </button>
+</div>
 
-    <cdk-header-row *cdkHeaderRowDef="columnsToDisplay"></cdk-header-row>
-    <cdk-row *cdkRowDef="let data; columns: columnsToDisplay;"></cdk-row>
-  </cdk-table>
-</mat-card>
+<div class="demo-actions">
+  <div class="demo-track-by-select">
+    <div class="demo-track-by-label">Track By</div>
+    <mat-radio-group [(ngModel)]="trackByStrategy">
+      <mat-radio-button [value]="'reference'"> Reference </mat-radio-button>
+      <mat-radio-button [value]="'position'"> Position </mat-radio-button>
+      <mat-radio-button [value]="'index'"> Index </mat-radio-button>
+    </mat-radio-group>
+  </div>
+</div>
 
 <mat-card>
-  <h3> MatTable </h3>
+  <h3> CdkTable </h3>
 
-  <mat-table #matTable [dataSource]="dataSourceInput">
+  <table cdk-table #cdkTable [dataSource]="dataSource" [trackBy]="trackBy">
     <!-- Name (normal column) -->
-    <ng-container [matColumnDef]="column" *ngFor="let column of columnsToDisplay">
-      <mat-header-cell *matHeaderCellDef> {{column}} </mat-header-cell>
-      <mat-cell *matCellDef="let element"> {{element[column]}} </mat-cell>
+    <ng-container [cdkColumnDef]="column" *ngFor="let column of columnsToDisplay">
+      <th cdk-header-cell *cdkHeaderCellDef> {{column}} </th>
+      <td cdk-cell *cdkCellDef="let element"> {{element[column]}} </td>
     </ng-container>
 
-    <mat-header-row *matHeaderRowDef="columnsToDisplay"></mat-header-row>
-    <mat-row *matRowDef="let data; columns: columnsToDisplay;"></mat-row>
-  </mat-table>
+    <tr cdk-header-row *cdkHeaderRowDef="columnsToDisplay"></tr>
+    <tr cdk-row *cdkRowDef="let data; columns: columnsToDisplay;"></tr>
+  </table>
 </mat-card>

src/demo-app/table/data-input-table/data-input-table.scss

@@ -2,19 +2,11 @@
   margin-top: 24px;
 }
 
-mat-card {
-  margin: 8px 0;
-}
-
-cdk-table {
-  display: table;
-  width: 100%;
-
-  cdk-header-row, cdk-row {
-    display: table-row;
-  }
+.demo-track-by-select {
+  display: flex;
+  align-items: center;
 
-  cdk-header-cell, cdk-cell {
-    display: table-cell;
+  .demo-track-by-label {
+    margin-right: 8px;
   }
 }

src/demo-app/table/data-input-table/data-input-table.ts

@@ -13,6 +13,8 @@ import {MatRadioChange, MatTable, MatTableDataSource} from '@angular/material';
 import {Observable} from 'rxjs';
 import {DataSource} from '@angular/cdk/collections';
 
+export type TrackByStrategy = 'position' | 'reference' | 'index';
+
 @Component({
   moduleId: module.id,
   templateUrl: 'data-input-table.html',
@@ -23,39 +25,71 @@ export class DataInputTableDemo {
 
   inputType: 'source' | 'stream' | 'array' | null = 'array';
   data = ELEMENT_DATA.slice();
-  tableDataSource = new MatTableDataSource(this.data);
+  matTableDataSource = new MatTableDataSource(this.data);
+
+  trackByStrategy: TrackByStrategy = 'reference';
+  trackBy = (index: number, item: Element) => {
+    switch (this.trackByStrategy) {
+      case 'position': return item.position;
+      case 'reference': return item;
+      case 'index': return index;
+    }
+  }
 
-  dataSourceInput: DataSource<Element> | Observable<Element[]> | Element[] | null = this.data;
+  dataSource: DataSource<Element> | Observable<Element[]> | Element[] | null = this.data;
 
   @ViewChild(CdkTable) cdkTable: CdkTable<Element>;
   @ViewChild(MatTable) matTable: MatTable<Element>;
 
   changeInput(e: MatRadioChange) {
     this.inputType = e.value;
     switch (this.inputType) {
-      case 'array': this.dataSourceInput = this.data; break;
-      case 'stream': this.dataSourceInput = this.tableDataSource.connect(); break;
-      case 'source': this.dataSourceInput = this.tableDataSource; break;
+      case 'array': this.dataSource = this.data; break;
+      case 'stream': this.dataSource = this.matTableDataSource.connect(); break;
+      case 'source': this.dataSource = this.matTableDataSource; break;
     }
   }
 
   addRow() {
-    this.data.push({name: 'new', weight: 0, symbol: 'New', position: 0});
-    this.tableDataSource.data = this.data;
+    this.data.push({
+      name: 'new',
+      weight: Math.floor(Math.random() * 25),
+      symbol: 'New',
+      position: Math.floor(Math.random() * 25)
+    });
+
+    this.matTableDataSource.data = this.data;
+  }
+
+  shuffle() {
+    let dataToShuffle = this.data.slice();
+    let currentIndex = dataToShuffle.length;
+    while (0 !== currentIndex) {
+      let randomIndex = Math.floor(Math.random() * currentIndex);
+      currentIndex -= 1;
+
+      // Swap
+      let temp = dataToShuffle[currentIndex];
+      dataToShuffle[currentIndex] = dataToShuffle[randomIndex];
+      dataToShuffle[randomIndex] = temp;
+    }
+
+    this.data = dataToShuffle;
+    this.matTableDataSource.data = dataToShuffle;
   }
 
   removeRow() {
     this.data.pop();
-    this.tableDataSource.data = this.data;
+    this.matTableDataSource.data = this.data;
   }
 
   reassignDataClone() {
     this.data = this.data.slice();
 
-    if (this.dataSourceInput instanceof Array) {
-      this.dataSourceInput = this.data;
+    if (this.dataSource instanceof Array) {
+      this.dataSource = this.data;
     }
-    this.tableDataSource.data = this.data;
+    this.matTableDataSource.data = this.data;
   }
 
   renderRows() {
@@ -64,7 +98,11 @@ export class DataInputTableDemo {
   }
 
   removeDataSource() {
-    this.dataSourceInput = null;
+    this.dataSource = null;
     this.inputType = null;
   }
+
+  highlightFirstRow() {
+    document.querySelector('table tbody tr')!.setAttribute('style', 'background: red');
+  }
 }

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

@@ -0,0 +1,17 @@
+<div class="demo-action">
+  <button mat-raised-button (click)="addColumn()"> Add column </button>
+  <button mat-raised-button (click)="removeColumn()"> Remove column </button>
+  <button mat-raised-button (click)="shuffle()"> Shuffle </button>
+</div>
+
+<mat-card>
+  <table cdk-table [dataSource]="dataSource">
+    <ng-container cdkColumnDef="{{column}}" *ngFor="let column of definedColumns">
+      <th cdk-header-cell *cdkHeaderCellDef> {{column}} </th>
+      <td cdk-cell *cdkCellDef="let element"> {{element[column]}} </td>
+    </ng-container>
+
+    <tr cdk-header-row *cdkHeaderRowDef="columnsToDisplay"></tr>
+    <tr cdk-row *cdkRowDef="let row; columns: columnsToDisplay;"></tr>
+  </table>
+</mat-card>

src/demo-app/table/dynamic-columns/dynamic-columns.ts

@@ -0,0 +1,43 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {Component} from '@angular/core';
+import {Element, ELEMENT_DATA} from '../element-data';
+
+@Component({
+  moduleId: module.id,
+  templateUrl: 'dynamic-columns.html',
+})
+export class DynamicColumnsDemo {
+  definedColumns = ['name', 'weight', 'symbol', 'position'];
+  columnsToDisplay = this.definedColumns.slice();
+  dataSource: Element[] = ELEMENT_DATA.slice();
+
+  addColumn() {
+    const randomColumn = Math.floor(Math.random() * 4);
+    this.columnsToDisplay.push(this.definedColumns[randomColumn]);
+  }
+
+  removeColumn() {
+    if (!this.columnsToDisplay.length) { return; }
+    this.columnsToDisplay.pop();
+  }
+
+  shuffle() {
+    let currentIndex = this.columnsToDisplay.length;
+    while (0 !== currentIndex) {
+      let randomIndex = Math.floor(Math.random() * currentIndex);
+      currentIndex -= 1;
+
+      // Swap
+      let temp = this.columnsToDisplay[currentIndex];
+      this.columnsToDisplay[currentIndex] = this.columnsToDisplay[randomIndex];
+      this.columnsToDisplay[randomIndex] = temp;
+    }
+  }
+}

src/demo-app/table/mat-table-data-source/mat-table-data-source.html

@@ -0,0 +1,22 @@
+<div class="demo-action">
+  <button mat-raised-button (click)="toggleFilterPredicate()"> Toggle filter predicate </button>
+  Status: {{useOverrideFilterPredicate}}
+</div>
+
+<mat-card>
+  <mat-form-field>
+    <input #filter matInput placeholder="Filter">
+  </mat-form-field>
+
+  <table mat-table [dataSource]="dataSource" matSort matSortActive="symbol" matSortDirection="asc">
+    <ng-container matColumnDef="{{column}}" *ngFor="let column of columns">
+      <th mat-header-cell mat-sort-header *matHeaderCellDef> {{column}} </th>
+      <td mat-cell *matCellDef="let element"> {{element[column]}} </td>
+    </ng-container>
+
+    <tr mat-header-row *matHeaderRowDef="columns"></tr>
+    <tr mat-row *matRowDef="let row; columns: columns;"></tr>
+  </table>
+
+  <mat-paginator [pageSize]="5" showFirstLastButtons></mat-paginator>
+</mat-card>