feat(md-data-table): Add data-table style hooks

* Add styles for th during column sorting
* Limit size of check-box column
* Add css names that can be used independent of component
* Add SASS vars for potential customiztion & theming
* Tighten adherence to MD table spec spacing/sizing

ng2-material/components/data_table/README.md

@@ -5,6 +5,10 @@ MdDataTable is an enhancment of classic data tables.
 ### Classes
 | Name | Target | Description |
 | --- | --- | --- |
+| md-data-table | table | Style table, without using md-data-table component |
+| sortable | th | mark column as sortable |
+| sorted-ascending | th | mark column as sorted ascending |
+| sorted-descending | th | mark column as sorted descending |
 | md-text-cell | thead th, tbody td | Declare a cell as non-numeric and left align its text. |
 
 ## Selectable data table

ng2-material/components/data_table/data_table.scss

@@ -1,44 +1,133 @@
 @import "../../core/style/variables";
 @import "../../core/style/default-theme";
 
-md-data-table {
+$data-table-font-size: rem(1.3) !default;
+$data-table-header-font-size: rem(1.2) !default;
+$data-table-header-sort-icon-size: rem(1.6) !default;
+
+//TODO (ollwenjones) somewhere support dark themeing for these colors?
+$data-table-header-sorted-icon-hover-color: rgba(#000, 0.38) !default;
+$data-table-divider-color: rgba(#000, 0.12) !default;
+$first-last-cell-padding: rem(2.4) !default;
+$check-cell-width: rem(1.8) !default;
+
+$data-table-hover-color: md-color($md-grey, 200) !default;
+$data-table-selection-color: md-color($md-grey, 100) !default;
+
+$data-table-dividers: 1px solid $data-table-divider-color !default;
+
+$data-table-row-height: rem(4.800) !default;
+$data-table-last-row-height: rem(5.600) !default;
+$data-table-column-padding: rem(2.400) !default;
+$data-table-column-spacing: rem(3.200) !default; 
+//column spacing + column padding = the prescribed 56dp
+
+md-data-table, .md-data-table {
   display: table;
   border-spacing: 0;
   border-collapse: collapse;
+  font-size: $data-table-font-size;
+
+  box-sizing: border-box;
+  width: 100%;
 
   md-checkbox {
     margin: 0;
+    width: $check-cell-width;
+    vertical-align: middle;
   }
   tr {
-    vertical-align: top;
+    vertical-align: middle;
+    &:last-child {
+      height: $data-table-last-row-height;
+    }
   }
   th, td {
+    padding: 0 $data-table-column-spacing 0 $data-table-column-padding;
     text-align: right;
+
+    &:first-of-type {
+      padding-left: $first-last-cell-padding;
+    }
+
+    &:last-of-type {
+      padding-right: $first-last-cell-padding;
+    }
+
     &.md-text-cell { text-align: left; }
+
+    &.md-data-check-cell {
+      padding: 0 0 0 $data-table-column-padding;
+      width: $check-cell-width;
+    }
   }
   th {
-    padding: 22px 12px;
-    font-size: 12px;
+    font-size: $data-table-header-font-size;
     font-weight: 600;
     color: md-color($md-foreground, secondary-text);
+    text-overflow: ellipsis;
+    box-sizing: border-box;
+
+    &.sortable {
+      cursor: pointer;
+    }
+
+    /*
+     TODO (ollwenjones) sorting functionality pending, but these class names
+     were tested, and can be used outside of the library component structures.
+     */
+    &.sorted-ascending,
+    &.sorted-descending {
+      color: md-color($md-foreground, text);
+      &:before {
+        font-family: 'Material Icons';
+        font-size: $data-table-header-sort-icon-size;
+        content: "\e5d8";
+        margin-right: 5px;
+        vertical-align: sub;
+      }
+      &:hover {
+        cursor: pointer;
+        &:before {
+          color: $data-table-header-sorted-icon-hover-color;
+        }
+      }
+    }
+    &.sorted-descending:before {
+      content: "\e5db";
+    }
   }
   td {
-    border-top: 1px solid md-color($md-foreground, divider);
-    padding: 14px 12px;
-    font-size: 13px;
+    position: relative;
+    vertical-align: middle;
+    height: $data-table-row-height;
+    border-top: $data-table-dividers;
+    border-bottom: $data-table-dividers;
+    box-sizing: border-box;
     color: md-color($md-foreground, text);
   }
-  th:first-child, td:first-child{
+  th:first-child, td:first-child {
     padding-left: 24px;
   }
-  th:last-child, td:last-child{
+  th:last-child, td:last-child {
     padding-right: 24px;
   }
 
-  tr:hover td {
-    background-color: md-color($md-grey, 200);
+  tr {
+    position: relative;
+    height: $data-table-row-height;
   }
-  .active td {
-    background-color: md-color($md-grey, 100);
+
+  tbody, .md-data-tbody {
+    tr {
+      &.selected, &.active {
+        background-color: $data-table-selection-color;
+      }
+
+      &:hover {
+        background-color: $data-table-hover-color;
+      }      
+    }
   }
+
 }

ng2-material/components/data_table/data_table_selectable_tr.ts

@@ -60,7 +60,7 @@ export abstract class AbstractMdDataTableSelectableRow implements AfterContentIn
 @Component({
   selector: 'tr[md-data-table-header-selectable-row]',
   template: `
-        <th>
+        <th class="md-data-check-cell">
             <md-checkbox #check [checked]="isActive"></md-checkbox>
         </th>
         <ng-content></ng-content>
@@ -94,7 +94,7 @@ export class MdDataTableHeaderSelectableRow extends AbstractMdDataTableSelectabl
 @Component({
   selector: 'tr[md-data-table-selectable-row]',
   template: `
-        <td>
+        <td class="md-data-check-cell">
           <md-checkbox #check [checked]="isActive"></md-checkbox>
         </td>
         <ng-content></ng-content>