Add basic data table, with more functionality to come later.

gulpfile.js

@@ -186,6 +186,7 @@ gulp.task('scripts', function () {
     'src/tooltip/tooltip.js',
     // Complex components (which reuse base components)
     'src/layout/layout.js',
+    'src/data-table/data-table.js',
     // And finally, the ripples
     'src/ripple/ripple.js'
   ];

src/_variables.scss

@@ -39,6 +39,7 @@
  * -----Badge
  * -----Shadows
  * -----Grid
+ * -----Data table
  */
 
 
@@ -558,3 +559,26 @@ $grid-phone-gutter: $grid-desktop-gutter !default;
 $grid-phone-margin: $grid-desktop-margin !default;
 
 $grid-cell-default-columns: $grid-phone-columns !default;
+
+/* DATA TABLE */
+
+$data-table-header-color: rgba(#000, 0.54);
+$data-table-divider-color: rgba(#000, 0.12);
+
+$data-table-hover-color: #eeeeee;
+$data-table-selection-color: #e0e0e0;
+
+$data-table-dividers: 1px solid $data-table-divider-color;
+
+$data-table-row-height: 48px;
+$data-table-last-row-height: 56px;
+$data-table-header-height: 56px;
+
+$data-table-column-spacing: 36px;
+$data-table-column-padding: $data-table-column-spacing / 2;
+
+$data-table-card-header-height: 64px;
+$data-table-card-title-top: 20px;
+$data-table-card-padding: 24px;
+$data-table-button-padding-right: 16px;
+$data-table-cell-top: $data-table-card-padding / 2;

src/data-table/_data-table.scss

@@ -0,0 +1,135 @@
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+ @import "../variables";
+
+
+.mdl-data-table {
+  display: inline-block;
+  position: relative;
+  @include shadow-2dp();
+
+  & .mdl-data-table__table {
+    border-top: none;
+  }
+
+  .mdl-data-table__select {
+    width: 16px;
+  }
+}
+
+.mdl-data-table__header-right {
+  position: absolute;
+  right: $data-table-button-padding-right;
+
+  & > * {
+    margin-left: $data-table-card-padding;
+  }
+}
+
+.mdl-data-table__header {
+  height: $data-table-header-height;
+  border-top: $data-table-dividers;
+  border-left: $data-table-dividers;
+  border-right: $data-table-dividers;
+}
+
+.mdl-data-table__title {
+  position: absolute;
+  top: $data-table-card-title-top;
+  left: $data-table-card-padding;
+  text-align: left;
+  @include typo-title();
+}
+
+.mdl-data-table__table {
+  position: relative;
+  border: $data-table-dividers;
+  border-collapse: collapse;
+  white-space: nowrap;
+
+  tbody {
+    tr {
+      position: relative;
+      height: $data-table-row-height;
+      @include material-animation-default(0.28s);
+      transition-property: background-color;
+
+      &:last-of-type {
+        height: $data-table-last-row-height;
+      }
+
+      &.is-selected {
+        background-color: $data-table-selection-color;
+      }
+
+      &:hover {
+        background-color: $data-table-hover-color;
+      }
+    }
+  }
+
+  td, th {
+    padding: 0 $data-table-column-padding 0 $data-table-column-padding;
+    text-align: right;
+
+    &:first-of-type {
+      padding-left: 24px;
+    }
+
+    &:last-of-type {
+      padding-right: 24px;
+    }
+  }
+
+  td {
+    position: relative;
+    vertical-align: top;
+    height: $data-table-row-height;
+    border-top: $data-table-dividers;
+    border-bottom: $data-table-dividers;
+    padding-top: $data-table-cell-top;
+    box-sizing: border-box;
+
+    .mdl-data-table__select {
+      vertical-align: top;
+      position: absolute;
+      top: 0;
+      left: 24px;
+    }
+  }
+
+  th {
+    position: relative;
+    vertical-align: bottom;
+    text-overflow: ellipsis;
+    height: $data-table-header-height;
+    @include typo-body-2();
+    font-size: 12px;
+    color: $data-table-header-color;
+    padding-bottom: 8px;
+    box-sizing: border-box;
+
+    .mdl-data-table__select {
+      position: relative;
+      top: 12px;
+    }
+  }
+}
+
+.mdl-data-table--non-numeric.mdl-data-table--non-numeric {
+  text-align: left;
+}

src/data-table/data-table.js

@@ -0,0 +1,152 @@
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * Class constructor for Data Table Card MDL component.
+ * Implements MDL component design pattern defined at:
+ * https://github.com/jasonmayes/mdl-component-design-pattern
+ * @param {HTMLElement} element The element that will be upgraded.
+ */
+function MaterialDataTable(element) {
+  'use strict';
+
+  this.element_ = element;
+
+  // Initialize instance.
+  this.init();
+}
+
+/**
+ * Store constants in one place so they can be updated easily.
+ * @enum {string | number}
+ * @private
+ */
+MaterialDataTable.prototype.Constant_ = {
+  // None at the moment.
+};
+
+/**
+ * Store strings for class names defined by this component that are used in
+ * JavaScript. This allows us to simply change it in one place should we
+ * decide to modify at a later date.
+ * @enum {string}
+ * @private
+ */
+MaterialDataTable.prototype.CssClasses_ = {
+  DATA_TABLE: 'mdl-data-table',
+  TABLE: 'mdl-data-table__table',
+  SELECTABLE: 'mdl-data-table--selectable',
+  IS_SELECTED: 'is-selected',
+  IS_UPGRADED: 'is-upgraded'
+};
+
+MaterialDataTable.prototype.selectRow_ = function(checkbox, row, rows) {
+  'use strict';
+
+  if (row) {
+    return function() {
+      if (checkbox.checked) {
+        row.classList.add(this.CssClasses_.IS_SELECTED);
+      } else {
+        row.classList.remove(this.CssClasses_.IS_SELECTED);
+      }
+    }.bind(this);
+  }
+
+  if (rows) {
+    return function() {
+      var i;
+      var el;
+      if (checkbox.checked) {
+        for (i = 0; i < rows.length; i++) {
+          el = rows[i].querySelector('td').querySelector('.mdl-checkbox');
+          el.widget.check();
+          rows[i].classList.add(this.CssClasses_.IS_SELECTED);
+        }
+      } else {
+        for (i = 0; i < rows.length; i++) {
+          el = rows[i].querySelector('td').querySelector('.mdl-checkbox');
+          el.widget.uncheck();
+          rows[i].classList.remove(this.CssClasses_.IS_SELECTED);
+        }
+      }
+    }.bind(this);
+  }
+};
+
+MaterialDataTable.prototype.createCheckbox_ = function(row, rows) {
+  'use strict';
+
+  var label = document.createElement('label');
+  label.classList.add('mdl-checkbox');
+  label.classList.add('mdl-js-checkbox');
+  label.classList.add('mdl-js-ripple-effect');
+  label.classList.add('mdl-data-table__select');
+  var checkbox = document.createElement('input');
+  checkbox.type = 'checkbox';
+  checkbox.classList.add('mdl-checkbox__input');
+  if (row) {
+    checkbox.addEventListener('change', this.selectRow_(checkbox, row));
+  } else if (rows) {
+    checkbox.addEventListener('change', this.selectRow_(checkbox, null, rows));
+  }
+  label.appendChild(checkbox);
+  componentHandler.upgradeElement(label, 'MaterialCheckbox');
+  return label;
+};
+
+/**
+ * Initialize element.
+ */
+MaterialDataTable.prototype.init = function() {
+  'use strict';
+
+  if (this.element_) {
+    this.table_ = this.element_.querySelector('.' + this.CssClasses_.TABLE);
+
+    if (this.table_) {
+      var firstHeader = this.table_.querySelector('th');
+      var rows = this.table_.querySelector('tbody').querySelectorAll('tr');
+
+      if (this.element_.classList.contains(this.CssClasses_.SELECTABLE)) {
+        var th = document.createElement('th');
+        var headerCheckbox = this.createCheckbox_(null, rows);
+        th.appendChild(headerCheckbox);
+        firstHeader.parentElement.insertBefore(th, firstHeader);
+      }
+
+      for (var i = 0; i < rows.length; i++) {
+        var firstCell = rows[i].querySelector('td');
+        if (firstCell) {
+          var td = document.createElement('td');
+          var rowCheckbox = this.createCheckbox_(rows[i]);
+          td.appendChild(rowCheckbox);
+          rows[i].insertBefore(td, firstCell);
+        }
+      }
+    }
+
+    this.element_.classList.add(this.CssClasses_.IS_UPGRADED);
+  }
+};
+
+// The component registers itself. It can assume componentHandler is available
+// in the global scope.
+componentHandler.register({
+  constructor: MaterialDataTable,
+  classAsString: 'MaterialDataTable',
+  cssClass: 'mdl-js-data-table'
+});

src/data-table/demo.html

@@ -0,0 +1,55 @@
+<!doctype html>
+<html lang="">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="description" content="">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Data Table</title>
+
+    <link href='//fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en' rel='stylesheet' type='text/css'>
+
+    <link rel="stylesheet" href="demo.css">
+  </head>
+  <body>
+
+    <div class="mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--z2">
+      <div class="mdl-data-table__header">
+        <span class="mdl-data-table__title">A Material Table</span>
+        <div class="mdl-data-table__header-right">
+          <button class="mdl-button mdl-js-button mdl-button--icon mdl-button--mini-icon">
+            <span class="mdl-icon mdl-icon--more-vert"></span>
+          </button>
+        </div>
+      </div>
+      <table class="mdl-data-table__table">
+        <thead>
+          <tr>
+            <th class="mdl-data-table--non-numeric">Material</th>
+            <th>Quantity</th>
+            <th>Unit price</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td class="mdl-data-table--non-numeric">Acrylic (Transparent)</td>
+            <td>25</td>
+            <td>$2.90</td>
+          </tr>
+          <tr>
+            <td class="mdl-data-table--non-numeric">Plywood (Birch)</td>
+            <td>50</td>
+            <td>$1.25</td>
+          </tr>
+          <tr>
+            <td class="mdl-data-table--non-numeric">Laminate (Gold on Blue)</td>
+            <td>10</td>
+            <td>$2.35</td>
+          </tr>
+      </tbody>
+      </table>
+    </div>
+
+    <script src="../../material.js"></script>
+  </body>
+</html>

src/data-table/demo.scss

@@ -0,0 +1,17 @@
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@import "../material-design-lite";

src/material-design-lite.scss

@@ -34,6 +34,7 @@
 @import "button/button";
 @import "card/card";
 @import "checkbox/checkbox";
+@import "data-table/data-table";
 @import "footer/mega_footer";
 @import "footer/mini_footer";
 @import "grid/grid";