update from review

Author: andrewseguin

src/cdk/table/table.ts

@@ -50,6 +50,7 @@ import {
   getTableUnknownDataSourceError
 } from './table-errors';
 
+/** Interface used to provide an outlet for rows to be inserted into. */
 export interface RowOutlet {
   viewContainer: ViewContainerRef;
 }
@@ -84,6 +85,7 @@ export class FooterRowOutlet implements RowOutlet {
 /**
  * The table template that can be used by the mat-table. Should not be used outside of the
  * material library.
+ * @docs-private
  */
 export const CDK_TABLE_TEMPLATE = `
   <ng-container headerRowOutlet></ng-container>
@@ -263,17 +265,10 @@ export class CdkTable<T> implements CollectionViewer, OnInit, AfterContentChecke
     // TODO(andrewseguin): Setup a listener for scrolling, emit the calculated view to viewChange
     this._dataDiffer = this._differs.find([]).create(this._trackByFn);
 
-    // If the table has a header row definition defined as part of its content, flag this as a
-    // header row def change so that the content check will render the header row.
-    if (this._headerRowDef) {
-      this._headerRowDefChanged = true;
-    }
-
-    // If the table has a footer row definition defined as part of its content, flag this as a
-    // header row def change so that the content check will render the header row.
-    if (this._footerRowDef) {
-      this._footerRowDefChanged = true;
-    }
+    // If the table has header or footer row definitions defined as part of its content, mark that
+    // there is a change so that the content check will render the row.
+    this._headerRowDefChanged = !!this._headerRowDef;
+    this._footerRowDefChanged = !!this._footerRowDef;
   }
 
   ngAfterContentChecked() {
@@ -570,11 +565,11 @@ export class CdkTable<T> implements CollectionViewer, OnInit, AfterContentChecke
     // TODO(andrewseguin): enforce that one outlet was instantiated from createEmbeddedView
     outlet.viewContainer.createEmbeddedView(rowDef.template, context, index);
 
-    this._getCellTemplates(rowDef).forEach(cellTemplate => {
+    for (let cellTemplate of this._getCellTemplates(rowDef)) {
       if (CdkCellOutlet.mostRecentCellOutlet) {
         CdkCellOutlet.mostRecentCellOutlet._viewContainer.createEmbeddedView(cellTemplate, context);
       }
-    });
+    }
 
     this._changeDetectorRef.markForCheck();
   }
@@ -612,16 +607,16 @@ export class CdkTable<T> implements CollectionViewer, OnInit, AfterContentChecke
 
   /** Adds native table sections (e.g. tbody) and moves the row outlets into them. */
   private _applyNativeTableSections() {
-    const thead = document.createElement('thead');
-    const tbody = document.createElement('tbody');
-    const tfoot = document.createElement('tfoot');
-
-    this._elementRef.nativeElement.appendChild(thead);
-    this._elementRef.nativeElement.appendChild(tbody);
-    this._elementRef.nativeElement.appendChild(tfoot);
-
-    thead.appendChild(this._headerRowOutlet.elementRef.nativeElement);
-    tbody.appendChild(this._rowOutlet.elementRef.nativeElement);
-    tfoot.appendChild(this._footerRowOutlet.elementRef.nativeElement);
+    const sections = [
+      {tag: 'thead', outlet: this._headerRowOutlet},
+      {tag: 'tbody', outlet: this._rowOutlet},
+      {tag: 'tfoot', outlet: this._footerRowOutlet},
+    ];
+
+    for (const section of sections) {
+      const element = document.createElement(section.tag);
+      element.appendChild(section.outlet.elementRef.nativeElement);
+      this._elementRef.nativeElement.appendChild(element);
+    }
   }
 }

src/demo-app/table/footer/footer-table.html

@@ -1,16 +1,15 @@
 <h3>Table with Footer</h3>
 
 <mat-card class="demo-table-card">
-  <mat-table [dataSource]="data" class="demo-footer-table">
+  <table mat-table [dataSource]="data" class="demo-footer-table">
     <ng-container matColumnDef="{{column}}" *ngFor="let column of columnsToDisplay">
-      <mat-header-cell *matHeaderCellDef> {{column}} </mat-header-cell>
-      <mat-cell *matCellDef="let element"> {{element[column]}} </mat-cell>
-      <mat-footer-cell *matFooterCellDef> {{column}} Footer </mat-footer-cell>
+      <th mat-header-cell *matHeaderCellDef> {{column}} </th>
+      <td mat-cell *matCellDef="let element"> {{element[column]}} </td>
+      <td mat-footer-cell *matFooterCellDef> {{column}} Footer </td>
     </ng-container>
 
-    <mat-header-row *matHeaderRowDef="columnsToDisplay"></mat-header-row>
-    <mat-row *matRowDef="let row; columns: columnsToDisplay;"></mat-row>
-    <mat-footer-row *matFooterRowDef="columnsToDisplay">
-    </mat-footer-row>
-  </mat-table>
+    <tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
+    <tr mat-row *matRowDef="let row; columns: columnsToDisplay;"></tr>
+    <tr mat-footer-row *matFooterRowDef="columnsToDisplay"></tr>
+  </table>
 </mat-card>

src/demo-app/table/footer/footer-table.scss

@@ -5,5 +5,6 @@
 
 .demo-footer-table {
   height: 500px;
+  width: 100%;
   overflow: auto;
 }