From b2e2dde200ab6355b4430e947df2babf9cd61b32 Mon Sep 17 00:00:00 2001 From: Andrew Seguin Date: Mon, 15 Oct 2018 09:35:04 -0700 Subject: [PATCH] chore(table): cleanup demo by moving to examples (#13576) --- .../table/custom-table/custom-table.html | 40 ------- .../table/custom-table/custom-table.scss | 9 -- .../table/custom-table/custom-table.ts | 33 ------ .../table/custom-table/wrapper-table.ts | 65 ----------- .../data-input-table/data-input-table.html | 52 --------- .../data-input-table/data-input-table.scss | 12 -- .../data-input-table/data-input-table.ts | 109 ------------------ src/demo-app/table/element-data.ts | 37 ------ src/demo-app/table/table-demo-module.ts | 41 +------ src/demo-app/table/table-demo.html | 7 -- src/demo-app/table/table-demo.ts | 2 +- src/demo-app/table/when-rows/when-rows.html | 68 ----------- src/demo-app/table/when-rows/when-rows.ts | 63 ---------- .../table-simple-column-example.css | 3 + .../table-simple-column-example.html | 15 +++ .../table-simple-column-example.ts} | 58 ++++++++-- .../table-wrapped/table-wrapped-example.css | 3 + .../table-wrapped/table-wrapped-example.html | 12 ++ .../table-wrapped/table-wrapped-example.ts | 88 ++++++++++++++ .../table-wrapped}/wrapper-table.html | 8 +- 20 files changed, 178 insertions(+), 547 deletions(-) delete mode 100644 src/demo-app/table/custom-table/custom-table.html delete mode 100644 src/demo-app/table/custom-table/custom-table.scss delete mode 100644 src/demo-app/table/custom-table/custom-table.ts delete mode 100644 src/demo-app/table/custom-table/wrapper-table.ts delete mode 100644 src/demo-app/table/data-input-table/data-input-table.html delete mode 100644 src/demo-app/table/data-input-table/data-input-table.scss delete mode 100644 src/demo-app/table/data-input-table/data-input-table.ts delete mode 100644 src/demo-app/table/element-data.ts delete mode 100644 src/demo-app/table/table-demo.html delete mode 100644 src/demo-app/table/when-rows/when-rows.html delete mode 100644 src/demo-app/table/when-rows/when-rows.ts create mode 100644 src/material-examples/table-simple-column/table-simple-column-example.css create mode 100644 src/material-examples/table-simple-column/table-simple-column-example.html rename src/{demo-app/table/custom-table/simple-column.ts => material-examples/table-simple-column/table-simple-column-example.ts} (64%) create mode 100644 src/material-examples/table-wrapped/table-wrapped-example.css create mode 100644 src/material-examples/table-wrapped/table-wrapped-example.html create mode 100644 src/material-examples/table-wrapped/table-wrapped-example.ts rename src/{demo-app/table/custom-table => material-examples/table-wrapped}/wrapper-table.html (61%) diff --git a/src/demo-app/table/custom-table/custom-table.html b/src/demo-app/table/custom-table/custom-table.html deleted file mode 100644 index ee3e1474883..00000000000 --- a/src/demo-app/table/custom-table/custom-table.html +++ /dev/null @@ -1,40 +0,0 @@ - -

MatTable with Simple Columns

- - - - - - - - - - - - - - -
- - - - - -

Wrapper Table

- - - - - Name - {{element.name}} - - - - - - - - - diff --git a/src/demo-app/table/custom-table/custom-table.scss b/src/demo-app/table/custom-table/custom-table.scss deleted file mode 100644 index 3ef30ba32da..00000000000 --- a/src/demo-app/table/custom-table/custom-table.scss +++ /dev/null @@ -1,9 +0,0 @@ -.mat-table, wrapper-table { - width: 100%; -} - -.mat-card { - margin: 8px 0; - height: 300px; - overflow: auto; -} diff --git a/src/demo-app/table/custom-table/custom-table.ts b/src/demo-app/table/custom-table/custom-table.ts deleted file mode 100644 index ee83e4b5651..00000000000 --- a/src/demo-app/table/custom-table/custom-table.ts +++ /dev/null @@ -1,33 +0,0 @@ -/** - * @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, OnInit, ViewChild} from '@angular/core'; -import {MatSort, MatTableDataSource} from '@angular/material'; -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 implements OnInit { - columnsToDisplay = ['name', 'weight', 'symbol', 'position']; - simpleTableDataSource = new MatTableDataSource(ELEMENT_DATA); - wrapperTableDataSource = new MatTableDataSource(ELEMENT_DATA); - getWeight = (data: Element) => '~' + data.weight; - - @ViewChild('simpleTableSort') simpleTableSort: MatSort; - @ViewChild('wrapperTableSort') wrapperTableSort: MatSort; - - ngOnInit() { - this.simpleTableDataSource.sort = this.simpleTableSort; - this.wrapperTableDataSource.sort = this.wrapperTableSort; - } -} diff --git a/src/demo-app/table/custom-table/wrapper-table.ts b/src/demo-app/table/custom-table/wrapper-table.ts deleted file mode 100644 index e43129044b8..00000000000 --- a/src/demo-app/table/custom-table/wrapper-table.ts +++ /dev/null @@ -1,65 +0,0 @@ -/** - * @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 {DataSource} from '@angular/cdk/collections'; -import { - AfterContentInit, - Component, - ContentChild, - ContentChildren, - Input, - QueryList, - ViewChild -} from '@angular/core'; -import {MatColumnDef, MatHeaderRowDef, MatRowDef, MatTable} from '@angular/material'; -import {SimpleColumn} from './simple-column'; - - -@Component({ - moduleId: module.id, - selector: 'wrapper-table', - templateUrl: 'wrapper-table.html', - styles: [` - :host { - display: block; - width: 100%; - } - - .mat-table { - width: 100%; - } - `] -}) -export class WrapperTable implements AfterContentInit { - /** Different ways the client can add column definitions */ - @ContentChildren(SimpleColumn) simpleColumns: QueryList>; - @ContentChildren(MatColumnDef) columnDefs: QueryList; - - @ContentChild(MatHeaderRowDef) headerRowDef: MatHeaderRowDef; - @ContentChildren(MatRowDef) rowDefs: QueryList>; - - @ViewChild(MatTable) table: MatTable; - - @Input() columns: string[]; - - @Input() dataSource: DataSource; - - ngAfterContentInit() { - // Register the simple columns to the table - this.simpleColumns.forEach(simpleColumn => this.table.addColumnDef(simpleColumn.columnDef)); - - // Register the normal column defs to the table - this.columnDefs.forEach(columnDef => this.table.addColumnDef(columnDef)); - - // Register any custom row definitions to the table - this.rowDefs.forEach(rowDef => this.table.addRowDef(rowDef)); - - // Register the header row definition. - this.table.setHeaderRowDef(this.headerRowDef); - } -} diff --git a/src/demo-app/table/data-input-table/data-input-table.html b/src/demo-app/table/data-input-table/data-input-table.html deleted file mode 100644 index 045e5b91559..00000000000 --- a/src/demo-app/table/data-input-table/data-input-table.html +++ /dev/null @@ -1,52 +0,0 @@ -
- Input type: - - Array - Stream - DataSource - -
- -
- Data Changes: - - - - -
- -
- Table: - - -
- -
- -
- -
-
-
Track By
- - Reference - Position - Index - -
-
- - -

CdkTable

- - - - - - - - - - -
{{column}} {{element[column]}}
- diff --git a/src/demo-app/table/data-input-table/data-input-table.scss b/src/demo-app/table/data-input-table/data-input-table.scss deleted file mode 100644 index 83c787057ac..00000000000 --- a/src/demo-app/table/data-input-table/data-input-table.scss +++ /dev/null @@ -1,12 +0,0 @@ -.demo-actions { - margin-top: 24px; -} - -.demo-track-by-select { - display: flex; - align-items: center; - - .demo-track-by-label { - margin-right: 8px; - } -} diff --git a/src/demo-app/table/data-input-table/data-input-table.ts b/src/demo-app/table/data-input-table/data-input-table.ts deleted file mode 100644 index 6589a4f3644..00000000000 --- a/src/demo-app/table/data-input-table/data-input-table.ts +++ /dev/null @@ -1,109 +0,0 @@ -/** - * @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, ViewChild} from '@angular/core'; -import {Element, ELEMENT_DATA} from '../element-data'; -import {CdkTable} from '@angular/cdk/table'; -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, - selector: 'data-input-table-demo', - templateUrl: 'data-input-table.html', - styleUrls: ['data-input-table.css'], -}) -export class DataInputTableDemo { - columnsToDisplay = ['name', 'weight', 'symbol', 'position']; - - inputType: 'source' | 'stream' | 'array' | null = 'array'; - data = ELEMENT_DATA.slice(); - 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; - } - } - - dataSource: DataSource | Observable | Element[] | null = this.data; - - @ViewChild(CdkTable) cdkTable: CdkTable; - @ViewChild(MatTable) matTable: MatTable; - - changeInput(e: MatRadioChange) { - this.inputType = e.value; - switch (this.inputType) { - 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: 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.matTableDataSource.data = this.data; - } - - reassignDataClone() { - this.data = this.data.slice(); - - if (this.dataSource instanceof Array) { - this.dataSource = this.data; - } - this.matTableDataSource.data = this.data; - } - - renderRows() { - this.cdkTable.renderRows(); - this.matTable.renderRows(); - } - - removeDataSource() { - this.dataSource = null; - this.inputType = null; - } - - highlightFirstRow() { - document.querySelector('table tbody tr')!.setAttribute('style', 'background: red'); - } -} diff --git a/src/demo-app/table/element-data.ts b/src/demo-app/table/element-data.ts deleted file mode 100644 index 8c6394ad4a1..00000000000 --- a/src/demo-app/table/element-data.ts +++ /dev/null @@ -1,37 +0,0 @@ -/** - * @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 - */ - -export interface Element { - position: number; - name: string; - weight: number; - symbol: string; -} - -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'}, - {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'}, - {position: 11, name: 'Sodium', weight: 22.9897, symbol: 'Na'}, - {position: 12, name: 'Magnesium', weight: 24.305, symbol: 'Mg'}, - {position: 13, name: 'Aluminum', weight: 26.9815, symbol: 'Al'}, - {position: 14, name: 'Silicon', weight: 28.0855, symbol: 'Si'}, - {position: 15, name: 'Phosphorus', weight: 30.9738, symbol: 'P'}, - {position: 16, name: 'Sulfur', weight: 32.065, symbol: 'S'}, - {position: 17, name: 'Chlorine', weight: 35.453, symbol: 'Cl'}, - {position: 18, name: 'Argon', weight: 39.948, symbol: 'Ar'}, - {position: 19, name: 'Potassium', weight: 39.0983, symbol: 'K'}, - {position: 20, name: 'Calcium', weight: 40.078, symbol: 'Ca'}, -]; diff --git a/src/demo-app/table/table-demo-module.ts b/src/demo-app/table/table-demo-module.ts index 2d856277c6a..f35e57a025c 100644 --- a/src/demo-app/table/table-demo-module.ts +++ b/src/demo-app/table/table-demo-module.ts @@ -8,47 +8,10 @@ import {NgModule} from '@angular/core'; import {TableDemo} from './table-demo'; -import {CustomTableDemo} from './custom-table/custom-table'; -import { - MatButtonModule, - MatCardModule, - MatPaginatorModule, - MatRadioModule, - MatSlideToggleModule, - MatSortModule, - MatTableModule -} from '@angular/material'; -import {FormsModule} from '@angular/forms'; -import {CdkTableModule} from '@angular/cdk/table'; -import {CommonModule} from '@angular/common'; -import {WrapperTable} from './custom-table/wrapper-table'; -import {SimpleColumn} from './custom-table/simple-column'; -import {DataInputTableDemo} from './data-input-table/data-input-table'; -import {WhenRowsDemo} from './when-rows/when-rows'; import {MaterialExampleModule} from '../example/example-module'; - @NgModule({ - imports: [ - MaterialExampleModule, - CdkTableModule, - MatTableModule, - MatCardModule, - MatPaginatorModule, - MatSortModule, - MatRadioModule, - CommonModule, - FormsModule, - MatButtonModule, - MatSlideToggleModule, - ], - declarations: [ - CustomTableDemo, - DataInputTableDemo, - TableDemo, - WrapperTable, - SimpleColumn, - WhenRowsDemo, - ], + imports: [MaterialExampleModule], + declarations: [TableDemo], }) export class TableDemoModule { } diff --git a/src/demo-app/table/table-demo.html b/src/demo-app/table/table-demo.html deleted file mode 100644 index 7939e2a14c5..00000000000 --- a/src/demo-app/table/table-demo.html +++ /dev/null @@ -1,7 +0,0 @@ - - - - - - - diff --git a/src/demo-app/table/table-demo.ts b/src/demo-app/table/table-demo.ts index 2f3f0dcdc6b..37e4d4d957f 100644 --- a/src/demo-app/table/table-demo.ts +++ b/src/demo-app/table/table-demo.ts @@ -12,7 +12,7 @@ import {EXAMPLE_COMPONENTS} from '@angular/material-examples'; @Component({ moduleId: module.id, - templateUrl: 'table-demo.html', + template: '', }) export class TableDemo { examples = Object.keys(EXAMPLE_COMPONENTS) diff --git a/src/demo-app/table/when-rows/when-rows.html b/src/demo-app/table/when-rows/when-rows.html deleted file mode 100644 index ed56164f3a0..00000000000 --- a/src/demo-app/table/when-rows/when-rows.html +++ /dev/null @@ -1,68 +0,0 @@ -
- -
- -
- - Highlighted rows: {{randomNumber}} -
- -
- - Enable multiple data rows - -
- -
- - Enable track by value - -
- - -

MatTable

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Data - {{data.value}} - Index - {{index}} - Data Index - {{dataIndex}} - Render Index - {{renderIndex}} -
- diff --git a/src/demo-app/table/when-rows/when-rows.ts b/src/demo-app/table/when-rows/when-rows.ts deleted file mode 100644 index faba99c0f15..00000000000 --- a/src/demo-app/table/when-rows/when-rows.ts +++ /dev/null @@ -1,63 +0,0 @@ -/** - * @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, ViewChild} from '@angular/core'; -import {MatTable} from '@angular/material'; - -const DATA_LENGTH = 10; - -export interface DemoDataObject { - value: boolean; -} - -@Component({ - selector: 'when-rows-demo', - moduleId: module.id, - templateUrl: 'when-rows.html', -}) -export class WhenRowsDemo { - columnsToDisplay = ['data', 'index', 'dataIndex', 'renderIndex']; - data: DemoDataObject[] = - (new Array(DATA_LENGTH) as DemoDataObject[]).fill({value: false}, 0, DATA_LENGTH); - randomNumber = 0; - multiTemplateDataRows = false; - useTrackByValue = false; - - whenFn = (_i: number, d: DemoDataObject) => d.value; - trackByValue = (_i: number, d: DemoDataObject) => d.value; - - @ViewChild(MatTable) table: MatTable; - - constructor() { - this.changeRandomNumber(); - } - - changeRandomNumber() { - this.randomNumber = Math.floor(Math.random() * DATA_LENGTH); - this.data = this.data.map((_d: DemoDataObject, i: number) => ({value: i < this.randomNumber})); - if (this.table) { - this.table.renderRows(); - } - } - - shuffleArray() { - 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; - } -} diff --git a/src/material-examples/table-simple-column/table-simple-column-example.css b/src/material-examples/table-simple-column/table-simple-column-example.css new file mode 100644 index 00000000000..1922e7ffa3a --- /dev/null +++ b/src/material-examples/table-simple-column/table-simple-column-example.css @@ -0,0 +1,3 @@ +table { + width: 100%; +} diff --git a/src/material-examples/table-simple-column/table-simple-column-example.html b/src/material-examples/table-simple-column/table-simple-column-example.html new file mode 100644 index 00000000000..61979707bbb --- /dev/null +++ b/src/material-examples/table-simple-column/table-simple-column-example.html @@ -0,0 +1,15 @@ + + + + + + + + + + + + + +
diff --git a/src/demo-app/table/custom-table/simple-column.ts b/src/material-examples/table-simple-column/table-simple-column-example.ts similarity index 64% rename from src/demo-app/table/custom-table/simple-column.ts rename to src/material-examples/table-simple-column/table-simple-column-example.ts index 7176d5e6489..05c53f89767 100644 --- a/src/demo-app/table/custom-table/simple-column.ts +++ b/src/material-examples/table-simple-column/table-simple-column-example.ts @@ -1,16 +1,52 @@ -/** - * @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 {coerceBooleanProperty} from '@angular/cdk/coercion'; import {Component, Input, OnDestroy, OnInit, Optional, ViewChild} from '@angular/core'; -import {MatSortHeader} from '@angular/material/sort'; -import {MatColumnDef, MatTable} from '@angular/material/table'; +import {coerceBooleanProperty} from '@angular/cdk/coercion'; +import { + MatColumnDef, + MatSort, + MatSortHeader, + MatTable, + MatTableDataSource +} from '@angular/material'; +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'}, +]; + +/** + * @title Table with a custom column component for easy column definition reuse. + */ +@Component({ + selector: 'table-simple-column-example', + styleUrls: ['table-simple-column-example.css'], + templateUrl: 'table-simple-column-example.html', +}) +export class TableSimpleColumnExample implements OnInit { + displayedColumns: string[] = ['position', 'name', 'weight', 'symbol']; + dataSource = new MatTableDataSource(ELEMENT_DATA); + getWeight = (data: PeriodicElement) => '~' + data.weight; + + @ViewChild('sort') sort: MatSort; + + ngOnInit() { + this.dataSource.sort = this.sort; + } +} /** * Column that shows simply shows text content for the header and row diff --git a/src/material-examples/table-wrapped/table-wrapped-example.css b/src/material-examples/table-wrapped/table-wrapped-example.css new file mode 100644 index 00000000000..1922e7ffa3a --- /dev/null +++ b/src/material-examples/table-wrapped/table-wrapped-example.css @@ -0,0 +1,3 @@ +table { + width: 100%; +} diff --git a/src/material-examples/table-wrapped/table-wrapped-example.html b/src/material-examples/table-wrapped/table-wrapped-example.html new file mode 100644 index 00000000000..b4f5da82a41 --- /dev/null +++ b/src/material-examples/table-wrapped/table-wrapped-example.html @@ -0,0 +1,12 @@ + + + + Name + {{element.name}} + + + + + + diff --git a/src/material-examples/table-wrapped/table-wrapped-example.ts b/src/material-examples/table-wrapped/table-wrapped-example.ts new file mode 100644 index 00000000000..38e95d63685 --- /dev/null +++ b/src/material-examples/table-wrapped/table-wrapped-example.ts @@ -0,0 +1,88 @@ +import { + AfterContentInit, + Component, + ContentChildren, + Input, + OnInit, + QueryList, + ViewChild +} from '@angular/core'; +import { + MatColumnDef, + MatHeaderRowDef, + MatRowDef, + MatSort, + MatTable, + MatTableDataSource +} from '@angular/material'; +import {DataSource} from '@angular/cdk/collections'; + +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'}, +]; + +/** + * @title Table example that shows how to wrap a table component for definition and behavior reuse. + */ +@Component({ + selector: 'table-wrapped-example', + styleUrls: ['table-wrapped-example.css'], + templateUrl: 'table-wrapped-example.html', +}) +export class TableWrappedExample implements OnInit { + displayedColumns: string[] = ['position', 'name', 'weight', 'symbol']; + dataSource = new MatTableDataSource(ELEMENT_DATA); + + @ViewChild('sort') sort: MatSort; + + ngOnInit() { + this.dataSource.sort = this.sort; + } +} + +/** + * Table component that accepts column and row definitions in its content to be registered to the + * table. + */ +@Component({ + selector: 'wrapper-table', + templateUrl: 'wrapper-table.html', + styles: [` + table { + width: 100%; + } + `] +}) +export class WrapperTable implements AfterContentInit { + @ContentChildren(MatHeaderRowDef) headerRowDefs: QueryList; + @ContentChildren(MatRowDef) rowDefs: QueryList>; + @ContentChildren(MatColumnDef) columnDefs: QueryList; + + @ViewChild(MatTable) table: MatTable; + + @Input() columns: string[]; + + @Input() dataSource: DataSource; + + ngAfterContentInit() { + this.columnDefs.forEach(columnDef => this.table.addColumnDef(columnDef)); + this.rowDefs.forEach(rowDef => this.table.addRowDef(rowDef)); + this.headerRowDefs.forEach(headerRowDef => this.table.addHeaderRowDef(headerRowDef)); + } +} diff --git a/src/demo-app/table/custom-table/wrapper-table.html b/src/material-examples/table-wrapped/wrapper-table.html similarity index 61% rename from src/demo-app/table/custom-table/wrapper-table.html rename to src/material-examples/table-wrapped/wrapper-table.html index 8c3b4356fcb..ad3946e8855 100644 --- a/src/demo-app/table/custom-table/wrapper-table.html +++ b/src/material-examples/table-wrapped/wrapper-table.html @@ -1,6 +1,12 @@ - +
+ + + + + +
No. {{element.position}} Weight