chore: update table examples

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

@@ -8,7 +8,7 @@
 
 import {Component, ViewChild} from '@angular/core';
 import {MatSort, MatTableDataSource} from '@angular/material';
-import {Element, ELEMENT_DATA} from '../element-data';
+import {PeriodicElement, ELEMENT_DATA} from '../element-data';
 
 
 @Component({
@@ -18,9 +18,9 @@ import {Element, ELEMENT_DATA} from '../element-data';
 })
 export class CustomTableDemo {
   columnsToDisplay = ['name', 'weight', 'symbol', 'position'];
-  simpleTableDataSource = new MatTableDataSource<Element>(ELEMENT_DATA);
-  wrapperTableDataSource = new MatTableDataSource<Element>(ELEMENT_DATA);
-  getWeight = (data: Element) => '~' + data.weight;
+  simpleTableDataSource = new MatTableDataSource<PeriodicElement>(ELEMENT_DATA);
+  wrapperTableDataSource = new MatTableDataSource<PeriodicElement>(ELEMENT_DATA);
+  getWeight = (data: PeriodicElement) => '~' + data.weight;
 
   @ViewChild('simpleTableSort') simpleTableSort: MatSort;
   @ViewChild('wrapperTableSort') wrapperTableSort: MatSort;

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

@@ -7,7 +7,7 @@
  */
 
 import {Component, ViewChild} from '@angular/core';
-import {Element, ELEMENT_DATA} from '../element-data';
+import {PeriodicElement, ELEMENT_DATA} from '../element-data';
 import {CdkTable} from '@angular/cdk/table';
 import {MatRadioChange, MatTable, MatTableDataSource} from '@angular/material';
 import {Observable} from 'rxjs';
@@ -28,18 +28,20 @@ export class DataInputTableDemo {
   matTableDataSource = new MatTableDataSource(this.data);
 
   trackByStrategy: TrackByStrategy = 'reference';
-  trackBy = (index: number, item: Element) => {
+  trackBy = (index: number, item: PeriodicElement) => {
     switch (this.trackByStrategy) {
       case 'position': return item.position;
       case 'reference': return item;
       case 'index': return index;
     }
   }
 
-  dataSource: DataSource<Element> | Observable<Element[]> | Element[] | null = this.data;
+  dataSource: DataSource<PeriodicElement> |
+      Observable<PeriodicElement[]> |
+      PeriodicElement[] | null = this.data;
 
-  @ViewChild(CdkTable) cdkTable: CdkTable<Element>;
-  @ViewChild(MatTable) matTable: MatTable<Element>;
+  @ViewChild(CdkTable) cdkTable: CdkTable<PeriodicElement>;
+  @ViewChild(MatTable) matTable: MatTable<PeriodicElement>;
 
   changeInput(e: MatRadioChange) {
     this.inputType = e.value;

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

@@ -7,7 +7,7 @@
  */
 
 import {Component} from '@angular/core';
-import {Element, ELEMENT_DATA} from '../element-data';
+import {PeriodicElement, ELEMENT_DATA} from '../element-data';
 
 @Component({
   moduleId: module.id,
@@ -16,7 +16,7 @@ import {Element, ELEMENT_DATA} from '../element-data';
 export class DynamicColumnsDemo {
   definedColumns = ['name', 'weight', 'symbol', 'position'];
   columnsToDisplay = this.definedColumns.slice();
-  dataSource: Element[] = ELEMENT_DATA.slice();
+  dataSource: PeriodicElement[] = ELEMENT_DATA.slice();
 
   addColumn() {
     const randomColumn = Math.floor(Math.random() * 4);

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

@@ -6,14 +6,14 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-export interface Element {
+export interface PeriodicElement {
   position: number;
   name: string;
   weight: number;
   symbol: string;
 }
 
-export const ELEMENT_DATA: Element[] = [
+export const ELEMENT_DATA: PeriodicElement[] = [
   {position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
   {position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
   {position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},

src/demo-app/table/expandable-rows/expandable-rows.ts

@@ -7,7 +7,7 @@
  */
 
 import {Component, ViewChild} from '@angular/core';
-import {Element, ELEMENT_DATA} from 'table/element-data';
+import {PeriodicElement, ELEMENT_DATA} from 'table/element-data';
 import {animate, state, style, transition, trigger} from '@angular/animations';
 import {MatPaginator, MatSort, MatTableDataSource} from '@angular/material';
 
@@ -48,7 +48,7 @@ import {MatPaginator, MatSort, MatTableDataSource} from '@angular/material';
 export class ExpandableRowsDemo {
   dataSource = new MatTableDataSource(ELEMENT_DATA.slice());
   columnsToDisplay = ['name', 'weight', 'symbol', 'position'];
-  expandedElement: Element;
+  expandedElement: PeriodicElement;
 
   @ViewChild(MatSort) sort: MatSort;
   @ViewChild(MatPaginator) paginator: MatPaginator;

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

@@ -8,7 +8,7 @@
 
 import {Component, ElementRef, ViewChild} from '@angular/core';
 import {MatPaginator, MatSort, MatTableDataSource} from '@angular/material';
-import {Element, ELEMENT_DATA} from '../element-data';
+import {PeriodicElement, ELEMENT_DATA} from '../element-data';
 import {fromEvent} from 'rxjs';
 
 @Component({
@@ -21,7 +21,7 @@ import {fromEvent} from 'rxjs';
 })
 export class MatTableDataSourceDemo {
   columns = ['name', 'weight', 'symbol', 'position'];
-  dataSource = new MatTableDataSource<Element>(ELEMENT_DATA);
+  dataSource = new MatTableDataSource<PeriodicElement>(ELEMENT_DATA);
 
   // Add button that lets you override the filter predicate with a strict name match
   originalFilterPredicate = this.dataSource.filterPredicate;
@@ -41,7 +41,7 @@ export class MatTableDataSourceDemo {
   toggleFilterPredicate() {
     this.useOverrideFilterPredicate = !this.useOverrideFilterPredicate;
     this.dataSource.filterPredicate = this.useOverrideFilterPredicate ?
-        (d: Element, filter: string) => d.name.indexOf(filter) != -1 :
+        (d: PeriodicElement, filter: string) => d.name.indexOf(filter) != -1 :
         this.originalFilterPredicate;
   }
 }

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

@@ -7,7 +7,7 @@
  */
 
 import {Component} from '@angular/core';
-import {Element, ELEMENT_DATA} from './element-data';
+import {PeriodicElement, ELEMENT_DATA} from './element-data';
 
 @Component({
   moduleId: module.id,
@@ -26,5 +26,5 @@ import {Element, ELEMENT_DATA} from './element-data';
 })
 export class TableDemo {
   columns = ['name', 'weight', 'symbol', 'position'];
-  dataSource: Element[] = ELEMENT_DATA.slice();
+  dataSource: PeriodicElement[] = ELEMENT_DATA.slice();
 }

src/demo-app/table/when-rows/when-rows.ts

@@ -16,6 +16,7 @@ export interface DemoDataObject {
 }
 
 @Component({
+  selector: 'when-rows-demo',
   moduleId: module.id,
   templateUrl: 'when-rows.html',
 })

src/material-examples/cdk-table-basic-flex/cdk-table-basic-flex-example.css

@@ -0,0 +1,10 @@
+/**
+ * Add basic flex styling so that the cells evenly space themselves in the row.
+ */
+cdk-row, cdk-header-row, cdk-footer-row {
+  display: flex;
+}
+
+cdk-cell, cdk-header-cell, cdk-footer-cell {
+  flex: 1;
+}

src/material-examples/cdk-table-basic-flex/cdk-table-basic-flex-example.html

@@ -0,0 +1,28 @@
+<cdk-table [dataSource]="dataSource">
+  <!-- Position Column -->
+  <ng-container cdkColumnDef="position">
+    <cdk-header-cell *cdkHeaderCellDef> No. </cdk-header-cell>
+    <cdk-cell *cdkCellDef="let element"> {{element.position}} </cdk-cell>
+  </ng-container>
+
+  <!-- Name Column -->
+  <ng-container cdkColumnDef="name">
+    <cdk-header-cell *cdkHeaderCellDef> Name </cdk-header-cell>
+    <cdk-cell *cdkCellDef="let element"> {{element.name}} </cdk-cell>
+  </ng-container>
+
+  <!-- Weight Column -->
+  <ng-container cdkColumnDef="weight">
+    <cdk-header-cell *cdkHeaderCellDef> Weight </cdk-header-cell>
+    <cdk-cell *cdkCellDef="let element"> {{element.weight}} </cdk-cell>
+  </ng-container>
+
+  <!-- Symbol Column -->
+  <ng-container cdkColumnDef="symbol">
+    <cdk-header-cell *cdkHeaderCellDef> Symbol </cdk-header-cell>
+    <cdk-cell *cdkCellDef="let element"> {{element.symbol}} </cdk-cell>
+  </ng-container>
+
+  <cdk-header-row *cdkHeaderRowDef="displayedColumns"></cdk-header-row>
+  <cdk-row *cdkRowDef="let row; columns: displayedColumns;"></cdk-row>
+</cdk-table>

src/material-examples/cdk-table-basic-flex/cdk-table-basic-flex-example.ts

@@ -0,0 +1,55 @@
+import {DataSource} from '@angular/cdk/collections';
+import {Component} from '@angular/core';
+import {BehaviorSubject, Observable} from 'rxjs';
+
+/**
+ * @title Basic use of `<cdk-table>` (uses display flex)
+ */
+@Component({
+  selector: 'cdk-table-basic-flex-example',
+  styleUrls: ['cdk-table-basic-flex-example.css'],
+  templateUrl: 'cdk-table-basic-flex-example.html',
+})
+export class CdkTableBasicFlexExample {
+  displayedColumns = ['position', 'name', 'weight', 'symbol'];
+  dataSource = new ExampleDataSource();
+}
+
+export interface PeriodicElement {
+  name: string;
+  position: number;
+  weight: number;
+  symbol: string;
+}
+
+const ELEMENT_DATA: PeriodicElement[] = [
+  {position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
+  {position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
+  {position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
+  {position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be'},
+  {position: 5, name: 'Boron', weight: 10.811, symbol: 'B'},
+  {position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C'},
+  {position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N'},
+  {position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O'},
+  {position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F'},
+  {position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne'},
+];
+
+/**
+ * Data source to provide what data should be rendered in the table. Note that the data source
+ * can retrieve its data in any way. In this case, the data source is provided a reference
+ * to a common data base, ExampleDatabase. It is not the data source's responsibility to manage
+ * the underlying data. Instead, it only needs to take the data and send the table exactly what
+ * should be rendered.
+ */
+export class ExampleDataSource extends DataSource<PeriodicElement> {
+  /** Stream of data that is provided to the table. */
+  data: BehaviorSubject<PeriodicElement[]> = new BehaviorSubject<PeriodicElement[]>(ELEMENT_DATA);
+
+  /** Connect function called by the table to retrieve one stream containing the data to render. */
+  connect(): Observable<PeriodicElement[]> {
+    return this.data;
+  }
+
+  disconnect() {}
+}

src/material-examples/cdk-table-basic/cdk-table-basic-example.css

@@ -1,39 +1,7 @@
-/* Structure */
-.example-container {
-  display: flex;
-  flex-direction: column;
-  min-width: 300px;
+table {
+  width: 100%;
 }
 
-/*
- * Styles to make the demo's cdk-table match the material design spec
- * https://material.io/guidelines/components/data-tables.html
- */
-.example-table {
-  flex: 1 1 auto;
-  overflow: auto;
-  max-height: 500px;
-}
-
-.example-header-row, .example-row {
-  display: flex;
-  border-bottom: 1px solid #ccc;
-  align-items: center;
-  height: 32px;
-  padding: 0 8px;
-}
-
-.example-cell, .example-header-cell {
-  flex: 1;
-}
-
-.example-header-cell {
-  font-size: 12px;
-  font-weight: bold;
-  color: rgba(0, 0, 0, 0.54);
-}
-
-.example-cell {
-  font-size: 13px;
-  color: rgba(0, 0, 0, 0.87);
+th {
+  text-align: left;
 }

src/material-examples/cdk-table-basic/cdk-table-basic-example.html

@@ -1,36 +1,28 @@
-<div class="example-container mat-elevation-z8">
-  <cdk-table #table [dataSource]="dataSource" class="example-table">
-    <!--- Note that these columns can be defined in any order.
-          The actual rendered columns are set as a property on the row definition" -->
+<table cdk-table [dataSource]="dataSource">
+  <!-- Position Column -->
+  <ng-container cdkColumnDef="position">
+    <th cdk-header-cell *cdkHeaderCellDef> No. </th>
+    <td cdk-cell *cdkCellDef="let element"> {{element.position}} </td>
+  </ng-container>
 
-    <!-- ID Column -->
-    <ng-container cdkColumnDef="userId">
-      <cdk-header-cell *cdkHeaderCellDef class="example-header-cell"> ID </cdk-header-cell>
-      <cdk-cell *cdkCellDef="let row" class="example-cell"> {{row.id}} </cdk-cell>
-    </ng-container>
+  <!-- Name Column -->
+  <ng-container cdkColumnDef="name">
+    <th cdk-header-cell *cdkHeaderCellDef> Name </th>
+    <td cdk-cell *cdkCellDef="let element"> {{element.name}} </td>
+  </ng-container>
 
-    <!-- Progress Column -->
-    <ng-container cdkColumnDef="progress">
-      <cdk-header-cell *cdkHeaderCellDef class="example-header-cell"> Progress </cdk-header-cell>
-      <cdk-cell *cdkCellDef="let row" class="example-cell"> {{row.progress}}% </cdk-cell>
-    </ng-container>
+  <!-- Weight Column -->
+  <ng-container cdkColumnDef="weight">
+    <th cdk-header-cell *cdkHeaderCellDef> Weight </th>
+    <td cdk-cell *cdkCellDef="let element"> {{element.weight}} </td>
+  </ng-container>
 
-    <!-- Name Column -->
-    <ng-container cdkColumnDef="userName">
-      <cdk-header-cell *cdkHeaderCellDef class="example-header-cell"> Name </cdk-header-cell>
-      <cdk-cell *cdkCellDef="let row" class="example-cell"> {{row.name}} </cdk-cell>
-    </ng-container>
+  <!-- Symbol Column -->
+  <ng-container cdkColumnDef="symbol">
+    <th cdk-header-cell *cdkHeaderCellDef> Symbol </th>
+    <td cdk-cell *cdkCellDef="let element"> {{element.symbol}} </td>
+  </ng-container>
 
-    <!-- Color Column -->
-    <ng-container cdkColumnDef="color">
-      <cdk-header-cell *cdkHeaderCellDef class="example-header-cell">Color</cdk-header-cell>
-      <cdk-cell *cdkCellDef="let row" class="example-cell"
-                [style.color]="row.color">
-        {{row.color}}
-      </cdk-cell>
-    </ng-container>
-
-    <cdk-header-row *cdkHeaderRowDef="displayedColumns" class="example-header-row"></cdk-header-row>
-    <cdk-row *cdkRowDef="let row; columns: displayedColumns;" class="example-row"></cdk-row>
-  </cdk-table>
-</div>
+  <tr cdk-header-row *cdkHeaderRowDef="displayedColumns"></tr>
+  <tr cdk-row *cdkRowDef="let row; columns: displayedColumns;"></tr>
+</table>