Revert "fix(material-experimental/mdc-table): error when flexbox-based table is initialized (#21428)" (#21568)

* Revert "fix(material-experimental/mdc-table): error when flexbox-based table is initialized (#21428)"

This reverts commit aade5d1.

* fixup! Revert "fix(material-experimental/mdc-table): error when flexbox-based table is initialized (#21428)"

Author: mmalerba

src/cdk/table/table.ts

@@ -325,7 +325,7 @@ export class CdkTable<T> implements AfterContentChecked, CollectionViewer, OnDes
   private _cachedRenderRowsMap = new Map<T, WeakMap<CdkRowDef<T>, RenderRow<T>[]>>();
 
   /** Whether the table is applied to a native `<table>`. */
-  protected _isNativeHtmlTable: boolean;
+  private _isNativeHtmlTable: boolean;
 
   /**
    * Utility class that is responsible for applying the appropriate sticky positioning styles to

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

@@ -62,23 +62,17 @@ ng_test_library(
     deps = [
         ":mdc-table",
         "//src/cdk/table",
-        "//src/material-experimental/mdc-paginator",
+        "//src/material/paginator",
         "//src/material/sort",
+        "//src/material/table",
         "@npm//@angular/platform-browser",
         "@npm//rxjs",
     ],
 )
 
 ng_web_test_suite(
     name = "unit_tests",
-    static_files = [
-        "@npm//:node_modules/@material/textfield/dist/mdc.textfield.js",
-        "@npm//:node_modules/@material/line-ripple/dist/mdc.lineRipple.js",
-        "@npm//:node_modules/@material/notched-outline/dist/mdc.notchedOutline.js",
-        "@npm//:node_modules/@material/ripple/dist/mdc.ripple.js",
-        "@npm//:node_modules/@material/dom/dist/mdc.dom.js",
-        "@npm//:node_modules/@material/data-table/dist/mdc.dataTable.js",
-    ],
+    static_files = ["@npm//:node_modules/@material/data-table/dist/mdc.dataTable.js"],
     deps = [
         ":table_tests_lib",
         "//src/material-experimental:mdc_require_config.js",

src/material-experimental/mdc-table/table.spec.ts

@@ -7,11 +7,12 @@ import {
   TestBed,
   tick
 } from '@angular/core/testing';
-import {MatTable, MatTableDataSource, MatTableModule} from './index';
+import {MatTable, MatTableModule} from './index';
 import {DataSource} from '@angular/cdk/table';
 import {BehaviorSubject, Observable} from 'rxjs';
 import {MatSort, MatSortHeader, MatSortModule} from '@angular/material/sort';
-import {MatPaginator, MatPaginatorModule} from '@angular/material-experimental/mdc-paginator';
+import {MatPaginator, MatPaginatorModule} from '@angular/material/paginator';
+import {MatTableDataSource} from '@angular/material/table';
 import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 
 describe('MDC-based MatTable', () => {
@@ -28,7 +29,6 @@ describe('MDC-based MatTable', () => {
         StickyTableApp,
         TableWithNgContainerRow,
         NestedTableApp,
-        MatFlexTableApp,
       ],
     }).compileComponents();
   }));
@@ -164,14 +164,6 @@ describe('MDC-based MatTable', () => {
       expect(tbody.textContent.trim()).toContain('No data');
     });
 
-    it('should set the content styling class on the tbody', () => {
-      let fixture = TestBed.createComponent(NativeHtmlTableApp);
-      fixture.detectChanges();
-
-      const tbodyElement = fixture.nativeElement.querySelector('tbody');
-      expect(tbodyElement.classList).toContain('mdc-data-table__content');
-    });
-
   });
 
   it('should render with MatTableDataSource and sort', () => {
@@ -221,13 +213,6 @@ describe('MDC-based MatTable', () => {
     }).not.toThrow();
   }));
 
-  it('should be able to render a flexbox-based table', () => {
-    expect(() => {
-      const fixture = TestBed.createComponent(MatFlexTableApp);
-      fixture.detectChanges();
-    }).not.toThrow();
-  });
-
   describe('with MatTableDataSource and sort/pagination/filter', () => {
     let tableElement: HTMLElement;
     let fixture: ComponentFixture<ArrayDataSourceMatTableApp>;
@@ -976,45 +961,6 @@ class TableWithNgContainerRow {
 }
 
 
-@Component({
-  template: `
-    <mat-table [dataSource]="dataSource">
-      <ng-container matColumnDef="column_a">
-        <mat-header-cell *matHeaderCellDef> Column A</mat-header-cell>
-        <mat-cell *matCellDef="let row"> {{row.a}}</mat-cell>
-        <mat-footer-cell *matFooterCellDef> Footer A</mat-footer-cell>
-      </ng-container>
-
-      <ng-container matColumnDef="column_b">
-        <mat-header-cell *matHeaderCellDef> Column B</mat-header-cell>
-        <mat-cell *matCellDef="let row"> {{row.b}}</mat-cell>
-        <mat-footer-cell *matFooterCellDef> Footer B</mat-footer-cell>
-      </ng-container>
-
-      <ng-container matColumnDef="column_c">
-        <mat-header-cell *matHeaderCellDef> Column C</mat-header-cell>
-        <mat-cell *matCellDef="let row"> {{row.c}}</mat-cell>
-        <mat-footer-cell *matFooterCellDef> Footer C</mat-footer-cell>
-      </ng-container>
-
-      <ng-container matColumnDef="special_column">
-        <mat-cell *matCellDef="let row"> fourth_row </mat-cell>
-      </ng-container>
-
-      <mat-header-row *matHeaderRowDef="columnsToRender"></mat-header-row>
-      <mat-row *matRowDef="let row; columns: columnsToRender"></mat-row>
-      <div *matNoDataRow>No data</div>
-      <mat-footer-row *matFooterRowDef="columnsToRender"></mat-footer-row>
-    </mat-table>
-  `
-})
-class MatFlexTableApp {
-  dataSource: FakeDataSource | null = new FakeDataSource();
-  columnsToRender = ['column_a', 'column_b', 'column_c'];
-  @ViewChild(MatTable) table: MatTable<TestData>;
-}
-
-
 function getElements(element: Element, query: string): Element[] {
   return [].slice.call(element.querySelectorAll(query));
 }

src/material-experimental/mdc-table/table.ts

@@ -43,15 +43,10 @@ export class MatTable<T> extends CdkTable<T> implements OnInit {
   /** Overrides the need to add position: sticky on every sticky cell element in `CdkTable`. */
   protected needsPositionStickyOnElement = false;
 
+  // After ngOnInit, the `CdkTable` has created and inserted the table sections (thead, tbody,
+  // tfoot). MDC requires the `mdc-data-table__content` class to be added to the body.
   ngOnInit() {
     super.ngOnInit();
-
-    // After ngOnInit, the `CdkTable` has created and inserted the table sections (thead, tbody,
-    // tfoot). MDC requires the `mdc-data-table__content` class to be added to the body. Note that
-    // this only applies to native tables, because we don't wrap the content of flexbox-based ones.
-    if (this._isNativeHtmlTable) {
-      const tbody = this._elementRef.nativeElement.querySelector('tbody');
-      tbody.classList.add('mdc-data-table__content');
-    }
+    this._elementRef.nativeElement.querySelector('tbody').classList.add('mdc-data-table__content');
   }
 }

tools/public_api_guard/cdk/table.d.ts

@@ -199,7 +199,6 @@ export declare class CdkTable<T> implements AfterContentChecked, CollectionViewe
     protected readonly _elementRef: ElementRef;
     _footerRowOutlet: FooterRowOutlet;
     _headerRowOutlet: HeaderRowOutlet;
-    protected _isNativeHtmlTable: boolean;
     _multiTemplateDataRows: boolean;
     _noDataRow: CdkNoDataRow;
     _noDataRowOutlet: NoDataRowOutlet;