feature(data-table): added selectAll. closes(#172) (#197)

* added select all event when clicking select/deselect all checkbox in data-table

* updated docs and README.md

src/app/components/components/data-table/data-table.component.html

@@ -368,7 +368,8 @@ <h3>Example:</h3>
           [sortBy]="sortBy"
           [sortOrder]="'ASC'|'DESC'"
           (sortChange)="sortEvent($event)"
-          (rowSelect)="selectEvent($event)">
+          (rowSelect)="selectEvent($event)"
+          (selectAll)="selectAllEvent($event)">
         </td-data-table>
       ]]>
     </td-highlight>

src/app/components/components/data-table/data-table.component.ts

@@ -54,6 +54,12 @@ export class DataTableDemoComponent implements OnInit {
                   Emits an [ITdDataTableSelectEvent] implemented object.`,
     name: 'rowSelect',
     type: `function()`,
+  }, {
+    description: `Event emitted when all rows are selected/deselected by the all checkbox.
+                  [selectable] needs to be enabled.
+                  Emits an [ITdDataTableSelectAllEvent] implemented object.`,
+    name: 'selectAll',
+    type: `function()`,
   }];
 
   cellAttrs: Object[] = [{

src/platform/core/data-table/README.md

@@ -19,6 +19,7 @@ Properties:
 | `sortOrder?` | TdDataTableSortingOrder | Sets the sort order of the [sortBy] column. [sortable] needs to be enabled. Defaults to 'ASC' or TdDataTableSortingOrder.Ascending
 | `sortChange` | `function` | Event emitted when the column headers are clicked. [sortable] needs to be enabled. Emits an [ITdDataTableSortEvent] implemented object.
 | `rowSelect` | `function` | Event emitted when a row is selected/deselected. [selectable] needs to be enabled. Emits an [ITdDataTableSelectEvent] implemented object.
+| `selectAll` | `function` | Event emitted when all rows are selected/deselected by the all checkbox. [selectable] needs to be enabled. Emits an [ITdDataTableSelectAllEvent] implemented object.
 
 ## Setup
 
@@ -50,7 +51,8 @@ Example for HTML usage:
   [sortBy]="sortBy"
   [sortOrder]="'ASC'|'DESC'"
   (sortChange)="sortEvent($event)"
-  (rowSelect)="selectEvent($event)">
+  (rowSelect)="selectEvent($event)"
+  (selectAll)="selectAllEvent($event)">
   <template tdDataTableTemplate="columnName" let-value="value" let-row="row" let-column="column">
     <div layout="row">
       <span flex>{{value}}</span> // or <span flex>{{row[column]}}</span>

src/platform/core/data-table/data-table.component.ts

@@ -33,6 +33,11 @@ export interface ITdDataTableSelectEvent {
   selected: boolean;
 };
 
+export interface ITdDataTableSelectAllEvent {
+  rows: any[];
+  selected: boolean;
+}
+
 @Component({
   providers: [ TD_DATA_TABLE_CONTROL_VALUE_ACCESSOR ],
   selector: 'td-data-table',
@@ -201,6 +206,14 @@ export class TdDataTableComponent implements ControlValueAccessor, AfterContentI
    */
   @Output('rowSelect') onRowSelect: EventEmitter<ITdDataTableSelectEvent> = new EventEmitter<ITdDataTableSelectEvent>();
 
+  /**
+   * selectAll?: function
+   * Event emitted when all rows are selected/deselected by the all checkbox. [selectable] needs to be enabled.
+   * Emits an [ITdDataTableSelectAllEvent] implemented object.
+   */
+  @Output('selectAll') onSelectAll: EventEmitter<ITdDataTableSelectAllEvent> =
+                                    new EventEmitter<ITdDataTableSelectAllEvent>();
+
   /**
    * Loads templates and sets them in a map for faster access.
    */
@@ -257,6 +270,7 @@ export class TdDataTableComponent implements ControlValueAccessor, AfterContentI
     } else {
       this.clearModel();
     }
+    this.onSelectAll.emit({rows: this._value, selected: checked});
   }
 
   /**