(true, []);
+
+ /** Whether the number of selected elements matches the total number of rows. */
+ isAllSelected() {
+ const numSelected = this.selection.selected.length;
+ const numRows = this.dataSource.data.length;
+ return numSelected === numRows;
+ }
+
+ /** Selects all rows if they are not all selected; otherwise clear selection. */
+ masterToggle() {
+ if (this.isAllSelected()) {
+ this.selection.clear();
+ return;
+ }
+
+ this.selection.select(...this.dataSource.data);
+ }
+
+ /** The label for the checkbox on the passed row */
+ checkboxLabel(row?: PeriodicElement): string {
+ if (!row) {
+ return `${this.isAllSelected() ? 'deselect' : 'select'} all`;
+ }
+ return `${this.selection.isSelected(row) ? 'deselect' : 'select'} row ${row.position + 1}`;
+ }
+}
diff --git a/src/components-examples/material-experimental/mdc-table/table-sorting/table-sorting-example.css b/src/components-examples/material-experimental/mdc-table/table-sorting/table-sorting-example.css
new file mode 100644
index 000000000000..11b40820cb5b
--- /dev/null
+++ b/src/components-examples/material-experimental/mdc-table/table-sorting/table-sorting-example.css
@@ -0,0 +1,7 @@
+table {
+ width: 100%;
+}
+
+th.mat-sort-header-sorted {
+ color: black;
+}
diff --git a/src/components-examples/material-experimental/mdc-table/table-sorting/table-sorting-example.html b/src/components-examples/material-experimental/mdc-table/table-sorting/table-sorting-example.html
new file mode 100644
index 000000000000..977bed07a81f
--- /dev/null
+++ b/src/components-examples/material-experimental/mdc-table/table-sorting/table-sorting-example.html
@@ -0,0 +1,29 @@
+
+
+
+
+ No.
+ {{element.position}}
+
+
+
+
+ Name
+ {{element.name}}
+
+
+
+
+ Weight
+ {{element.weight}}
+
+
+
+
+ Symbol
+ {{element.symbol}}
+
+
+
diff --git a/src/components-examples/material-experimental/mdc-table/table-sorting/table-sorting-example.ts b/src/components-examples/material-experimental/mdc-table/table-sorting/table-sorting-example.ts
new file mode 100644
index 000000000000..bf1d12bd1741
--- /dev/null
+++ b/src/components-examples/material-experimental/mdc-table/table-sorting/table-sorting-example.ts
@@ -0,0 +1,42 @@
+import {AfterViewInit, Component, ViewChild} from '@angular/core';
+import {MatSort} from '@angular/material/sort';
+import {MatTableDataSource} from '@angular/material/table';
+
+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 sorting
+ */
+@Component({
+ selector: 'table-sorting-example',
+ styleUrls: ['table-sorting-example.css'],
+ templateUrl: 'table-sorting-example.html',
+})
+export class TableSortingExample implements AfterViewInit {
+ displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
+ dataSource = new MatTableDataSource(ELEMENT_DATA);
+
+ @ViewChild(MatSort) sort: MatSort;
+
+ ngAfterViewInit() {
+ this.dataSource.sort = this.sort;
+ }
+}
diff --git a/src/components-examples/material-experimental/mdc-table/table-sticky-columns/table-sticky-columns-example.css b/src/components-examples/material-experimental/mdc-table/table-sticky-columns/table-sticky-columns-example.css
new file mode 100644
index 000000000000..b931bfc6acc6
--- /dev/null
+++ b/src/components-examples/material-experimental/mdc-table/table-sticky-columns/table-sticky-columns-example.css
@@ -0,0 +1,27 @@
+.example-container {
+ height: 400px;
+ width: 550px;
+ max-width: 100%;
+ overflow: auto;
+}
+
+table {
+ width: 800px;
+}
+
+td.mat-column-star {
+ width: 20px;
+ padding-right: 8px;
+}
+
+th.mat-column-position, td.mat-column-position {
+ padding-left: 8px;
+}
+
+.mat-mdc-table-sticky-border-elem-right {
+ border-left: 1px solid #e0e0e0;
+}
+
+.mat-mdc-table-sticky-border-elem-left {
+ border-right: 1px solid #e0e0e0;
+}
diff --git a/src/components-examples/material-experimental/mdc-table/table-sticky-columns/table-sticky-columns-example.html b/src/components-examples/material-experimental/mdc-table/table-sticky-columns/table-sticky-columns-example.html
new file mode 100644
index 000000000000..73b460f52121
--- /dev/null
+++ b/src/components-examples/material-experimental/mdc-table/table-sticky-columns/table-sticky-columns-example.html
@@ -0,0 +1,39 @@
+
+
+
+
+
+ Name
+ {{element.name}}
+
+
+
+
+ No.
+ {{element.position}}
+
+
+
+
+ Weight
+ {{element.weight}}
+
+
+
+
+ Symbol
+ {{element.symbol}}
+
+
+
+
+
+ more_vert
+
+
+
+
+
+ Add table
+ Remove table
+
+
+
+ Sticky Headers:
+
+ Row 1
+ Row 2
+
+
+
+
+ Sticky Footers:
+
+ Row 1
+ Row 2
+
+
+
+
+ Sticky Columns:
+
+ Position
+ Name
+ Weight
+ Symbol
+
+
+
+
+
+
+ Position
+ {{element.position}}
+ Position Footer
+
+
+
+ Name
+ {{element.name}}
+ Name Footer
+
+
+
+ Weight
+ {{element.weight}}
+ Weight Footer
+
+
+
+ Symbol
+ {{element.symbol}}
+ Symbol Footer
+
+
+
+ Filler header cell
+ Filler data cell
+ Filler footer cell
+
+
+
+
diff --git a/src/components-examples/material-experimental/mdc-table/table-sticky-complex-flex/table-sticky-complex-flex-example.ts b/src/components-examples/material-experimental/mdc-table/table-sticky-complex-flex/table-sticky-complex-flex-example.ts
new file mode 100644
index 000000000000..d52196e444bf
--- /dev/null
+++ b/src/components-examples/material-experimental/mdc-table/table-sticky-complex-flex/table-sticky-complex-flex-example.ts
@@ -0,0 +1,53 @@
+import {Component} from '@angular/core';
+import {MatButtonToggleGroup} from '@angular/material/button-toggle';
+
+/**
+ * @title Flex-layout tables with toggle-able sticky headers, footers, and columns
+ */
+@Component({
+ selector: 'table-sticky-complex-flex-example',
+ styleUrls: ['table-sticky-complex-flex-example.css'],
+ templateUrl: 'table-sticky-complex-flex-example.html',
+})
+export class TableStickyComplexFlexExample {
+ displayedColumns: string[] = [];
+ dataSource = ELEMENT_DATA;
+
+ tables = [0];
+
+ constructor() {
+ this.displayedColumns.length = 24;
+ this.displayedColumns.fill('filler');
+
+ // The first two columns should be position and name; the last two columns: weight, symbol
+ this.displayedColumns[0] = 'position';
+ this.displayedColumns[1] = 'name';
+ this.displayedColumns[22] = 'weight';
+ this.displayedColumns[23] = 'symbol';
+ }
+
+ /** Whether the button toggle group contains the id as an active value. */
+ isSticky(buttonToggleGroup: MatButtonToggleGroup, id: string) {
+ return (buttonToggleGroup.value || []).indexOf(id) !== -1;
+ }
+}
+
+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'},
+];
diff --git a/src/components-examples/material-experimental/mdc-table/table-sticky-complex/table-sticky-complex-example.css b/src/components-examples/material-experimental/mdc-table/table-sticky-complex/table-sticky-complex-example.css
new file mode 100644
index 000000000000..8bb485e0dd04
--- /dev/null
+++ b/src/components-examples/material-experimental/mdc-table/table-sticky-complex/table-sticky-complex-example.css
@@ -0,0 +1,40 @@
+.example-container {
+ height: 400px;
+ overflow: auto;
+}
+
+.mat-mdc-table-sticky {
+ background: #59abfd;
+ opacity: 1;
+}
+
+.example-sticky-toggle-group {
+ margin: 8px;
+}
+
+.mat-column-filler {
+ padding: 0 8px;
+ font-size: 10px;
+ text-align: center;
+}
+
+.mat-mdc-header-cell, .mat-mdc-footer-cell, .mat-mdc-cell {
+ min-width: 80px;
+ box-sizing: border-box;
+}
+
+.mat-mdc-table-sticky-border-elem-top {
+ border-bottom: 2px solid midnightblue;
+}
+
+.mat-mdc-table-sticky-border-elem-right {
+ border-left: 2px solid midnightblue;
+}
+
+.mat-mdc-table-sticky-border-elem-bottom {
+ border-top: 2px solid midnightblue;
+}
+
+.mat-mdc-table-sticky-border-elem-left {
+ border-right: 2px solid midnightblue;
+}
diff --git a/src/components-examples/material-experimental/mdc-table/table-sticky-complex/table-sticky-complex-example.html b/src/components-examples/material-experimental/mdc-table/table-sticky-complex/table-sticky-complex-example.html
new file mode 100644
index 000000000000..24944caefeff
--- /dev/null
+++ b/src/components-examples/material-experimental/mdc-table/table-sticky-complex/table-sticky-complex-example.html
@@ -0,0 +1,78 @@
+
+ Add table
+ Remove table
+
+
+
+ Sticky Headers:
+
+ Row 1
+ Row 2
+
+
+
+
+ Sticky Footers:
+
+ Row 1
+ Row 2
+
+
+
+
+ Sticky Columns:
+
+ Position
+ Name
+ Weight
+ Symbol
+
+
+
+
+
+
+ Position
+ {{element.position}}
+ Position Footer
+
+
+
+ Name
+ {{element.name}}
+ Name Footer
+
+
+
+ Weight
+ {{element.weight}}
+ Weight Footer
+
+
+
+ Symbol
+ {{element.symbol}}
+ Symbol Footer
+
+
+
+ Filler header cell
+ Filler data cell
+ Filler footer cell
+
+
+
+
+
+
+
+ Item
+ {{transaction.item}}
+ Total
+
+
+
+
+ Cost
+ {{transaction.cost | currency}}
+ {{getTotalCost() | currency}}
+
+
+
+
+
+
+
+
+ No.
+ {{element.position}}
+
+
+
+
+ Name
+ {{element.name}}
+
+
+
+
+ Weight
+ {{element.weight}}
+
+
+
+
+ Symbol
+ {{element.symbol}}
+
+
+
+
+
diff --git a/src/components-examples/material-experimental/mdc-table/table-text-column-advanced/table-text-column-advanced-example.ts b/src/components-examples/material-experimental/mdc-table/table-text-column-advanced/table-text-column-advanced-example.ts
new file mode 100644
index 000000000000..d2afe0b58c1e
--- /dev/null
+++ b/src/components-examples/material-experimental/mdc-table/table-text-column-advanced/table-text-column-advanced-example.ts
@@ -0,0 +1,46 @@
+import {Component} from '@angular/core';
+import {DecimalPipe} from '@angular/common';
+import {MatTableDataSource} from '@angular/material/table';
+
+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 Use of 'mat-text-column' with various configurations of the interface.
+ */
+@Component({
+ selector: 'table-text-column-advanced-example',
+ styleUrls: ['table-text-column-advanced-example.css'],
+ templateUrl: 'table-text-column-advanced-example.html',
+})
+export class TableTextColumnAdvancedExample {
+ displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
+ dataSource = new MatTableDataSource(ELEMENT_DATA);
+
+ headerText: string;
+
+ decimalPipe = new DecimalPipe('en-US');
+
+ /** Data accessor function that transforms the weight value to have at most 2 decimal digits. */
+ getWeight = (data: PeriodicElement): string => {
+ const result = this.decimalPipe.transform(data.weight, '1.0-2');
+ return result === null ? '' : result;
+ }
+}
diff --git a/src/components-examples/material-experimental/mdc-table/table-text-column/table-text-column-example.css b/src/components-examples/material-experimental/mdc-table/table-text-column/table-text-column-example.css
new file mode 100644
index 000000000000..1922e7ffa3ad
--- /dev/null
+++ b/src/components-examples/material-experimental/mdc-table/table-text-column/table-text-column-example.css
@@ -0,0 +1,3 @@
+table {
+ width: 100%;
+}
diff --git a/src/components-examples/material-experimental/mdc-table/table-text-column/table-text-column-example.html b/src/components-examples/material-experimental/mdc-table/table-text-column/table-text-column-example.html
new file mode 100644
index 000000000000..427692975ad0
--- /dev/null
+++ b/src/components-examples/material-experimental/mdc-table/table-text-column/table-text-column-example.html
@@ -0,0 +1,9 @@
+
diff --git a/src/components-examples/material-experimental/mdc-table/table-text-column/table-text-column-example.ts b/src/components-examples/material-experimental/mdc-table/table-text-column/table-text-column-example.ts
new file mode 100644
index 000000000000..21d800f0cdef
--- /dev/null
+++ b/src/components-examples/material-experimental/mdc-table/table-text-column/table-text-column-example.ts
@@ -0,0 +1,35 @@
+import {Component} from '@angular/core';
+
+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 Use of `mat-text-column` which can be used for simple columns that only need to display
+ * a text value for the header and cells.
+ */
+@Component({
+ selector: 'table-text-column-example',
+ styleUrls: ['table-text-column-example.css'],
+ templateUrl: 'table-text-column-example.html',
+})
+export class TableTextColumnExample {
+ displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
+ dataSource = ELEMENT_DATA;
+}
diff --git a/src/components-examples/material-experimental/mdc-table/table-with-ripples/table-with-ripples-example.css b/src/components-examples/material-experimental/mdc-table/table-with-ripples/table-with-ripples-example.css
new file mode 100644
index 000000000000..e69de29bb2d1
diff --git a/src/components-examples/material-experimental/mdc-table/table-with-ripples/table-with-ripples-example.html b/src/components-examples/material-experimental/mdc-table/table-with-ripples/table-with-ripples-example.html
new file mode 100644
index 000000000000..0a2704e8a7b2
--- /dev/null
+++ b/src/components-examples/material-experimental/mdc-table/table-with-ripples/table-with-ripples-example.html
@@ -0,0 +1,9 @@
+
+
+ Name
+ {{element.name}}
+
+
+
diff --git a/src/components-examples/material-experimental/mdc-table/table-with-ripples/table-with-ripples-example.ts b/src/components-examples/material-experimental/mdc-table/table-with-ripples/table-with-ripples-example.ts
new file mode 100644
index 000000000000..8bd776e21fbf
--- /dev/null
+++ b/src/components-examples/material-experimental/mdc-table/table-with-ripples/table-with-ripples-example.ts
@@ -0,0 +1,27 @@
+import {Component} from '@angular/core';
+
+const ELEMENT_DATA = [
+ {name: 'Hydrogen'},
+ {name: 'Helium'},
+ {name: 'Lithium'},
+ {name: 'Beryllium'},
+ {name: 'Boron'},
+ {name: 'Carbon'},
+ {name: 'Nitrogen'},
+ {name: 'Oxygen'},
+ {name: 'Fluorine'},
+ {name: 'Neon'},
+];
+
+/**
+ * @title Tables with Material Design ripples.
+ */
+@Component({
+ selector: 'table-with-ripples-example',
+ styleUrls: ['table-with-ripples-example.css'],
+ templateUrl: 'table-with-ripples-example.html',
+})
+export class TableWithRipplesExample {
+ displayedColumns: string[] = ['name'];
+ dataSource = ELEMENT_DATA;
+}
diff --git a/src/components-examples/material-experimental/mdc-table/table-wrapped/table-wrapped-example.css b/src/components-examples/material-experimental/mdc-table/table-wrapped/table-wrapped-example.css
new file mode 100644
index 000000000000..24c1e1546291
--- /dev/null
+++ b/src/components-examples/material-experimental/mdc-table/table-wrapped/table-wrapped-example.css
@@ -0,0 +1,7 @@
+table {
+ width: 100%;
+}
+
+button {
+ margin: 0 8px 8px 0;
+}
diff --git a/src/components-examples/material-experimental/mdc-table/table-wrapped/table-wrapped-example.html b/src/components-examples/material-experimental/mdc-table/table-wrapped/table-wrapped-example.html
new file mode 100644
index 000000000000..540d3fcba236
--- /dev/null
+++ b/src/components-examples/material-experimental/mdc-table/table-wrapped/table-wrapped-example.html
@@ -0,0 +1,22 @@
+
+ Clear table
+ Add data
+
+
+
+
+
+ Name
+ {{element.name}}
+
+
+
+
+ No data
+
+
diff --git a/src/components-examples/material-experimental/mdc-table/table-wrapped/table-wrapped-example.ts b/src/components-examples/material-experimental/mdc-table/table-wrapped/table-wrapped-example.ts
new file mode 100644
index 000000000000..98901b9d206d
--- /dev/null
+++ b/src/components-examples/material-experimental/mdc-table/table-wrapped/table-wrapped-example.ts
@@ -0,0 +1,100 @@
+import {DataSource} from '@angular/cdk/collections';
+import {
+ AfterContentInit,
+ Component,
+ ContentChildren,
+ Input,
+ AfterViewInit,
+ QueryList,
+ ViewChild,
+ ContentChild,
+} from '@angular/core';
+import {MatSort} from '@angular/material/sort';
+import {
+ MatColumnDef,
+ MatHeaderRowDef,
+ MatNoDataRow,
+ MatRowDef,
+ MatTable,
+ MatTableDataSource
+} from '@angular/material-experimental/mdc-table';
+
+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 AfterViewInit {
+ displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
+ dataSource = new MatTableDataSource(ELEMENT_DATA);
+
+ @ViewChild('sort') sort: MatSort;
+
+ ngAfterViewInit() {
+ this.dataSource.sort = this.sort;
+ }
+
+ clearTable() {
+ this.dataSource.data = [];
+ }
+
+ addData() {
+ this.dataSource.data = ELEMENT_DATA;
+ }
+}
+
+/**
+ * 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;
+ @ContentChild(MatNoDataRow) noDataRow: MatNoDataRow;
+
+ @ViewChild(MatTable, {static: true}) 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));
+ this.table.setNoDataRow(this.noDataRow);
+ }
+}
diff --git a/src/components-examples/material-experimental/mdc-table/table-wrapped/wrapper-table.html b/src/components-examples/material-experimental/mdc-table/table-wrapped/wrapper-table.html
new file mode 100644
index 000000000000..ad3946e88557
--- /dev/null
+++ b/src/components-examples/material-experimental/mdc-table/table-wrapped/wrapper-table.html
@@ -0,0 +1,21 @@
+
+
+ No.
+ {{element.position}}
+
+
+
+
+ Weight
+ {{element.weight}}
+
+
+
+
+ Symbol
+ {{element.symbol}}
+
+
diff --git a/src/dev-app/mdc-table/BUILD.bazel b/src/dev-app/mdc-table/BUILD.bazel
index b3cb0c52f2f8..43df5fbb0370 100644
--- a/src/dev-app/mdc-table/BUILD.bazel
+++ b/src/dev-app/mdc-table/BUILD.bazel
@@ -1,4 +1,3 @@
-load("@io_bazel_rules_sass//:defs.bzl", "sass_binary")
load("//tools:defaults.bzl", "ng_module")
package(default_visibility = ["//visibility:public"])
@@ -8,16 +7,10 @@ ng_module(
srcs = glob(["**/*.ts"]),
assets = [
"mdc-table-demo.html",
- ":mdc_table_demo_scss",
],
deps = [
+ "//src/components-examples/material-experimental/mdc-table",
"//src/material-experimental/mdc-table",
- "//src/material/icon",
"@npm//@angular/router",
],
)
-
-sass_binary(
- name = "mdc_table_demo_scss",
- src = "mdc-table-demo.scss",
-)
diff --git a/src/dev-app/mdc-table/mdc-table-demo-module.ts b/src/dev-app/mdc-table/mdc-table-demo-module.ts
index 209f0849d420..6ad801caf7bc 100644
--- a/src/dev-app/mdc-table/mdc-table-demo-module.ts
+++ b/src/dev-app/mdc-table/mdc-table-demo-module.ts
@@ -11,11 +11,13 @@ import {MatIconModule} from '@angular/material/icon';
import {MatTableModule} from '@angular/material-experimental/mdc-table';
import {RouterModule} from '@angular/router';
import {MdcTableDemo} from './mdc-table-demo';
+import {MdcTableExamplesModule} from '@angular/components-examples/material-experimental/mdc-table';
@NgModule({
imports: [
MatIconModule,
MatTableModule,
+ MdcTableExamplesModule,
RouterModule.forChild([{path: '', component: MdcTableDemo}]),
],
declarations: [MdcTableDemo],
diff --git a/src/dev-app/mdc-table/mdc-table-demo.html b/src/dev-app/mdc-table/mdc-table-demo.html
index 856253ea5913..13661ed6f338 100644
--- a/src/dev-app/mdc-table/mdc-table-demo.html
+++ b/src/dev-app/mdc-table/mdc-table-demo.html
@@ -1,171 +1,68 @@
- Basic
-
-
-
-
- No.
- {{element.position}}
-
-
-
-
- Name
- {{element.name}}
-
-
-
-
- Weight
- {{element.weight}}
-
-
-
-
- Symbol
- {{element.symbol}}
-
-
-
-
Sticky Columns
-
-
-
-
- Name
- {{element.name}}
-
-
-
-
- No.
- {{element.position}}
-
-
-
-
- Weight
- {{element.weight}}
-
-
-
-
- Symbol
- {{element.symbol}}
-
-
-
-
-
- more_vert
-
-
-
-
-
Sticky Header
-
-
- Sticky Footer
-
-
-Basic flex table
-
-
-
- No.
- {{element.position}}
-
-
-
-
- Name
- {{element.name}}
-
-
-
-
- Weight
- {{element.weight}}
-
-
-
-
- Symbol
- {{element.symbol}}
-
-
-
+Table basic
+Table basic with recycled rows
+Table basic flex
+Table dynamic columns
+Table expandable rows
+Table filtering
+Table footer row
+Table with http
+Table with multiple headers and footers
+Table overview
+Table row context
+Table with pagination
+Table with selection
+Table with sorting
+Table with sticky columns
+Table with sticky headers, footers and columns
+Table flex with sticky headers, footers and columns
+Table with sticky footer
+Table with sticky header
+Table with mat-text-column
+Table with mat-text-column advanced
+Table wrapped in reusable component
+Table wrapped re-orderable columns
+