;
-
- 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 |