chore: update table demo page

Author: andrewseguin

src/demo-app/demo-app/routes.ts

@@ -50,13 +50,12 @@ import {TooltipDemo} from '../tooltip/tooltip-demo';
 import {TreeDemo} from '../tree/tree-demo';
 import {TypographyDemo} from '../typography/typography-demo';
 import {DemoApp, Home} from './demo-app';
-import {TableDemoPage} from '../table/table-demo-page';
-import {TABLE_DEMO_ROUTES} from '../table/routes';
 import {BadgeDemo} from '../badge/badge-demo';
 import {ConnectedOverlayDemo} from '../connected-overlay/connected-overlay-demo';
 import {PaginatorDemo} from '../paginator/paginator-demo';
 
 import {ExamplesPage} from '../examples-page/examples-page';
+import {TableDemo} from '../table/table-demo';
 
 export const DEMO_APP_ROUTES: Routes = [
   {path: '', component: DemoApp, children: [
@@ -96,7 +95,7 @@ export const DEMO_APP_ROUTES: Routes = [
     {path: 'slider', component: SliderDemo},
     {path: 'snack-bar', component: SnackBarDemo},
     {path: 'stepper', component: StepperDemo},
-    {path: 'table', component: TableDemoPage, children: TABLE_DEMO_ROUTES},
+    {path: 'table', component: TableDemo},
     {path: 'tabs', component: TabsDemo, children: TABS_DEMO_ROUTES},
     {path: 'toolbar', component: ToolbarDemo},
     {path: 'tooltip', component: TooltipDemo},

src/demo-app/example/example-list.ts

@@ -8,26 +8,46 @@
 
 import {Component, Input} from '@angular/core';
 import {EXAMPLE_COMPONENTS} from '@angular/material-examples';
+import {coerceBooleanProperty} from '@angular/cdk/coercion';
 
 /** Displays a set of material examples in a mat-accordion. */
 @Component({
   selector: 'material-example-list',
   template: `
-    <h2> {{type}} Examples </h2>
-    <mat-accordion>
-      <mat-expansion-panel *ngFor="let id of ids">
+    <mat-accordion multi>
+      <mat-expansion-panel *ngFor="let id of ids" [expanded]="expandAll">
         <mat-expansion-panel-header>
-          {{id}}: {{exampleComponents[id].title}}
+          <div class="header">
+            <div class="title"> {{exampleComponents[id]?.title}} </div>
+            <div class="id"> <{{id}}> </div>
+          </div>
         </mat-expansion-panel-header>
+
         <ng-template matExpansionPanelContent>
           <material-example [id]="id"></material-example>
         </ng-template>
       </mat-expansion-panel>
     </mat-accordion>
   `,
   styles: [`
-    h2 {
-      text-transform: capitalize;
+    mat-expansion-panel {
+      box-shadow: none !important;
+      background: transparent;
+      border-top: 1px solid #CCC;
+    }
+
+    .header {
+      display: flex;
+      justify-content: space-between;
+      width: 100%;
+      padding-right: 24px;
+      align-items: center;
+    }
+
+    .id {
+      font-family: monospace;
+      color: #666;
+      font-size: 12px;
     }
   `]
 })
@@ -38,5 +58,10 @@ export class ExampleList {
   /** IDs of the examples to display. */
   @Input() ids: string[];
 
+  @Input()
+  set expandAll(v: boolean) { this._expandAll = coerceBooleanProperty(v); }
+  get expandAll(): boolean { return this._expandAll; }
+  _expandAll: boolean;
+
   exampleComponents = EXAMPLE_COMPONENTS;
 }

src/demo-app/example/example.ts

@@ -7,19 +7,59 @@
  */
 
 import {Component, ElementRef, Input} from '@angular/core';
+import {coerceBooleanProperty} from '@angular/cdk/coercion';
+import {EXAMPLE_COMPONENTS} from '@angular/material-examples';
 
 @Component({
   selector: 'material-example',
-  template: '',
+  template: `
+    <div class="label" *ngIf="showLabel">
+      <span class="title"> {{title}} </span>
+      <span class="id"> <{{id}}> </span>
+    </div>
+
+    <div *ngIf="!id">
+      Could not find example {{id}}
+    </div>
+  `,
+  styles: [`
+    .label {
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-end;
+      margin: 16px 0;
+    }
+
+    .title {
+      font-size: 20px;
+      font-weight: 500;
+    }
+
+    .id {
+      font-size: 13px;
+      font-family: monospace;
+      color: #666;
+      white-space: pre;
+    }
+  `]
 })
 export class Example {
   /** ID of the material example to display. */
   @Input() id: string;
 
+  @Input()
+  set showLabel(v: boolean) { this._showLabel = coerceBooleanProperty(v); }
+  get showLabel(): boolean { return this._showLabel; }
+  _showLabel: boolean;
+
+  title: string;
+
   constructor(private elementRef: ElementRef) { }
 
   ngOnInit() {
     const element = document.createElement(this.id);
     this.elementRef.nativeElement.appendChild(element);
+
+    this.title = EXAMPLE_COMPONENTS[this.id] ? EXAMPLE_COMPONENTS[this.id].title : '';
   }
 }

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

@@ -8,19 +8,20 @@
 
 import {Component, ViewChild} from '@angular/core';
 import {MatSort, MatTableDataSource} from '@angular/material';
-import {PeriodicElement, ELEMENT_DATA} from '../element-data';
+import {Element, ELEMENT_DATA} from '../element-data';
 
 
 @Component({
   moduleId: module.id,
+  selector: 'custom-table-demo',
   templateUrl: 'custom-table.html',
   styleUrls: ['custom-table.css'],
 })
 export class CustomTableDemo {
   columnsToDisplay = ['name', 'weight', 'symbol', 'position'];
-  simpleTableDataSource = new MatTableDataSource<PeriodicElement>(ELEMENT_DATA);
-  wrapperTableDataSource = new MatTableDataSource<PeriodicElement>(ELEMENT_DATA);
-  getWeight = (data: PeriodicElement) => '~' + data.weight;
+  simpleTableDataSource = new MatTableDataSource<Element>(ELEMENT_DATA);
+  wrapperTableDataSource = new MatTableDataSource<Element>(ELEMENT_DATA);
+  getWeight = (data: Element) => '~' + 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 {PeriodicElement, ELEMENT_DATA} from '../element-data';
+import {Element, ELEMENT_DATA} from '../element-data';
 import {CdkTable} from '@angular/cdk/table';
 import {MatRadioChange, MatTable, MatTableDataSource} from '@angular/material';
 import {Observable} from 'rxjs';
@@ -17,6 +17,7 @@ export type TrackByStrategy = 'position' | 'reference' | 'index';
 
 @Component({
   moduleId: module.id,
+  selector: 'data-input-table-demo',
   templateUrl: 'data-input-table.html',
   styleUrls: ['data-input-table.css'],
 })
@@ -28,18 +29,18 @@ export class DataInputTableDemo {
   matTableDataSource = new MatTableDataSource(this.data);
 
   trackByStrategy: TrackByStrategy = 'reference';
-  trackBy = (index: number, item: PeriodicElement) => {
+  trackBy = (index: number, item: Element) => {
     switch (this.trackByStrategy) {
       case 'position': return item.position;
       case 'reference': return item;
       case 'index': return index;
     }
   }
 
-  dataSource: DataSource<PeriodicElement> | Observable<PeriodicElement[]> | PeriodicElement[] | null = this.data;
+  dataSource: DataSource<Element> | Observable<Element[]> | Element[] | null = this.data;
 
-  @ViewChild(CdkTable) cdkTable: CdkTable<PeriodicElement>;
-  @ViewChild(MatTable) matTable: MatTable<PeriodicElement>;
+  @ViewChild(CdkTable) cdkTable: CdkTable<Element>;
+  @ViewChild(MatTable) matTable: MatTable<Element>;
 
   changeInput(e: MatRadioChange) {
     this.inputType = e.value;

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

@@ -6,14 +6,14 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-export interface PeriodicElement {
+export interface Element {
   position: number;
   name: string;
   weight: number;
   symbol: string;
 }
 
-export const ELEMENT_DATA: PeriodicElement[] = [
+export const ELEMENT_DATA: Element[] = [
   {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'},