feat(material/table): migrate MDC examples (#25492)

angular · Aug 19, 2022 · a8f847c · a8f847c
1 parent 556e69a
commit a8f847c
Show file tree

Hide file tree

Showing 129 changed files with 337 additions and 158 deletions.
diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
@@ -205,7 +205,7 @@
 /src/dev-app/mdc-snack-bar/**                          @andrewseguin
 /src/dev-app/mdc-slide-toggle/**                       @crisbeto
 /src/dev-app/mdc-slider/**                             @devversion
-/src/dev-app/mdc-table/**                              @andrewseguin
+/src/dev-app/legacy-table/**                           @andrewseguin
 /src/dev-app/mdc-tabs/**                               @crisbeto
 /src/dev-app/mdc-tooltip/**                            @crisbeto
 /src/dev-app/menu/**                                   @crisbeto

diff --git a/.../material-experimental/mdc-table/index.ts → src/components-examples/material/index.ts b/.../material-experimental/mdc-table/index.ts → src/components-examples/material/index.ts
diff --git a/...terial-experimental/mdc-table/BUILD.bazel → ...xamples/material/legacy-table/BUILD.bazel b/...terial-experimental/mdc-table/BUILD.bazel → ...xamples/material/legacy-table/BUILD.bazel
@@ -3,7 +3,7 @@ load("//tools:defaults.bzl", "ng_module", "ng_test_library", "ng_web_test_suite"
 package(default_visibility = ["//visibility:public"])
 
 ng_module(
-    name = "mdc-table",
+    name = "legacy-table",
     srcs = glob(
         ["**/*.ts"],
         exclude = ["**/*.spec.ts"],
@@ -47,7 +47,7 @@ ng_test_library(
     name = "unit_tests_lib",
     srcs = glob(["**/*.spec.ts"]),
     deps = [
-        ":mdc-table",
+        ":legacy-table",
         "//src/cdk/testing",
         "//src/cdk/testing/testbed",
         "//src/material/legacy-table",

diff --git a/src/components-examples/material/legacy-table/index.ts b/src/components-examples/material/legacy-table/index.ts
@@ -0,0 +1,134 @@
+import {CommonModule} from '@angular/common';
+import {NgModule} from '@angular/core';
+import {MatRippleModule} from '@angular/material/core';
+import {MatLegacyButtonModule} from '@angular/material/legacy-button';
+import {MatButtonToggleModule} from '@angular/material/button-toggle';
+import {MatLegacyCheckboxModule} from '@angular/material/legacy-checkbox';
+import {MatIconModule} from '@angular/material/icon';
+import {MatLegacyInputModule} from '@angular/material/legacy-input';
+import {MatLegacyPaginatorModule} from '@angular/material/legacy-paginator';
+import {MatLegacyProgressSpinnerModule} from '@angular/material/legacy-progress-spinner';
+import {MatSortModule} from '@angular/material/sort';
+import {MatLegacyTableModule} from '@angular/material/legacy-table';
+import {DragDropModule} from '@angular/cdk/drag-drop';
+import {CdkTableModule} from '@angular/cdk/table';
+
+import {TableFlexBasicExample} from './table-flex-basic/table-flex-basic-example';
+import {TableBasicExample} from './table-basic/table-basic-example';
+import {TableDynamicColumnsExample} from './table-dynamic-columns/table-dynamic-columns-example';
+import {TableExpandableRowsExample} from './table-expandable-rows/table-expandable-rows-example';
+import {TableFilteringExample} from './table-filtering/table-filtering-example';
+import {TableFooterRowExample} from './table-footer-row/table-footer-row-example';
+import {TableHttpExample} from './table-http/table-http-example';
+import {TableMultipleHeaderFooterExample} from './table-multiple-header-footer/table-multiple-header-footer-example';
+import {TableOverviewExample} from './table-overview/table-overview-example';
+import {TablePaginationExample} from './table-pagination/table-pagination-example';
+import {TableRowContextExample} from './table-row-context/table-row-context-example';
+import {TableSelectionExample} from './table-selection/table-selection-example';
+import {TableSortingExample} from './table-sorting/table-sorting-example';
+import {TableStickyColumnsExample} from './table-sticky-columns/table-sticky-columns-example';
+import {TableStickyComplexFlexExample} from './table-sticky-complex-flex/table-sticky-complex-flex-example';
+import {TableStickyComplexExample} from './table-sticky-complex/table-sticky-complex-example';
+import {TableStickyFooterExample} from './table-sticky-footer/table-sticky-footer-example';
+import {TableStickyHeaderExample} from './table-sticky-header/table-sticky-header-example';
+import {TableTextColumnAdvancedExample} from './table-text-column-advanced/table-text-column-advanced-example';
+import {TableTextColumnExample} from './table-text-column/table-text-column-example';
+import {TableWrappedExample, WrapperTable} from './table-wrapped/table-wrapped-example';
+import {TableReorderableExample} from './table-reorderable/table-reorderable-example';
+import {TableRecycleRowsExample} from './table-recycle-rows/table-recycle-rows-example';
+import {TableHarnessExample} from './table-harness/table-harness-example';
+import {TableWithRipplesExample} from './table-with-ripples/table-with-ripples-example';
+import {TableColumnStylingExample} from './table-column-styling/table-column-styling-example';
+import {TableRowBindingExample} from './table-row-binding/table-row-binding-example';
+import {TableDynamicArrayDataExample} from './table-dynamic-array-data/table-dynamic-array-data-example';
+import {TableDynamicObservableDataExample} from './table-dynamic-observable-data/table-dynamic-observable-data-example';
+import {TableGeneratedColumnsExample} from './table-generated-columns/table-generated-columns-example';
+
+export {
+  TableBasicExample,
+  TableColumnStylingExample,
+  TableDynamicArrayDataExample,
+  TableDynamicColumnsExample,
+  TableDynamicObservableDataExample,
+  TableExpandableRowsExample,
+  TableFilteringExample,
+  TableFlexBasicExample,
+  TableFooterRowExample,
+  TableGeneratedColumnsExample,
+  TableHarnessExample,
+  TableHttpExample,
+  TableMultipleHeaderFooterExample,
+  TableOverviewExample,
+  TablePaginationExample,
+  TableRecycleRowsExample,
+  TableReorderableExample,
+  TableRowBindingExample,
+  TableRowContextExample,
+  TableSelectionExample,
+  TableSortingExample,
+  TableStickyColumnsExample,
+  TableStickyComplexExample,
+  TableStickyComplexFlexExample,
+  TableStickyFooterExample,
+  TableStickyHeaderExample,
+  TableTextColumnAdvancedExample,
+  TableTextColumnExample,
+  TableWithRipplesExample,
+  TableWrappedExample,
+  WrapperTable,
+};
+
+const EXAMPLES = [
+  TableBasicExample,
+  TableColumnStylingExample,
+  TableDynamicArrayDataExample,
+  TableDynamicColumnsExample,
+  TableDynamicObservableDataExample,
+  TableExpandableRowsExample,
+  TableFilteringExample,
+  TableFlexBasicExample,
+  TableFooterRowExample,
+  TableGeneratedColumnsExample,
+  TableHarnessExample,
+  TableHttpExample,
+  TableMultipleHeaderFooterExample,
+  TableOverviewExample,
+  TablePaginationExample,
+  TableRecycleRowsExample,
+  TableReorderableExample,
+  TableRowBindingExample,
+  TableRowContextExample,
+  TableSelectionExample,
+  TableSortingExample,
+  TableStickyColumnsExample,
+  TableStickyComplexExample,
+  TableStickyComplexFlexExample,
+  TableStickyFooterExample,
+  TableStickyHeaderExample,
+  TableTextColumnAdvancedExample,
+  TableTextColumnExample,
+  TableWithRipplesExample,
+  TableWrappedExample,
+  WrapperTable,
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    MatLegacyButtonModule,
+    MatButtonToggleModule,
+    MatLegacyCheckboxModule,
+    MatIconModule,
+    MatLegacyInputModule,
+    MatLegacyPaginatorModule,
+    MatLegacyProgressSpinnerModule,
+    MatRippleModule,
+    MatSortModule,
+    MatLegacyTableModule,
+    CdkTableModule,
+    DragDropModule,
+  ],
+  declarations: EXAMPLES,
+  exports: EXAMPLES,
+})
+export class TableExamplesModule {}
diff --git a/...table/table-basic/table-basic-example.css → ...table/table-basic/table-basic-example.css b/...table/table-basic/table-basic-example.css → ...table/table-basic/table-basic-example.css
diff --git a/...able/table-basic/table-basic-example.html → ...able/table-basic/table-basic-example.html b/...able/table-basic/table-basic-example.html → ...able/table-basic/table-basic-example.html
diff --git a/...-table/table-basic/table-basic-example.ts → ...-table/table-basic/table-basic-example.ts b/...-table/table-basic/table-basic-example.ts → ...-table/table-basic/table-basic-example.ts
diff --git a/...-styling/table-column-styling-example.css → ...-styling/table-column-styling-example.css b/...-styling/table-column-styling-example.css → ...-styling/table-column-styling-example.css
diff --git a/...styling/table-column-styling-example.html → ...styling/table-column-styling-example.html b/...styling/table-column-styling-example.html → ...styling/table-column-styling-example.html
diff --git a/...n-styling/table-column-styling-example.ts → ...n-styling/table-column-styling-example.ts b/...n-styling/table-column-styling-example.ts → ...n-styling/table-column-styling-example.ts
diff --git a/...data/table-dynamic-array-data-example.css → ...data/table-dynamic-array-data-example.css b/...data/table-dynamic-array-data-example.css → ...data/table-dynamic-array-data-example.css
diff --git a/...ata/table-dynamic-array-data-example.html → ...ata/table-dynamic-array-data-example.html b/...ata/table-dynamic-array-data-example.html → ...ata/table-dynamic-array-data-example.html
diff --git a/...-data/table-dynamic-array-data-example.ts → ...-data/table-dynamic-array-data-example.ts b/...-data/table-dynamic-array-data-example.ts → ...-data/table-dynamic-array-data-example.ts
diff --git a/...columns/table-dynamic-columns-example.css → ...columns/table-dynamic-columns-example.css b/...columns/table-dynamic-columns-example.css → ...columns/table-dynamic-columns-example.css
diff --git a/...olumns/table-dynamic-columns-example.html → ...olumns/table-dynamic-columns-example.html b/...olumns/table-dynamic-columns-example.html → ...olumns/table-dynamic-columns-example.html
diff --git a/...-columns/table-dynamic-columns-example.ts → ...-columns/table-dynamic-columns-example.ts b/...-columns/table-dynamic-columns-example.ts → ...-columns/table-dynamic-columns-example.ts
diff --git a/...table-dynamic-observable-data-example.css → ...table-dynamic-observable-data-example.css b/...table-dynamic-observable-data-example.css → ...table-dynamic-observable-data-example.css
diff --git a/...able-dynamic-observable-data-example.html → ...able-dynamic-observable-data-example.html b/...able-dynamic-observable-data-example.html → ...able-dynamic-observable-data-example.html
diff --git a/.../table-dynamic-observable-data-example.ts → .../table-dynamic-observable-data-example.ts b/.../table-dynamic-observable-data-example.ts → .../table-dynamic-observable-data-example.ts
diff --git a/...le-rows/table-expandable-rows-example.css → ...le-rows/table-expandable-rows-example.css b/...le-rows/table-expandable-rows-example.css → ...le-rows/table-expandable-rows-example.css
diff --git a/...e-rows/table-expandable-rows-example.html → ...e-rows/table-expandable-rows-example.html b/...e-rows/table-expandable-rows-example.html → ...e-rows/table-expandable-rows-example.html
diff --git a/...ble-rows/table-expandable-rows-example.ts → ...ble-rows/table-expandable-rows-example.ts b/...ble-rows/table-expandable-rows-example.ts → ...ble-rows/table-expandable-rows-example.ts
diff --git a/...ble-filtering/table-filtering-example.css → ...ble-filtering/table-filtering-example.css b/...ble-filtering/table-filtering-example.css → ...ble-filtering/table-filtering-example.css
diff --git a/...le-filtering/table-filtering-example.html → ...le-filtering/table-filtering-example.html b/...le-filtering/table-filtering-example.html → ...le-filtering/table-filtering-example.html
diff --git a/...able-filtering/table-filtering-example.ts → ...able-filtering/table-filtering-example.ts b/...able-filtering/table-filtering-example.ts → ...able-filtering/table-filtering-example.ts
diff --git a/...e-flex-basic/table-flex-basic-example.css → ...e-flex-basic/table-flex-basic-example.css b/...e-flex-basic/table-flex-basic-example.css → ...e-flex-basic/table-flex-basic-example.css
diff --git a/...-flex-basic/table-flex-basic-example.html → ...-flex-basic/table-flex-basic-example.html b/...-flex-basic/table-flex-basic-example.html → ...-flex-basic/table-flex-basic-example.html
diff --git a/...le-flex-basic/table-flex-basic-example.ts → ...le-flex-basic/table-flex-basic-example.ts b/...le-flex-basic/table-flex-basic-example.ts → ...le-flex-basic/table-flex-basic-example.ts
diff --git a/...e-footer-row/table-footer-row-example.css → ...e-footer-row/table-footer-row-example.css b/...e-footer-row/table-footer-row-example.css → ...e-footer-row/table-footer-row-example.css
@@ -2,6 +2,6 @@ table {
   width: 100%;
 }
 
-tr.mat-mdc-footer-row td {
+tr.mat-footer-row {
   font-weight: bold;
 }
diff --git a/...-footer-row/table-footer-row-example.html → ...-footer-row/table-footer-row-example.html b/...-footer-row/table-footer-row-example.html → ...-footer-row/table-footer-row-example.html
diff --git a/...le-footer-row/table-footer-row-example.ts → ...le-footer-row/table-footer-row-example.ts b/...le-footer-row/table-footer-row-example.ts → ...le-footer-row/table-footer-row-example.ts
diff --git a/...lumns/table-generated-columns-example.css → ...lumns/table-generated-columns-example.css b/...lumns/table-generated-columns-example.css → ...lumns/table-generated-columns-example.css
diff --git a/...umns/table-generated-columns-example.html → ...umns/table-generated-columns-example.html b/...umns/table-generated-columns-example.html → ...umns/table-generated-columns-example.html
@@ -8,6 +8,6 @@
     </td>
   </ng-container>
 
-  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-  <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
+  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
 </table>
diff --git a/...olumns/table-generated-columns-example.ts → ...olumns/table-generated-columns-example.ts b/...olumns/table-generated-columns-example.ts → ...olumns/table-generated-columns-example.ts
diff --git a/.../table-harness/table-harness-example.html → .../table-harness/table-harness-example.html b/.../table-harness/table-harness-example.html → .../table-harness/table-harness-example.html
diff --git a/...ble-harness/table-harness-example.spec.ts → ...ble-harness/table-harness-example.spec.ts b/...ble-harness/table-harness-example.spec.ts → ...ble-harness/table-harness-example.spec.ts
diff --git a/...le/table-harness/table-harness-example.ts → ...le/table-harness/table-harness-example.ts b/...le/table-harness/table-harness-example.ts → ...le/table-harness/table-harness-example.ts
diff --git a/...c-table/table-http/table-http-example.css → ...y-table/table-http/table-http-example.css b/...c-table/table-http/table-http-example.css → ...y-table/table-http/table-http-example.css
diff --git a/...-table/table-http/table-http-example.html → ...-table/table-http/table-http-example.html b/...-table/table-http/table-http-example.html → ...-table/table-http/table-http-example.html
@@ -42,5 +42,5 @@
     </table>
   </div>
 
-  <mat-paginator [length]="resultsLength" [pageSize]="30"></mat-paginator>
+  <mat-paginator [length]="resultsLength" [pageSize]="30" aria-label="Select page of GitHub search results"></mat-paginator>
 </div>
diff --git a/...dc-table/table-http/table-http-example.ts → ...cy-table/table-http/table-http-example.ts b/...dc-table/table-http/table-http-example.ts → ...cy-table/table-http/table-http-example.ts
diff --git a/.../table-multiple-header-footer-example.css → .../table-multiple-header-footer-example.css b/.../table-multiple-header-footer-example.css → .../table-multiple-header-footer-example.css
diff --git a/...table-multiple-header-footer-example.html → ...table-multiple-header-footer-example.html b/...table-multiple-header-footer-example.html → ...table-multiple-header-footer-example.html
diff --git a/...r/table-multiple-header-footer-example.ts → ...r/table-multiple-header-footer-example.ts b/...r/table-multiple-header-footer-example.ts → ...r/table-multiple-header-footer-example.ts
diff --git a/...table-overview/table-overview-example.css → ...table-overview/table-overview-example.css b/...table-overview/table-overview-example.css → ...table-overview/table-overview-example.css
diff --git a/...able-overview/table-overview-example.html → ...able-overview/table-overview-example.html b/...able-overview/table-overview-example.html → ...able-overview/table-overview-example.html
@@ -39,6 +39,5 @@
     </tr>
   </table>
 
-  <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
+  <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]" aria-label="Select page of users"></mat-paginator>
 </div>
-
diff --git a/.../table-overview/table-overview-example.ts → .../table-overview/table-overview-example.ts b/.../table-overview/table-overview-example.ts → .../table-overview/table-overview-example.ts
diff --git a/...e-pagination/table-pagination-example.css → ...e-pagination/table-pagination-example.css b/...e-pagination/table-pagination-example.css → ...e-pagination/table-pagination-example.css
diff --git a/...-pagination/table-pagination-example.html → ...-pagination/table-pagination-example.html b/...-pagination/table-pagination-example.html → ...-pagination/table-pagination-example.html
@@ -29,5 +29,8 @@
     <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
   </table>
 
-  <mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
+  <mat-paginator [pageSizeOptions]="[5, 10, 20]"
+                 showFirstLastButtons 
+                 aria-label="Select page of periodic elements">
+  </mat-paginator>
 </div>
diff --git a/...le-pagination/table-pagination-example.ts → ...le-pagination/table-pagination-example.ts b/...le-pagination/table-pagination-example.ts → ...le-pagination/table-pagination-example.ts
diff --git a/...cycle-rows/table-recycle-rows-example.css → ...cycle-rows/table-recycle-rows-example.css b/...cycle-rows/table-recycle-rows-example.css → ...cycle-rows/table-recycle-rows-example.css
diff --git a/...ycle-rows/table-recycle-rows-example.html → ...ycle-rows/table-recycle-rows-example.html b/...ycle-rows/table-recycle-rows-example.html → ...ycle-rows/table-recycle-rows-example.html
diff --git a/...ecycle-rows/table-recycle-rows-example.ts → ...ecycle-rows/table-recycle-rows-example.ts b/...ecycle-rows/table-recycle-rows-example.ts → ...ecycle-rows/table-recycle-rows-example.ts
diff --git a/...reorderable/table-reorderable-example.css → ...reorderable/table-reorderable-example.css b/...reorderable/table-reorderable-example.css → ...reorderable/table-reorderable-example.css
diff --git a/...eorderable/table-reorderable-example.html → ...eorderable/table-reorderable-example.html b/...eorderable/table-reorderable-example.html → ...eorderable/table-reorderable-example.html
diff --git a/...-reorderable/table-reorderable-example.ts → ...-reorderable/table-reorderable-example.ts b/...-reorderable/table-reorderable-example.ts → ...-reorderable/table-reorderable-example.ts
diff --git a/...row-binding/table-row-binding-example.css → ...row-binding/table-row-binding-example.css b/...row-binding/table-row-binding-example.css → ...row-binding/table-row-binding-example.css
@@ -2,13 +2,13 @@
   width: 100%;
 }
 
-.mat-mdc-row .mat-mdc-cell {
+.mat-row .mat-cell {
   border-bottom: 1px solid transparent;
   border-top: 1px solid transparent;
   cursor: pointer;
 }
 
-.mat-mdc-row:hover .mat-mdc-cell {
+.mat-row:hover .mat-cell {
   border-color: currentColor;
 }
 

diff --git a/...ow-binding/table-row-binding-example.html → ...ow-binding/table-row-binding-example.html b/...ow-binding/table-row-binding-example.html → ...ow-binding/table-row-binding-example.html
diff --git a/...-row-binding/table-row-binding-example.ts → ...-row-binding/table-row-binding-example.ts b/...-row-binding/table-row-binding-example.ts → ...-row-binding/table-row-binding-example.ts
diff --git a/...row-context/table-row-context-example.css → ...row-context/table-row-context-example.css b/...row-context/table-row-context-example.css → ...row-context/table-row-context-example.css
diff --git a/...ow-context/table-row-context-example.html → ...ow-context/table-row-context-example.html b/...ow-context/table-row-context-example.html → ...ow-context/table-row-context-example.html
diff --git a/...-row-context/table-row-context-example.ts → ...-row-context/table-row-context-example.ts b/...-row-context/table-row-context-example.ts → ...-row-context/table-row-context-example.ts
diff --git a/...ble-selection/table-selection-example.css → ...ble-selection/table-selection-example.css b/...ble-selection/table-selection-example.css → ...ble-selection/table-selection-example.css
diff --git a/...le-selection/table-selection-example.html → ...le-selection/table-selection-example.html b/...le-selection/table-selection-example.html → ...le-selection/table-selection-example.html
diff --git a/...able-selection/table-selection-example.ts → ...able-selection/table-selection-example.ts b/...able-selection/table-selection-example.ts → ...able-selection/table-selection-example.ts
diff --git a/...e/table-sorting/table-sorting-example.css → ...e/table-sorting/table-sorting-example.css b/...e/table-sorting/table-sorting-example.css → ...e/table-sorting/table-sorting-example.css
diff --git a/.../table-sorting/table-sorting-example.html → .../table-sorting/table-sorting-example.html b/.../table-sorting/table-sorting-example.html → .../table-sorting/table-sorting-example.html
@@ -1,26 +1,35 @@
-<table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">
+<table mat-table [dataSource]="dataSource" matSort (matSortChange)="announceSortChange($event)"
+    class="mat-elevation-z8">
 
   <!-- Position Column -->
   <ng-container matColumnDef="position">
-    <th mat-header-cell *matHeaderCellDef mat-sort-header> No. </th>
+    <th mat-header-cell *matHeaderCellDef mat-sort-header sortActionDescription="Sort by number">
+      No.
+    </th>
     <td mat-cell *matCellDef="let element"> {{element.position}} </td>
   </ng-container>
 
   <!-- Name Column -->
   <ng-container matColumnDef="name">
-    <th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
+    <th mat-header-cell *matHeaderCellDef mat-sort-header sortActionDescription="Sort by name">
+      Name
+    </th>
     <td mat-cell *matCellDef="let element"> {{element.name}} </td>
   </ng-container>
 
   <!-- Weight Column -->
   <ng-container matColumnDef="weight">
-    <th mat-header-cell *matHeaderCellDef mat-sort-header> Weight </th>
+    <th mat-header-cell *matHeaderCellDef mat-sort-header sortActionDescription="Sort by weight">
+      Weight
+    </th>
     <td mat-cell *matCellDef="let element"> {{element.weight}} </td>
   </ng-container>
 
   <!-- Symbol Column -->
   <ng-container matColumnDef="symbol">
-    <th mat-header-cell *matHeaderCellDef mat-sort-header> Symbol </th>
+    <th mat-header-cell *matHeaderCellDef mat-sort-header sortActionDescription="Sort by symbol">
+      Symbol
+    </th>
     <td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
   </ng-container>
 

diff --git a/...le/table-sorting/table-sorting-example.ts → ...le/table-sorting/table-sorting-example.ts b/...le/table-sorting/table-sorting-example.ts → ...le/table-sorting/table-sorting-example.ts
@@ -1,5 +1,6 @@
+import {LiveAnnouncer} from '@angular/cdk/a11y';
 import {AfterViewInit, Component, ViewChild} from '@angular/core';
-import {MatSort} from '@angular/material/sort';
+import {MatSort, Sort} from '@angular/material/sort';
 import {MatLegacyTableDataSource} from '@angular/material/legacy-table';
 
 export interface PeriodicElement {
@@ -34,9 +35,24 @@ export class TableSortingExample implements AfterViewInit {
   displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
   dataSource = new MatLegacyTableDataSource(ELEMENT_DATA);
 
+  constructor(private _liveAnnouncer: LiveAnnouncer) {}
+
   @ViewChild(MatSort) sort: MatSort;
 
   ngAfterViewInit() {
     this.dataSource.sort = this.sort;
   }
+
+  /** Announce the change in sort state for assistive technology. */
+  announceSortChange(sortState: Sort) {
+    // This example uses English messages. If your application supports
+    // multiple language, you would internationalize these strings.
+    // Furthermore, you can customize the message to add additional
+    // details about the values being sorted.
+    if (sortState.direction) {
+      this._liveAnnouncer.announce(`Sorted ${sortState.direction}ending`);
+    } else {
+      this._liveAnnouncer.announce('Sorting cleared');
+    }
+  }
 }
diff --git a/...-columns/table-sticky-columns-example.css → ...-columns/table-sticky-columns-example.css b/...-columns/table-sticky-columns-example.css → ...-columns/table-sticky-columns-example.css
@@ -18,10 +18,10 @@ th.mat-column-position, td.mat-column-position {
   padding-left: 8px;
 }
 
-.mat-mdc-table-sticky-border-elem-right {
+.mat-table-sticky-border-elem-right {
   border-left: 1px solid #e0e0e0;
 }
 
-.mat-mdc-table-sticky-border-elem-left {
+.mat-table-sticky-border-elem-left {
   border-right: 1px solid #e0e0e0;
 }
diff --git a/...columns/table-sticky-columns-example.html → ...columns/table-sticky-columns-example.html b/...columns/table-sticky-columns-example.html → ...columns/table-sticky-columns-example.html
diff --git a/...y-columns/table-sticky-columns-example.ts → ...y-columns/table-sticky-columns-example.ts b/...y-columns/table-sticky-columns-example.ts → ...y-columns/table-sticky-columns-example.ts
diff --git a/...lex/table-sticky-complex-flex-example.css → ...lex/table-sticky-complex-flex-example.css b/...lex/table-sticky-complex-flex-example.css → ...lex/table-sticky-complex-flex-example.css
@@ -3,7 +3,7 @@
   overflow: auto;
 }
 
-.mat-mdc-table-sticky {
+.mat-table-sticky {
   background: #59abfd;
   opacity: 1;
 }
@@ -18,27 +18,27 @@
   text-align: center;
 }
 
-.mat-mdc-header-cell, .mat-mdc-footer-cell, .mat-mdc-cell {
+.mat-header-cell, .mat-footer-cell, .mat-cell {
   min-width: 80px;
   box-sizing: border-box;
 }
 
-.mat-mdc-header-row, .mat-mdc-footer-row, .mat-mdc-row {
+.mat-header-row, .mat-footer-row, .mat-row {
   min-width: 1920px; /* 24 columns, 80px each */
 }
 
-.mat-mdc-table-sticky-border-elem-top {
+.mat-table-sticky-border-elem-top {
   border-bottom: 2px solid midnightblue;
 }
 
-.mat-mdc-table-sticky-border-elem-right {
+.mat-table-sticky-border-elem-right {
   border-left: 2px solid midnightblue;
 }
 
-.mat-mdc-table-sticky-border-elem-bottom {
+.mat-table-sticky-border-elem-bottom {
   border-top: 2px solid midnightblue;
 }
 
-.mat-mdc-table-sticky-border-elem-left {
+.mat-table-sticky-border-elem-left {
   border-right: 2px solid midnightblue;
 }
diff --git a/...ex/table-sticky-complex-flex-example.html → ...ex/table-sticky-complex-flex-example.html b/...ex/table-sticky-complex-flex-example.html → ...ex/table-sticky-complex-flex-example.html
diff --git a/...flex/table-sticky-complex-flex-example.ts → ...flex/table-sticky-complex-flex-example.ts b/...flex/table-sticky-complex-flex-example.ts → ...flex/table-sticky-complex-flex-example.ts
diff --git a/...-complex/table-sticky-complex-example.css → ...-complex/table-sticky-complex-example.css b/...-complex/table-sticky-complex-example.css → ...-complex/table-sticky-complex-example.css
@@ -3,7 +3,7 @@
   overflow: auto;
 }
 
-.mat-mdc-table-sticky {
+.mat-table-sticky {
   background: #59abfd;
   opacity: 1;
 }
@@ -18,23 +18,23 @@
   text-align: center;
 }
 
-.mat-mdc-header-cell, .mat-mdc-footer-cell, .mat-mdc-cell {
+.mat-header-cell, .mat-footer-cell, .mat-cell {
   min-width: 80px;
   box-sizing: border-box;
 }
 
-.mat-mdc-table-sticky-border-elem-top {
+.mat-table-sticky-border-elem-top {
   border-bottom: 2px solid midnightblue;
 }
 
-.mat-mdc-table-sticky-border-elem-right {
+.mat-table-sticky-border-elem-right {
   border-left: 2px solid midnightblue;
 }
 
-.mat-mdc-table-sticky-border-elem-bottom {
+.mat-table-sticky-border-elem-bottom {
   border-top: 2px solid midnightblue;
 }
 
-.mat-mdc-table-sticky-border-elem-left {
+.mat-table-sticky-border-elem-left {
   border-right: 2px solid midnightblue;
 }
diff --git a/...complex/table-sticky-complex-example.html → ...complex/table-sticky-complex-example.html b/...complex/table-sticky-complex-example.html → ...complex/table-sticky-complex-example.html
diff --git a/...y-complex/table-sticky-complex-example.ts → ...y-complex/table-sticky-complex-example.ts b/...y-complex/table-sticky-complex-example.ts → ...y-complex/table-sticky-complex-example.ts