chore: merge branch 'data-table-review'

examples/all.ts

@@ -6,6 +6,8 @@ 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 DataTableSelectableUsage from './components/data_table/selectable_usage';
 import DialogBasicUsage from "./components/dialog/basic_usage";
 import ToolbarBasicUsage from "./components/toolbar/basic_usage";
 import ToolbarScrollShrink from "./components/toolbar/scroll_shrink";
@@ -30,6 +32,7 @@ export const DEMO_DIRECTIVES: Type[] = CONST_EXPR([
   CardBasicUsage, CardInlineActions, CardActionButtons,
   ButtonBasicUsage,
   CheckboxBasicUsage, CheckboxSyncing,
+  DataTableBasicUsage, DataTableSelectableUsage,
   DialogBasicUsage,
   InputBasicUsage,
   InputFormBuilder,

examples/components/data_table/basic_usage.html

@@ -0,0 +1,16 @@
+<md-data-table layout-fill>
+  <thead>
+  <tr>
+    <th class="md-text-cell">Material</th>
+    <th>Quantity</th>
+    <th>Unit price</th>
+  </tr>
+  </thead>
+  <tbody>
+  <tr *ngFor="#material of materials">
+    <td class="md-text-cell">{{ material.name }}</td>
+    <td>{{ material.quantity }}</td>
+    <td>{{ material.price }}</td>
+  </tr>
+  </tbody>
+</md-data-table>

examples/components/data_table/basic_usage.ts

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

examples/components/data_table/readme.md

@@ -0,0 +1 @@
+A data table that supports static and selectable rows.

examples/components/data_table/selectable_usage.html

@@ -0,0 +1,26 @@
+<md-toolbar>
+  <div class="md-toolbar-tools" *ngIf="!selection">
+    <span>Materials</span>
+  </div>
+  <div class="md-toolbar-tools selection" *ngIf="selection">
+    <span>{{count}} item{{count > 1 ? 's' : ''}} selected</span>
+    <span flex hide show-gt-md></span>
+    <span class="md-caption" hide show-gt-md>{{selection}}</span>
+  </div>
+</md-toolbar>
+<md-data-table layout-fill [selectable]="true" (onSelectableChange)="change($event)">
+  <thead>
+  <tr>
+    <th class="md-text-cell">Material</th>
+    <th>Quantity</th>
+    <th>Unit price</th>
+  </tr>
+  </thead>
+  <tbody>
+  <tr *ngFor="#material of materials" [selectableValue]="material.id">
+    <td class="md-text-cell">{{ material.name }}</td>
+    <td>{{ material.quantity }}</td>
+    <td>{{ material.price }}</td>
+  </tr>
+  </tbody>
+</md-data-table>

examples/components/data_table/selectable_usage.scss

@@ -0,0 +1,14 @@
+@import "../../../ng2-material/core/style/variables";
+@import "../../../ng2-material/core/style/default-theme";
+
+md-toolbar {
+  background-color: transparent;
+  border-bottom: 1px solid md-color($md-foreground, divider);
+  color: md-color($md-foreground, text);
+  .md-toolbar-tools {
+    &.selection {
+      background-color: md-color($md-accent, 50);
+      color: md-color($md-accent, 900);
+    }
+  }
+}

examples/components/data_table/selectable_usage.ts

@@ -0,0 +1,29 @@
+import {Component} from "angular2/core";
+import {MATERIAL_DIRECTIVES, ITableSelectionChange} from "ng2-material/all";
+
+@Component({
+  selector: 'data-table-selectable-usage',
+  templateUrl: 'examples/components/data_table/selectable_usage.html',
+  styleUrls: ['examples/components/data_table/selectable_usage.css'],
+  directives: [MATERIAL_DIRECTIVES]
+})
+export default class DataTableSelectableUsage {
+  selection: string;
+  count: number;
+  materials: Array<any> = [
+    {'id': 1, 'name': 'Acrylic (Transparent)', 'quantity': '25', 'price': '$2.90'},
+    {'id': 2, 'name': 'Plywood (Birch)', 'quantity': '50', 'price': '$1.25'},
+    {'id': 3, 'name': 'Laminate (Gold on Blue)', 'quantity': '10', 'price': '$2.35'}
+  ];
+
+  change(data: ITableSelectionChange) {
+    let names = [];
+    this.materials.forEach((mat: any) => {
+      if (data.values.indexOf(mat.id) !== -1) {
+        names.push(mat.name);
+      }
+    });
+    this.selection = names.join(', ');
+    this.count = names.length;
+  }
+}

ng2-material/all.ts

@@ -2,6 +2,7 @@ import {CONST_EXPR, Type} from "angular2/src/facade/lang";
 import {MdAnchor, MdButton} from "./components/button/button";
 import {MdCheckbox} from "./components/checkbox/checkbox";
 import {MdContent} from "./components/content/content";
+import {MdDataTable, MdDataTableTr} from './components/data_table/data_table';
 import {MdDialog} from "./components/dialog/dialog";
 import {MdDivider} from "./components/divider/divider";
 import {MdIcon} from "./components/icon/icon";
@@ -35,6 +36,8 @@ export * from './components/checkbox/checkbox';
 
 export * from './components/content/content';
 
+export * from './components/data_table/data_table';
+
 export * from './components/dialog/dialog';
 export * from './components/divider/divider';
 
@@ -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/README.md

@@ -0,0 +1,40 @@
+# MdDataTable
+MdDataTable is an enhancment of classic data tables.
+
+## Basic data table
+### Classes
+| Name | Target | Description |
+| --- | --- | --- |
+| md-text-cell | thead th, tbody td | Declare a cell as non-numeric and left align its text. |
+
+## Selectable data table
+### Properties
+| Name | Target | Type | Description |
+| --- | --- | --- | --- |
+| selectable | md-data-table | boolean | Enable one checkbox per line and a master checkbox to rule them all. |   
+| selectableValue | tbody tr | string | value of the checkbox. If it's not set the checkbox's value will be the index of the row. |
+
+### Events
+| Name | Description |
+| --- | --- |
+| selectable_change | Emmited when the user select or unselect a row |
+
+## Examples
+```
+<md-data-table [selectable]="true">
+  <thead>
+  <tr>
+    <th class="md-text-cell">Material</th>
+    <th>Quantity</th>
+    <th>Unit price</th>
+  </tr>
+  </thead>
+  <tbody>
+  <tr *ngFor="#material of materials" [selectableValue]="material.id">
+    <td class="md-text-cell">{{ material.name }}</td>
+    <td>{{ material.quantity }}</td>
+    <td>{{ material.price }}</td>
+  </tr>
+  </tbody>
+</md-data-table>
+```

ng2-material/components/data_table/data_table.scss

@@ -0,0 +1,44 @@
+@import "../../core/style/variables";
+@import "../../core/style/default-theme";
+
+md-data-table {
+  display: table;
+  border-spacing: 0;
+  border-collapse: collapse;
+
+  md-checkbox {
+    margin: 0;
+  }
+  tr {
+    vertical-align: top;
+  }
+  th, td {
+    text-align: right;
+    &.md-text-cell { text-align: left; }
+  }
+  th {
+    padding: 22px 12px;
+    font-size: 12px;
+    font-weight: 600;
+    color: md-color($md-foreground, secondary-text);
+  }
+  td {
+    border-top: 1px solid md-color($md-foreground, divider);
+    padding: 14px 12px;
+    font-size: 13px;
+    color: md-color($md-foreground, text);
+  }
+  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,86 @@
+import {Component, Input, Output, EventEmitter, ContentChildren, QueryList} from "angular2/core";
+import {MdDataTableTr} from "./data_table_tr";
+import "rxjs/add/operator/share";
+
+export * from './data_table_tr';
+
+/**
+ * Selectable change event data
+ */
+export interface ITableSelectionChange {
+  name: string;
+  allSelected: boolean;
+  values: any[];
+}
+
+
+@Component({
+  selector: 'md-data-table',
+  template: `<ng-content></ng-content>`,
+  directives: [MdDataTableTr],
+  host: {
+    '[class.md-data-table]': 'true',
+    '[class.md-data-table-selectable]': 'selectable',
+  }
+})
+export class MdDataTable {
+  @Input()
+  selectable: boolean;
+  @Output()
+  onSelectableAll: EventEmitter<any> = new EventEmitter(false);
+  @Output()
+  onSelectableChange: EventEmitter<any> = new EventEmitter(false);
+
+  @ContentChildren(MdDataTableTr, true)
+  _rows: QueryList<MdDataTableTr>;
+  selected: Array<string> = [];
+
+  constructor() {
+    this.onSelectableChange.share();
+  }
+
+  /**
+   * Fill/Empty the array of selected values
+   *
+   * @param {MdDataTableTr} tr
+   */
+  toggleActivity(tr: MdDataTableTr) {
+    let event: ITableSelectionChange = {
+      name: 'selectable_change',
+      allSelected: false,
+      values: []
+    };
+
+    if (tr.isInHeader === true) {
+      if (tr.isActive === true) {
+        event.allSelected = true;
+        event.values = this._getRowsValues();
+      }
+    } else {
+      event.values = this.selected.slice(0);
+
+      if (tr.isActive === true) {
+        event.values.push(tr.selectableValue);
+      } else {
+        let index = event.values.indexOf(tr.selectableValue);
+        if (index !== -1) {
+          event.values.splice(index, 1);
+        }
+      }
+    }
+
+    // dispatch change
+    this.selected = event.values;
+    this.onSelectableChange.emit(event);
+  }
+
+  /**
+   * @returns {Array<string>}
+   */
+  _getRowsValues(): any[] {
+    return this._rows.toArray()
+      .filter((data, index) => index > 0)
+      .map((tr: MdDataTableTr) => tr.selectableValue);
+  }
+
+}