feat: first steps of data table integration

examples/all.ts

@@ -7,6 +7,7 @@ import CardBasicUsage from './components/card/basic_usage';
 import CardInlineActions from './components/card/inline_actions';
 import ButtonBasicUsage from './components/button/basic_usage';
 import CardActionButtons from './components/card/action_buttons';
+import DataTableBasicUsage from './components/data_table/basic_usage';
 import DialogBasicUsage from './components/dialog/basic_usage';
 import ToolbarBasicUsage from './components/toolbar/basic_usage';
 import ToolbarScrollShrink from './components/toolbar/scroll_shrink';
@@ -31,6 +32,7 @@ export const DEMO_DIRECTIVES: Type[] = CONST_EXPR([
   CardBasicUsage, CardInlineActions, CardActionButtons,
   ButtonBasicUsage,
   CheckboxBasicUsage, CheckboxSyncing,
+  DataTableBasicUsage,
   DialogBasicUsage,
   InputBasicUsage,
   InputFormBuilder,

examples/components/data_table/basic_usage.html

@@ -0,0 +1,22 @@
+<md-content class="md-padding" layout="row" layout-wrap layout-align="center start">
+    <div flex="50" layout="column" flex-xs="100">
+
+        <md-data-table class="md-data-table--selectable">
+            <thead>
+            <tr>
+                <th class="md-data-table__cell--non-numeric">Material</th>
+                <th>Quantity</th>
+                <th>Unit price</th>
+            </tr>
+            </thead>
+            <tbody>
+            <tr *ngFor="#material of materials">
+                <td class="md-data-table__cell--non-numeric">{{ material.name }}</td>
+                <td>{{ material.quantity }}</td>
+                <td>{{ material.price }}</td>
+            </tr>
+            </tbody>
+        </md-data-table>
+
+    </div>
+</md-content>

examples/components/data_table/basic_usage.ts

@@ -0,0 +1,15 @@
+import {View, Component} from 'angular2/core';
+import {MATERIAL_DIRECTIVES} from 'ng2-material/all';
+
+@Component({selector: 'data-table-basic-usage'})
+@View({
+    templateUrl: 'examples/components/data_table/basic_usage.html',
+    directives: [MATERIAL_DIRECTIVES]
+})
+export default class DataTableBasicUsage {
+    materials: Array<any> = [
+        {'name': 'Acrylic (Transparent)', 'quantity': '25', 'price': '$2.90'},
+        {'name': 'Plywood (Birch)', 'quantity': '50', 'price': '$1.25'},
+        {'name': 'Laminate (Gold on Blue)', 'quantity': '10', 'price': '$2.35'}
+    ]
+}

examples/components/data_table/readme.md

@@ -0,0 +1 @@
+Table are great to organize datas.

ng2-material/all.ts

@@ -68,6 +68,9 @@ export * from './components/toolbar/toolbar';
 import {MdTabs, MdTab} from './components/tabs/tabs';
 export * from './components/tabs/tabs';
 
+import {MdDataTable, MdDataTableTr} from './components/data_table/data_table';
+export * from './components/data_table/data_table';
+
 import {Media} from "./core/util/media";
 export * from './core/util/media';
 
@@ -97,7 +100,8 @@ export const MATERIAL_DIRECTIVES: Type[] = CONST_EXPR([
   MdSubheader,
   MdSwitch,
   MdToolbar,
-  MdTab, MdTabs
+  MdTab, MdTabs,
+  MdDataTable, MdDataTableTr
 ]);
 
 /**

ng2-material/components.scss

@@ -3,6 +3,7 @@
 @import "components/card/card";
 @import "components/content/content";
 @import "components/checkbox/checkbox";
+@import "components/data_table/data_table";
 @import "components/dialog/dialog";
 @import "components/divider/divider";
 @import "components/icon/icon";

ng2-material/components/data_table/data_table.scss

@@ -0,0 +1,43 @@
+@import "../../core/style/variables";
+
+// TODO(jelbourn): This goes away.
+@import "../../core/style/default-theme";
+
+md-data-table {
+  display: table;
+  border-spacing: 0;
+  border-collapse: collapse;
+
+  md-checkbox {
+    margin: 0;
+  }
+  th {
+    padding: 22px 12px;
+    font-size: 12px;
+    font-weight: 600;
+    text-align: left;
+    color: md-color($md-foreground, text);
+  }
+  td {
+    border-top: 1px solid md-color($md-foreground, divider);
+    padding: 14px 12px;
+    font-size: 13px;
+    text-align: right;
+    color: md-color($md-foreground, secondary-text);
+
+    &.md-data-table__cell--non-numeric { text-align: left; }
+  }
+  th:first-child, td:first-child{
+    padding-left: 24px;
+  }
+  th:last-child, td:last-child{
+    padding-right: 24px;
+  }
+
+  tr:hover td {
+    background-color: md-color($md-grey, 200);
+  }
+  .active td {
+    background-color: md-color($md-grey, 100);
+  }
+}

ng2-material/components/data_table/data_table.ts

@@ -0,0 +1,151 @@
+import {Component, Inject, forwardRef, ElementRef, AfterContentInit} from 'angular2/core';
+import {Observable} from 'rxjs/Observable';
+import {Observer} from 'rxjs/Observer';
+import 'rxjs/add/operator/filter';
+import 'rxjs/add/operator/share';
+import {MdCheckbox} from '../checkbox/checkbox';
+
+
+/**
+ * @name mdDataTable
+ *
+ * @description
+ * The `<md-data-table>` component is an enhanced version of data table
+ *
+ * Enhancement:
+ *   - selectable row (in progress)
+ *   - sortable column (@todo)
+ *
+ * It renders rows and cells as they're set by the user so it doesn't manage the inline editing by itself.
+ *
+ * Available attributes are:
+ *  - truncate-header-label-at - (int) Truncate too long header label and prepare a tooltip for the rest of the label (@todo)
+ *
+ * Available classes are:
+ *  - `md-data-table.md-data-table--selectable` - Enable one checkbox per line and a master checkbox to rule them all
+ *  - `td.md-sortable` - Enable the order of a column (@todo)
+ *  - `td.md-data-table__cell--non-numeric` - Disable the right alignement of the cells
+ *
+ * @usage
+ * ### Default table
+ * <hljs>
+ * <md-data-table>
+ *     <thead>
+ *         <tr>
+ *             <th class="md-data-table__cell--non-numeric">Material</th>
+ *             <th>Quantity</th>
+ *             <th>Unit price</th>
+ *         </tr>
+ *     </thead>
+ *     <tbody>
+ *         <tr>
+ *             <td class="md-data-table__cell--non-numeric">Acrylic (Transparent)</td>
+ *             <td>25</td>
+ *             <td>$2.90</td>
+ *         </tr>
+ *     </tbody>
+ * </md-data-table>
+ *
+ * ### Default table with selectable rows
+ * <md-data-table class="md-data-table--selectable">
+ *     <thead>
+ *         <tr>
+ *             <th class="md-data-table__cell--non-numeric">Material</th>
+ *             <th>Quantity</th>
+ *             <th>Unit price</th>
+ *         </tr>
+ *     </thead>
+ *     <tbody>
+ *         <tr>
+ *             <td class="md-data-table__cell--non-numeric">Acrylic (Transparent)</td>
+ *             <td>25</td>
+ *             <td>$2.90</td>
+ *         </tr>
+ *     </tbody>
+ * </md-data-table>
+ * </hljs>
+ */
+
+@Component({
+    selector: 'tr',
+    template: `
+        <th [ngClass]="{active: isActive}"
+            *ngIf="isSelectable && isInHeader">
+            <md-checkbox [checked]="isActive" #check (click)="_table.toggleAllCheck(!check.checked)"></md-checkbox>
+        </th>
+        <td [ngClass]="{active: isActive}"
+            *ngIf="isSelectable && !isInHeader">
+            <md-checkbox #check [checked]="isActive" (click)="toggleActive()"></md-checkbox>{{_table.isAllChecked}}
+        </td>
+        <ng-content></ng-content>
+    `,
+    directives: [MdCheckbox],
+    host: {
+        '[class.active]': 'isActive'
+    }
+})
+export class MdDataTableTr implements AfterContentInit {
+    isInHeader: boolean = false;
+    isSelectable: boolean = false;
+    isActive: boolean = false;
+
+    constructor(@Inject(forwardRef(() => MdDataTable)) private _table: MdDataTable, private _element: ElementRef) {
+        _table.masterCheckbox$
+            .filter(checked => this.isInHeader || checked === true)
+            .subscribe((checked) => this.isActive = checked);
+    }
+
+    /**
+     * Toggle checkbox and style of a row
+     */
+    toggleActive() {
+        this.isActive = !this.isActive;
+        if (!this.isActive) {
+            this._table.toggleAllCheck(false);
+        }
+    }
+
+    /**
+     * @param {ElementRef} element
+     *
+     * @returns {any}
+     */
+    static _getMdTableAncestor(element: ElementRef) {
+        let node = element.nativeElement;
+        while((node = node.parentNode) && node.localName !== 'md-data-table');
+        return node;
+    }
+
+    ngAfterContentInit() {
+        this.isInHeader = this._element.nativeElement.parentElement.localName === 'thead';
+
+        let parent = MdDataTableTr._getMdTableAncestor(this._element);
+        if (parent !== null) {
+            this.isSelectable = parent.classList.contains('md-data-table--selectable')
+        }
+    }
+}
+
+@Component({
+    selector: 'md-data-table',
+    template: `<ng-content></ng-content>`,
+    directives: [MdDataTableTr]
+})
+export class MdDataTable {
+    masterCheckbox$: Observable<boolean>;
+    _masterCheckboxObserver: Observer<boolean>;
+
+    constructor() {
+        this.masterCheckbox$ = new Observable(observer => this._masterCheckboxObserver = observer)
+            .share();
+    }
+
+    /**
+     * Toggle all checkbox of the table
+     *
+     * @param {boolean} checked
+     */
+    toggleAllCheck(checked: boolean) {
+        this._masterCheckboxObserver.next(checked);
+    }
+}