feat(material/table): Switch table implementation to use MDC (#25453)

Old implementation is still available under @angular/material/legacy-table

BREAKING CHANGE:
- DOM and CSS classes for mat-table have changes
- Typescript API is largely the same but may have minor differences
- See the MDC migration guide for more information about the changes and
  how to migrate your app (TODO: link when available)

Author: mmalerba

.github/CODEOWNERS

@@ -33,7 +33,7 @@
 /src/material/legacy-snack-bar/**                         @andrewseguin @crisbeto
 /src/material/sort/**                              @andrewseguin
 /src/material/stepper/**                           @mmalerba
-/src/material/table/**                             @andrewseguin
+/src/material/legacy-table/**                             @andrewseguin
 /src/material/legacy-tabs/**                              @andrewseguin
 /src/material/testing/**                           @andrewseguin
 /src/material/toolbar/**                           @devversion
@@ -131,7 +131,7 @@
 /src/material/slider/**                                @devversion
 /src/material/tabs/**                 @crisbeto
 /src/material-experimental/mdc-tooltip/**              @crisbeto
-/src/material-experimental/mdc-table/**                @andrewseguin
+/src/material/table/**                @andrewseguin
 /src/material-experimental/menubar/**                  @jelbourn
 /src/material-experimental/popover-edit/**             @andrewseguin
 /src/material-experimental/selection/**                @andrewseguin
@@ -347,7 +347,7 @@
 /tools/public_api_guard/material/legacy-snack-bar**       @andrewseguin @crisbeto
 /tools/public_api_guard/material/sort**            @andrewseguin
 /tools/public_api_guard/material/stepper**         @mmalerba
-/tools/public_api_guard/material/table**           @andrewseguin
+/tools/public_api_guard/material/legacy-table**           @andrewseguin
 /tools/public_api_guard/material/legacy-tabs**            @andrewseguin
 /tools/public_api_guard/material/toolbar**         @devversion
 /tools/public_api_guard/material/legacy-tooltip**  @andrewseguin

.ng-dev/commit-message.mts

@@ -52,7 +52,7 @@ export const commitMessage: CommitMessageConfig = {
     'material-experimental/mdc-progress-spinner',
     'material/slide-toggle',
     'material/snack-bar',
-    'material-experimental/mdc-table',
+    'material/table',
     'material/tabs',
     'material-experimental/menubar',
     'material-experimental/popover-edit',
@@ -103,7 +103,7 @@ export const commitMessage: CommitMessageConfig = {
     'material/legacy-snack-bar',
     'material/sort',
     'material/stepper',
-    'material/table',
+    'material/legacy-table',
     'material/legacy-tabs',
     'material/testing',
     'material/theming',

integration/mdc-migration/golden/src/app/app.module.ts

@@ -22,7 +22,7 @@ import {MatSelectModule} from '@angular/material-experimental/mdc-select';
 import {MatSlideToggleModule} from '@angular/material/slide-toggle';
 import {MatSliderModule} from '@angular/material-experimental/mdc-slider';
 import {MatSnackBarModule} from '@angular/material/legacy-snack-bar';
-import {MatTableModule} from '@angular/material-experimental/mdc-table';
+import {MatTableModule} from '@angular/material/table';
 import {MatTabsModule} from '@angular/material/tabs';
 import {MatTooltipModule} from '@angular/material-experimental/mdc-tooltip';
 import {AutocompleteComponent} from './components/autocomplete/autocomplete.component';

integration/mdc-migration/golden/src/app/components/table/table.component.spec.ts

@@ -1,6 +1,6 @@
 import {ComponentFixture, TestBed} from '@angular/core/testing';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
-import {MatTableModule} from '@angular/material/table';
+import {MatTableModule} from '@angular/material/legacy-table';
 import {TableComponent} from './table.component';
 
 describe('TableComponent', () => {

integration/mdc-migration/golden/src/styles.scss

@@ -67,8 +67,8 @@ $sample-project-theme: mat.define-light-theme((
 @include mat.mdc-slider-theme($sample-project-theme);
 @include mat.mdc-slider-typography($sample-project-theme);
 @include mat.snack-bar-typography($sample-project-theme);
-@include mat.mdc-table-theme($sample-project-theme);
-@include mat.mdc-table-typography($sample-project-theme);
+@include mat.table-theme($sample-project-theme);
+@include mat.table-typography($sample-project-theme);
 @include mat.tabs-theme($sample-project-theme);
 @include mat.tabs-typography($sample-project-theme);
 @include mat.mdc-tooltip-theme($sample-project-theme);

integration/mdc-migration/sample-project/src/app/app.module.ts

@@ -22,7 +22,7 @@ import {MatSelectModule} from '@angular/material/select';
 import {MatSlideToggleModule} from '@angular/material/legacy-slide-toggle';
 import {MatSliderModule} from '@angular/material/slider';
 import {MatSnackBarModule} from '@angular/material/legacy-snack-bar';
-import {MatTableModule} from '@angular/material/table';
+import {MatTableModule} from '@angular/material/legacy-table';
 import {MatTabsModule} from '@angular/material/legacy-tabs';
 import {MatTooltipModule} from '@angular/material/tooltip';
 import {AutocompleteComponent} from './components/autocomplete/autocomplete.component';

integration/mdc-migration/sample-project/src/app/components/table/table.component.spec.ts

@@ -1,6 +1,6 @@
 import {ComponentFixture, TestBed} from '@angular/core/testing';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
-import {MatTableModule} from '@angular/material/table';
+import {MatTableModule} from '@angular/material/legacy-table';
 import {TableComponent} from './table.component';
 
 describe('TableComponent', () => {

integration/mdc-migration/sample-project/src/styles.scss

@@ -45,7 +45,7 @@ $sample-project-theme: mat.define-light-theme((
 @include mat.legacy-slide-toggle-theme($sample-project-theme);
 @include mat.slider-theme($sample-project-theme);
 @include mat.legacy-snack-bar-theme($sample-project-theme);
-@include mat.table-theme($sample-project-theme);
+@include mat.legacy-table-theme($sample-project-theme);
 @include mat.legacy-tabs-theme($sample-project-theme);
 @include mat.tooltip-theme($sample-project-theme);
 

src/components-examples/material-experimental/column-resize/BUILD.bazel

@@ -11,7 +11,7 @@ ng_module(
     ]),
     deps = [
         "//src/material-experimental/column-resize",
-        "//src/material/table",
+        "//src/material/legacy-table",
     ],
 )
 

src/components-examples/material-experimental/column-resize/default-enabled-column-resize-flex/default-enabled-column-resize-flex-example-module.ts

@@ -7,13 +7,13 @@
  */
 
 import {NgModule} from '@angular/core';
-import {MatTableModule} from '@angular/material/table';
+import {MatLegacyTableModule} from '@angular/material/legacy-table';
 import {MatDefaultEnabledColumnResizeModule} from '@angular/material-experimental/column-resize';
 
 import {DefaultEnabledColumnResizeFlexExample} from './default-enabled-column-resize-flex-example';
 
 @NgModule({
-  imports: [MatDefaultEnabledColumnResizeModule, MatTableModule],
+  imports: [MatDefaultEnabledColumnResizeModule, MatLegacyTableModule],
   declarations: [DefaultEnabledColumnResizeFlexExample],
   exports: [DefaultEnabledColumnResizeFlexExample],
 })

src/components-examples/material-experimental/column-resize/default-enabled-column-resize/default-enabled-column-resize-example-module.ts

@@ -7,13 +7,13 @@
  */
 
 import {NgModule} from '@angular/core';
-import {MatTableModule} from '@angular/material/table';
+import {MatLegacyTableModule} from '@angular/material/legacy-table';
 import {MatDefaultEnabledColumnResizeModule} from '@angular/material-experimental/column-resize';
 
 import {DefaultEnabledColumnResizeExample} from './default-enabled-column-resize-example';
 
 @NgModule({
-  imports: [MatDefaultEnabledColumnResizeModule, MatTableModule],
+  imports: [MatDefaultEnabledColumnResizeModule, MatLegacyTableModule],
   declarations: [DefaultEnabledColumnResizeExample],
   exports: [DefaultEnabledColumnResizeExample],
 })

src/components-examples/material-experimental/column-resize/opt-in-column-resize/opt-in-column-resize-example-module.ts

@@ -7,13 +7,13 @@
  */
 
 import {NgModule} from '@angular/core';
-import {MatTableModule} from '@angular/material/table';
+import {MatLegacyTableModule} from '@angular/material/legacy-table';
 import {MatColumnResizeModule} from '@angular/material-experimental/column-resize';
 
 import {OptInColumnResizeExample} from './opt-in-column-resize-example';
 
 @NgModule({
-  imports: [MatColumnResizeModule, MatTableModule],
+  imports: [MatColumnResizeModule, MatLegacyTableModule],
   declarations: [OptInColumnResizeExample],
   exports: [OptInColumnResizeExample],
 })

src/components-examples/material-experimental/mdc-table/BUILD.bazel

@@ -17,17 +17,17 @@ ng_module(
         "//src/cdk/table",
         "//src/cdk/testing",
         "//src/cdk/testing/testbed",
-        "//src/material-experimental/mdc-table",
         "//src/material/button-toggle",
         "//src/material/core",
         "//src/material/icon",
         "//src/material/legacy-button",
         "//src/material/legacy-checkbox",
         "//src/material/legacy-input",
         "//src/material/legacy-paginator",
+        "//src/material/legacy-table",
+        "//src/material/legacy-table/testing",
         "//src/material/progress-spinner",
         "//src/material/sort",
-        "//src/material/table/testing",
         "@npm//@angular/platform-browser",
         "@npm//@angular/platform-browser-dynamic",
         "@npm//@types/jasmine",
@@ -50,8 +50,8 @@ ng_test_library(
         ":mdc-table",
         "//src/cdk/testing",
         "//src/cdk/testing/testbed",
-        "//src/material/table",
-        "//src/material/table/testing",
+        "//src/material/legacy-table",
+        "//src/material/legacy-table/testing",
         "@npm//@angular/platform-browser-dynamic",
     ],
 )

src/components-examples/material-experimental/mdc-table/index.ts

@@ -9,7 +9,7 @@ import {MatLegacyInputModule} from '@angular/material/legacy-input';
 import {MatLegacyPaginatorModule} from '@angular/material/legacy-paginator';
 import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
 import {MatSortModule} from '@angular/material/sort';
-import {MatTableModule} from '@angular/material-experimental/mdc-table';
+import {MatTableModule} from '@angular/material/table';
 import {DragDropModule} from '@angular/cdk/drag-drop';
 import {CdkTableModule} from '@angular/cdk/table';
 

src/components-examples/material-experimental/mdc-table/table-dynamic-array-data/table-dynamic-array-data-example.ts

@@ -1,5 +1,5 @@
 import {Component, ViewChild} from '@angular/core';
-import {MatTable} from '@angular/material/table';
+import {MatLegacyTable} from '@angular/material/legacy-table';
 
 export interface PeriodicElement {
   name: string;
@@ -33,7 +33,7 @@ export class TableDynamicArrayDataExample {
   displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
   dataSource = [...ELEMENT_DATA];
 
-  @ViewChild(MatTable) table: MatTable<PeriodicElement>;
+  @ViewChild(MatLegacyTable) table: MatLegacyTable<PeriodicElement>;
 
   addData() {
     const randomElementIndex = Math.floor(Math.random() * ELEMENT_DATA.length);

src/components-examples/material-experimental/mdc-table/table-filtering/table-filtering-example.ts

@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {MatTableDataSource} from '@angular/material/table';
+import {MatLegacyTableDataSource} from '@angular/material/legacy-table';
 
 export interface PeriodicElement {
   name: string;
@@ -31,7 +31,7 @@ const ELEMENT_DATA: PeriodicElement[] = [
 })
 export class TableFilteringExample {
   displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
-  dataSource = new MatTableDataSource(ELEMENT_DATA);
+  dataSource = new MatLegacyTableDataSource(ELEMENT_DATA);
 
   applyFilter(event: Event) {
     const filterValue = (event.target as HTMLInputElement).value;

src/components-examples/material-experimental/mdc-table/table-harness/table-harness-example.spec.ts

@@ -1,8 +1,8 @@
 import {ComponentFixture, TestBed} from '@angular/core/testing';
 import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
-import {MatTableHarness} from '@angular/material/table/testing';
+import {MatLegacyTableHarness} from '@angular/material/legacy-table/testing';
 import {HarnessLoader, parallel} from '@angular/cdk/testing';
-import {MatTableModule} from '@angular/material/table';
+import {MatLegacyTableModule} from '@angular/material/legacy-table';
 import {TableHarnessExample} from './table-harness-example';
 
 describe('TableHarnessExample', () => {
@@ -11,7 +11,7 @@ describe('TableHarnessExample', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [MatTableModule],
+      imports: [MatLegacyTableModule],
       declarations: [TableHarnessExample],
     }).compileComponents();
     fixture = TestBed.createComponent(TableHarnessExample);
@@ -20,12 +20,12 @@ describe('TableHarnessExample', () => {
   });
 
   it('should load harness for a table', async () => {
-    const tables = await loader.getAllHarnesses(MatTableHarness);
+    const tables = await loader.getAllHarnesses(MatLegacyTableHarness);
     expect(tables.length).toBe(1);
   });
 
   it('should get the different kinds of rows in the table', async () => {
-    const table = await loader.getHarness(MatTableHarness);
+    const table = await loader.getHarness(MatLegacyTableHarness);
     const headerRows = await table.getHeaderRows();
     const footerRows = await table.getFooterRows();
     const rows = await table.getRows();
@@ -35,7 +35,7 @@ describe('TableHarnessExample', () => {
   });
 
   it('should get cells inside a row', async () => {
-    const table = await loader.getHarness(MatTableHarness);
+    const table = await loader.getHarness(MatLegacyTableHarness);
     const headerRows = await table.getHeaderRows();
     const footerRows = await table.getFooterRows();
     const rows = await table.getRows();
@@ -53,31 +53,31 @@ describe('TableHarnessExample', () => {
   });
 
   it('should be able to get the text of a cell', async () => {
-    const table = await loader.getHarness(MatTableHarness);
+    const table = await loader.getHarness(MatLegacyTableHarness);
     const secondRow = (await table.getRows())[1];
     const cells = await secondRow.getCells();
     const cellTexts = await parallel(() => cells.map(cell => cell.getText()));
     expect(cellTexts).toEqual(['2', 'Helium', '4.0026', 'He']);
   });
 
   it('should be able to get the column name of a cell', async () => {
-    const table = await loader.getHarness(MatTableHarness);
+    const table = await loader.getHarness(MatLegacyTableHarness);
     const fifthRow = (await table.getRows())[1];
     const cells = await fifthRow.getCells();
     const cellColumnNames = await parallel(() => cells.map(cell => cell.getColumnName()));
     expect(cellColumnNames).toEqual(['position', 'name', 'weight', 'symbol']);
   });
 
   it('should be able to filter cells by text', async () => {
-    const table = await loader.getHarness(MatTableHarness);
+    const table = await loader.getHarness(MatLegacyTableHarness);
     const firstRow = (await table.getRows())[0];
     const cells = await firstRow.getCells({text: '1.0079'});
     const cellTexts = await parallel(() => cells.map(cell => cell.getText()));
     expect(cellTexts).toEqual(['1.0079']);
   });
 
   it('should be able to filter cells by column name', async () => {
-    const table = await loader.getHarness(MatTableHarness);
+    const table = await loader.getHarness(MatLegacyTableHarness);
     const firstRow = (await table.getRows())[0];
     const cells = await firstRow.getCells({columnName: 'symbol'});
     const cellTexts = await parallel(() => cells.map(cell => cell.getText()));

src/components-examples/material-experimental/mdc-table/table-overview/table-overview-example.ts

@@ -1,7 +1,7 @@
 import {AfterViewInit, Component, ViewChild} from '@angular/core';
 import {MatLegacyPaginator} from '@angular/material/legacy-paginator';
 import {MatSort} from '@angular/material/sort';
-import {MatTableDataSource} from '@angular/material/table';
+import {MatLegacyTableDataSource} from '@angular/material/legacy-table';
 
 export interface UserData {
   id: string;
@@ -53,7 +53,7 @@ const NAMES: string[] = [
 })
 export class TableOverviewExample implements AfterViewInit {
   displayedColumns: string[] = ['id', 'name', 'progress', 'fruit'];
-  dataSource: MatTableDataSource<UserData>;
+  dataSource: MatLegacyTableDataSource<UserData>;
 
   @ViewChild(MatLegacyPaginator) paginator: MatLegacyPaginator;
   @ViewChild(MatSort) sort: MatSort;
@@ -63,7 +63,7 @@ export class TableOverviewExample implements AfterViewInit {
     const users = Array.from({length: 100}, (_, k) => createNewUser(k + 1));
 
     // Assign the data to the data source for the table to render
-    this.dataSource = new MatTableDataSource(users);
+    this.dataSource = new MatLegacyTableDataSource(users);
   }
 
   ngAfterViewInit() {

src/components-examples/material-experimental/mdc-table/table-pagination/table-pagination-example.ts

@@ -1,6 +1,6 @@
 import {AfterViewInit, Component, ViewChild} from '@angular/core';
 import {MatLegacyPaginator} from '@angular/material/legacy-paginator';
-import {MatTableDataSource} from '@angular/material/table';
+import {MatLegacyTableDataSource} from '@angular/material/legacy-table';
 
 /**
  * @title Table with pagination
@@ -12,7 +12,7 @@ import {MatTableDataSource} from '@angular/material/table';
 })
 export class TablePaginationExample implements AfterViewInit {
   displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
-  dataSource = new MatTableDataSource<PeriodicElement>(ELEMENT_DATA);
+  dataSource = new MatLegacyTableDataSource<PeriodicElement>(ELEMENT_DATA);
 
   @ViewChild(MatLegacyPaginator) paginator: MatLegacyPaginator;
 

src/components-examples/material-experimental/mdc-table/table-selection/table-selection-example.ts

@@ -1,6 +1,6 @@
 import {SelectionModel} from '@angular/cdk/collections';
 import {Component} from '@angular/core';
-import {MatTableDataSource} from '@angular/material/table';
+import {MatLegacyTableDataSource} from '@angular/material/legacy-table';
 
 export interface PeriodicElement {
   name: string;
@@ -32,7 +32,7 @@ const ELEMENT_DATA: PeriodicElement[] = [
 })
 export class TableSelectionExample {
   displayedColumns: string[] = ['select', 'position', 'name', 'weight', 'symbol'];
-  dataSource = new MatTableDataSource<PeriodicElement>(ELEMENT_DATA);
+  dataSource = new MatLegacyTableDataSource<PeriodicElement>(ELEMENT_DATA);
   selection = new SelectionModel<PeriodicElement>(true, []);
 
   /** Whether the number of selected elements matches the total number of rows. */

src/components-examples/material-experimental/mdc-table/table-sorting/table-sorting-example.ts

@@ -1,6 +1,6 @@
 import {AfterViewInit, Component, ViewChild} from '@angular/core';
 import {MatSort} from '@angular/material/sort';
-import {MatTableDataSource} from '@angular/material/table';
+import {MatLegacyTableDataSource} from '@angular/material/legacy-table';
 
 export interface PeriodicElement {
   name: string;
@@ -32,7 +32,7 @@ const ELEMENT_DATA: PeriodicElement[] = [
 })
 export class TableSortingExample implements AfterViewInit {
   displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
-  dataSource = new MatTableDataSource(ELEMENT_DATA);
+  dataSource = new MatLegacyTableDataSource(ELEMENT_DATA);
 
   @ViewChild(MatSort) sort: MatSort;