chore(table): add md directives to match cdk table (#5859)

* docs(table): add cdk module reference

* chore(table): add md directives to match cdk table

* remove docs reference to cdk

* use provider to simplify

* add to compatibility rules

* backwards compat with cdkColumnDef

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

@@ -100,14 +100,14 @@ <h3>MdTable Example</h3>
 
     <!-- Column Definition: ID -->
     <ng-container cdkColumnDef="userId">
-      <md-header-cell *cdkHeaderCellDef> ID </md-header-cell>
-      <md-cell *cdkCellDef="let row"> {{row.id}} </md-cell>
+      <md-header-cell *mdHeaderCellDef> ID </md-header-cell>
+      <md-cell *mdCellDef="let row"> {{row.id}} </md-cell>
     </ng-container>
 
     <!-- Column Definition: Progress -->
-    <ng-container cdkColumnDef="progress">
-      <md-header-cell *cdkHeaderCellDef> Progress </md-header-cell>
-      <md-cell *cdkCellDef="let row">
+    <ng-container mdColumnDef="progress">
+      <md-header-cell *mdHeaderCellDef> Progress </md-header-cell>
+      <md-cell *mdCellDef="let row">
         <div class="demo-progress-stat">{{row.progress}}%</div>
         <div class="demo-progress-indicator-container">
           <div class="demo-progress-indicator"
@@ -119,19 +119,19 @@ <h3>MdTable Example</h3>
     </ng-container>
 
     <!-- Column Definition: Name -->
-    <ng-container cdkColumnDef="userName">
-      <md-header-cell *cdkHeaderCellDef> Name </md-header-cell>
-      <md-cell *cdkCellDef="let row"> {{row.name}} </md-cell>
+    <ng-container mdColumnDef="userName">
+      <md-header-cell *mdHeaderCellDef> Name </md-header-cell>
+      <md-cell *mdCellDef="let row"> {{row.name}} </md-cell>
     </ng-container>
 
     <!-- Column Definition: Color -->
-    <ng-container cdkColumnDef="color">
-      <md-header-cell *cdkHeaderCellDef>Color</md-header-cell>
-      <md-cell *cdkCellDef="let row" [style.color]="row.color"> {{row.color}} </md-cell>
+    <ng-container mdColumnDef="color">
+      <md-header-cell *mdHeaderCellDef>Color</md-header-cell>
+      <md-cell *mdCellDef="let row" [style.color]="row.color"> {{row.color}} </md-cell>
     </ng-container>
 
-    <md-header-row *cdkHeaderRowDef="displayedColumns"></md-header-row>
-    <md-row *cdkRowDef="let row; columns: displayedColumns"></md-row>
+    <md-header-row *mdHeaderRowDef="displayedColumns"></md-header-row>
+    <md-row *mdRowDef="let row; columns: displayedColumns"></md-row>
 
   </md-table>
 

src/lib/core/compatibility/compatibility.ts

@@ -29,11 +29,16 @@ export const MAT_ELEMENTS_SELECTOR = `
   [mat-raised-button],
   [matCardSubtitle],
   [matCardTitle],
+  [matCellDef],
+  [matColumnDef],
   [matDialogActions],
   [matDialogClose],
   [matDialogContent],
   [matDialogTitle],
+  [matHeaderCellDef],
+  [matHeaderRowDef],
   [matLine],
+  [matRowDef],
   [matTabLabel],
   [matTabLink],
   [matTabNav],
@@ -66,6 +71,7 @@ export const MAT_ELEMENTS_SELECTOR = `
   mat-grid-tile-footer,
   mat-grid-tile-header,
   mat-header-cell,
+  mat-header-row,
   mat-hint,
   mat-icon,
   mat-input-container,
@@ -99,11 +105,16 @@ export const MD_ELEMENTS_SELECTOR = `
   [md-raised-button],
   [mdCardSubtitle],
   [mdCardTitle],
+  [mdCellDef],
+  [mdColumnDef],
   [mdDialogActions],
   [mdDialogClose],
   [mdDialogContent],
   [mdDialogTitle],
+  [mdHeaderCellDef],
+  [mdHeaderRowDef],
   [mdLine],
+  [mdRowDef],
   [mdTabLabel],
   [mdTabLink],
   [mdTabNav],
@@ -136,6 +147,7 @@ export const MD_ELEMENTS_SELECTOR = `
   md-grid-tile-footer,
   md-grid-tile-header,
   md-header-cell,
+  md-header-row,
   md-hint,
   md-icon,
   md-input-container,

src/lib/sort/sort-header.ts

@@ -7,8 +7,12 @@
  */
 
 import {
-  ChangeDetectionStrategy, ChangeDetectorRef, Component, Input,
-  Optional, ViewEncapsulation
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  Input,
+  Optional,
+  ViewEncapsulation
 } from '@angular/core';
 import {MdSort, MdSortable} from './sort';
 import {MdSortHeaderIntl} from './sort-header-intl';

src/lib/sort/sort.spec.ts

@@ -11,6 +11,7 @@ import {
 } from './sort-errors';
 import {wrappedErrorMessage} from '@angular/cdk/testing';
 import {map} from '../core/rxjs/index';
+import {MdTableModule} from '../table/index';
 
 describe('MdSort', () => {
   let fixture: ComponentFixture<SimpleMdSortApp>;
@@ -19,10 +20,11 @@ describe('MdSort', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      imports: [MdSortModule, CdkTableModule],
+      imports: [MdSortModule, MdTableModule, CdkTableModule],
       declarations: [
         SimpleMdSortApp,
         CdkTableMdSortApp,
+        MdTableMdSortApp,
         MdSortHeaderMissingMdSortApp,
         MdSortDuplicateMdSortableIdsApp,
         MdSortableMissingIdApp
@@ -48,7 +50,6 @@ describe('MdSort', () => {
 
   it('should use the column definition if used within a cdk table', () => {
     let cdkTableMdSortAppFixture = TestBed.createComponent(CdkTableMdSortApp);
-
     let cdkTableMdSortAppComponent = cdkTableMdSortAppFixture.componentInstance;
 
     cdkTableMdSortAppFixture.detectChanges();
@@ -61,6 +62,20 @@ describe('MdSort', () => {
     expect(sortables.has('column_c')).toBe(true);
   });
 
+  it('should use the column definition if used within an md table', () => {
+    let mdTableMdSortAppFixture = TestBed.createComponent(MdTableMdSortApp);
+    let mdTableMdSortAppComponent = mdTableMdSortAppFixture.componentInstance;
+
+    mdTableMdSortAppFixture.detectChanges();
+    mdTableMdSortAppFixture.detectChanges();
+
+    const sortables = mdTableMdSortAppComponent.mdSort.sortables;
+    expect(sortables.size).toBe(3);
+    expect(sortables.has('column_a')).toBe(true);
+    expect(sortables.has('column_b')).toBe(true);
+    expect(sortables.has('column_c')).toBe(true);
+  });
+
   it('should be able to cycle from asc -> desc from either start point', () => {
     component.disableClear = true;
 
@@ -236,6 +251,36 @@ class CdkTableMdSortApp {
   columnsToRender = ['column_a', 'column_b', 'column_c'];
 }
 
+@Component({
+  template: `
+    <md-table [dataSource]="dataSource" mdSort>
+      <ng-container mdColumnDef="column_a">
+        <md-header-cell *mdHeaderCellDef #sortHeaderA md-sort-header> Column A </md-header-cell>
+        <md-cell *mdCellDef="let row"> {{row.a}} </md-cell>
+      </ng-container>
+
+      <ng-container mdColumnDef="column_b">
+        <md-header-cell *mdHeaderCellDef #sortHeaderB md-sort-header> Column B </md-header-cell>
+        <md-cell *mdCellDef="let row"> {{row.b}} </md-cell>
+      </ng-container>
+
+      <ng-container mdColumnDef="column_c">
+        <md-header-cell *mdHeaderCellDef #sortHeaderC md-sort-header> Column C </md-header-cell>
+        <md-cell *mdCellDef="let row"> {{row.c}} </md-cell>
+      </ng-container>
+
+      <md-header-row *mdHeaderRowDef="columnsToRender"></md-header-row>
+      <md-row *mdRowDef="let row; columns: columnsToRender"></md-row>
+    </md-table>
+  `
+})
+class MdTableMdSortApp {
+  @ViewChild(MdSort) mdSort: MdSort;
+
+  dataSource = new FakeDataSource();
+  columnsToRender = ['column_a', 'column_b', 'column_c'];
+}
+
 
 @Component({
   template: `<div md-sort-header="a"> A </div>`

src/lib/table/cell.ts

@@ -6,13 +6,49 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Directive, ElementRef, Renderer2} from '@angular/core';
-import {CdkCell, CdkColumnDef, CdkHeaderCell} from '@angular/cdk/table';
+import {Directive, ElementRef, Input, Renderer2} from '@angular/core';
+import {CdkCell, CdkCellDef, CdkColumnDef, CdkHeaderCell, CdkHeaderCellDef} from '@angular/cdk/table';
 
 /** Workaround for https://github.com/angular/angular/issues/17849 */
-export const _MdHeaderCellBase = CdkHeaderCell;
+export const _MdCellDef = CdkCellDef;
+export const _MdHeaderCellDef = CdkHeaderCellDef;
+export const _MdColumnDef = CdkColumnDef;
+export const _MdHeaderCell = CdkHeaderCell;
 export const _MdCell = CdkCell;
 
+/**
+ * Cell definition for the md-table.
+ * Captures the template of a column's data row cell as well as cell-specific properties.
+ */
+@Directive({
+  selector: '[mdCellDef], [matCellDef]',
+  providers: [{provide: CdkCellDef, useExisting: MdCellDef}]
+})
+export class MdCellDef extends _MdCellDef { }
+
+/**
+ * Header cell definition for the md-table.
+ * Captures the template of a column's header cell and as well as cell-specific properties.
+ */
+@Directive({
+  selector: '[mdHeaderCellDef], [matHeaderCellDef]',
+  providers: [{provide: CdkHeaderCellDef, useExisting: MdHeaderCellDef}]
+})
+export class MdHeaderCellDef extends _MdHeaderCellDef { }
+
+/**
+ * Column definition for the md-table.
+ * Defines a set of cells available for a table column.
+ */
+@Directive({
+  selector: '[mdColumnDef], [matColumnDef]',
+  providers: [{provide: CdkColumnDef, useExisting: MdColumnDef}],
+})
+export class MdColumnDef extends _MdColumnDef {
+  /** Unique name for this column. */
+  @Input('mdColumnDef') name: string;
+}
+
 /** Header cell template container that adds the right classes and role. */
 @Directive({
   selector: 'md-header-cell, mat-header-cell',
@@ -21,7 +57,7 @@ export const _MdCell = CdkCell;
     'role': 'columnheader',
   },
 })
-export class MdHeaderCell extends _MdHeaderCellBase {
+export class MdHeaderCell extends _MdHeaderCell {
   constructor(columnDef: CdkColumnDef,
               elementRef: ElementRef,
               renderer: Renderer2) {

src/lib/table/index.ts

@@ -9,8 +9,8 @@
 import {NgModule} from '@angular/core';
 import {MdTable} from './table';
 import {CdkTableModule} from '@angular/cdk/table';
-import {MdCell, MdHeaderCell} from './cell';
-import {MdHeaderRow, MdRow} from './row';
+import {MdCell, MdHeaderCell, MdCellDef, MdHeaderCellDef, MdColumnDef} from './cell';
+import {MdHeaderRow, MdRow, MdHeaderRowDef, MdRowDef} from './row';
 import {CommonModule} from '@angular/common';
 import {MdCommonModule} from '../core';
 
@@ -20,7 +20,11 @@ export * from './row';
 
 @NgModule({
   imports: [CdkTableModule, CommonModule, MdCommonModule],
-  exports: [MdTable, MdHeaderCell, MdCell, MdHeaderRow, MdRow],
-  declarations: [MdTable, MdHeaderCell, MdCell, MdHeaderRow, MdRow],
+  exports: [MdTable, MdCellDef, MdHeaderCellDef, MdColumnDef,
+    MdHeaderRowDef, MdRowDef,
+    MdHeaderCell, MdCell, MdHeaderRow, MdRow],
+  declarations: [MdTable, MdCellDef, MdHeaderCellDef, MdColumnDef,
+    MdHeaderRowDef, MdRowDef,
+    MdHeaderCell, MdCell, MdHeaderRow, MdRow],
 })
 export class MdTableModule {}

src/lib/table/row.ts

@@ -6,13 +6,37 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {ChangeDetectionStrategy, Component} from '@angular/core';
-import {CdkHeaderRow, CdkRow, CDK_ROW_TEMPLATE} from '@angular/cdk/table';
+import {ChangeDetectionStrategy, Component, Directive} from '@angular/core';
+import {CdkHeaderRow, CdkRow, CDK_ROW_TEMPLATE, CdkRowDef, CdkHeaderRowDef} from '@angular/cdk/table';
 
 /** Workaround for https://github.com/angular/angular/issues/17849 */
+export const _MdHeaderRowDef = CdkHeaderRowDef;
+export const _MdCdkRowDef = CdkRowDef;
 export const _MdHeaderRow = CdkHeaderRow;
 export const _MdRow = CdkRow;
 
+/**
+ * Header row definition for the md-table.
+ * Captures the header row's template and other header properties such as the columns to display.
+ */
+@Directive({
+  selector: '[mdHeaderRowDef], [matHeaderRowDef]',
+  providers: [{provide: CdkHeaderRowDef, useExisting: MdHeaderRowDef}],
+  inputs: ['columns: mdHeaderRowDef'],
+})
+export class MdHeaderRowDef extends _MdHeaderRowDef { }
+
+/**
+ * Data row definition for the md-table.
+ * Captures the header row's template and other row properties such as the columns to display.
+ */
+@Directive({
+  selector: '[mdRowDef], [matRowDef]',
+  providers: [{provide: CdkRowDef, useExisting: MdRowDef}],
+  inputs: ['columns: mdRowDefColumns'],
+})
+export class MdRowDef extends _MdCdkRowDef { }
+
 /** Header template container that contains the cell outlet. Adds the right class and role. */
 @Component({
   selector: 'md-header-row, mat-header-row',

src/lib/table/table.md

@@ -2,9 +2,8 @@ The `md-table` provides a Material Design styled data-table that can be used to
 data.
 
 This table builds on the foundation of the CDK data-table and uses a similar interface for its
-data source input and template, except that its element selectors will be prefixed with `md-`
-instead of `cdk-`. Note that the column definition directives (`cdkColumnDef` and `cdkHeaderCellDef`) are still
-prefixed with `cdk-`.
+data source input and template, except that its element and attribute selectors will be prefixed 
+with `md-` instead of `cdk-`.
 
 For more information on the interface and how it works, see the
 [guide covering the CDK data-table](https://material.angular.io/guide/cdk-table).