fix(data-table): format columns correctly when displaying them. closes(…

…#187) (#188)

* feat(data-table): filter properly the data in the data-table

* added correct type to format function

* fix(data-table): handle undefined data array propertly.

* removed hack for tooltip in data-table since now an empty tooltip is not shown

* updated docs demo with format example in atomic components (data-table)

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

@@ -25,7 +25,7 @@ <h4 class="md-subhead">with custom headings, columns, and inline editing</h4>
                 <button md-button [class.md-accent]="!row['comments']">{{row['comments'] || 'Add Comment'}}</button>
               </td>
               <td td-data-table-cell *ngFor="let column of columns" [numeric]="column.numeric">
-                {{row[column.name]}}
+                {{column.format ? column.format(row[column.name]) : row[column.name]}}
               </td>
             </tr>
           </table>
@@ -51,7 +51,7 @@ <h4 class="md-subhead">with custom headings, columns, and inline editing</h4>
                   <button md-button [class.md-accent]="!row['comments']">{ {row['comments'] || 'Add Comment'}}</button>
                 </td>
                 <td td-data-table-cell *ngFor="let column of columns" [numeric]="column.numeric">
-                  { {row[column.name]}}
+                  { {column.format ? column.format(row[column.name]) : row[column.name]}}
                 </td>
               </tr>
             </table>

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

@@ -5,8 +5,8 @@ import { TdDataTableSortingOrder, TdDataTableService,
 import { IPageChangeEvent } from '../../../../platform/paging';
 import { TdDialogService } from '../../../../platform/core';
 
-const NUMBER_FORMAT: any = (v: number) => v;
-const DECIMAL_FORMAT: any = (v: number) => v.toFixed(2);
+const NUMBER_FORMAT: (v: any) => any = (v: number) => v;
+const DECIMAL_FORMAT: (v: any) => any = (v: number) => v.toFixed(2);
 
 @Component({
   selector: 'data-table-demo',

src/platform/data-table/data-table.component.html

@@ -17,8 +17,7 @@
         [sortable]="_sortable"
         [sortOrder]="_sortOrder"
         (sortChange)="handleSort(column)">
-        <span *ngIf="column.tooltip" [md-tooltip]="column.tooltip">{{column.label}}</span>
-        <span *ngIf="!column.tooltip">{{column.label}}</span>
+        <span [md-tooltip]="column.tooltip">{{column.label}}</span>
     </th>
     <tr td-data-table-row
         [class.md-selected]="_selectable && isRowSelected(row)"
@@ -32,7 +31,7 @@
       <td td-data-table-cell
           [numeric]="column.numeric"
           *ngFor="let column of columns">
-        <span class="md-body-1" *ngIf="!getTemplateRef(column.name)">{{row[column.name]}}</span>
+        <span class="md-body-1" *ngIf="!getTemplateRef(column.name)">{{column.format ? column.format(row[column.name]) : row[column.name]}}</span>
         <template
           *ngIf="getTemplateRef(column.name)"
           [ngTemplateOutlet]="getTemplateRef(column.name)"

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

@@ -25,7 +25,7 @@ export interface ITdDataTableColumn {
   label: string;
   tooltip?: string;
   numeric?: boolean;
-  format?: { (value: any): any };
+  format?: (value: any) => any;
 };
 
 export interface ITdDataTableSelectEvent {
@@ -104,22 +104,19 @@ export class TdDataTableComponent implements ControlValueAccessor, AfterContentI
       return this._columns;
     }
 
-    if (!this._data) {
-      return [];
-    }
-
-    this._columns = [];
-    // if columns is undefined, use key in [data] rows as name and label for column headers.
-    if (this._data.length > 0) {
+    if (this.hasData) {
+      this._columns = [];
+      // if columns is undefined, use key in [data] rows as name and label for column headers.
       let row: any = this._data[0];
       Object.keys(row).forEach((k: string) => {
         if (!this._columns.find((c: any) => c.name === k)) {
           this._columns.push({ name: k, label: k });
         }
       });
+      return this._columns;
+    } else {
+      return [];
     }
-
-    return this._columns;
   }
 
   /**
@@ -186,7 +183,7 @@ export class TdDataTableComponent implements ControlValueAccessor, AfterContentI
   }
 
   get hasData(): boolean {
-    return this._data.length > 0;
+    return this._data && this._data.length > 0;
   }
 
   /**
@@ -235,7 +232,6 @@ export class TdDataTableComponent implements ControlValueAccessor, AfterContentI
    */
   refresh(): void {
     this.clearModel();
-    this._preprocessData();
   }
 
   /**
@@ -336,14 +332,4 @@ export class TdDataTableComponent implements ControlValueAccessor, AfterContentI
   onChange = (_: any) => noop;
   onTouched = () => noop;
 
-  private _preprocessData(): void {
-    let data: Object[] = JSON.parse(JSON.stringify(this._data));
-    this._data = data.map((row: any) => {
-      this.columns.filter((c: any) => c.format).forEach((c: any) => {
-        row[c.name] = c.format(row[c.name]);
-      });
-      return row;
-    });
-  }
-
 }