From 3e24fcfd505395da2f18db2fe2dd96f5cc6e8b87 Mon Sep 17 00:00:00 2001
From: Saurabh Gupta <saurabh.1e1@gmail.com>
Date: Thu, 23 Feb 2017 01:20:12 +0530
Subject: [PATCH] feature(data-table): configurable sortable column with
 td-data-table. (closes #347) (#350)

* Configurable sortable column with td-data-table

* global sortable added back. Sortable can be set by column or globally.

* active property of td data table updated to support specific column
---
 .../components/data-table/data-table.component.html  | 12 ++++++------
 .../components/data-table/data-table.component.ts    |  6 +++---
 .../core/data-table/data-table.component.html        |  6 +++---
 src/platform/core/data-table/data-table.component.ts |  1 +
 4 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/src/app/components/components/data-table/data-table.component.html b/src/app/components/components/data-table/data-table.component.html
index 02fee03357..51afe73bfc 100644
--- a/src/app/components/components/data-table/data-table.component.html
+++ b/src/app/components/components/data-table/data-table.component.html
@@ -15,7 +15,7 @@ <h4 class="md-subhead">with custom headings, columns, and inline editing</h4>
               <md-icon>comment</md-icon>
               <span>Comments</span>
             </th>
-            <th td-data-table-column 
+            <th td-data-table-column
                 *ngFor="let column of columns"
                 [numeric]="column.numeric">
               {{column.label}}
@@ -41,7 +41,7 @@ <h4 class="md-subhead">with custom headings, columns, and inline editing</h4>
                 <md-icon>comment</md-icon>
                 <span>Comments</span>
               </th>
-              <th td-data-table-column 
+              <th td-data-table-column
                   *ngFor="let column of columns"
                   [numeric]="column.numeric">
                 { {column.label}}
@@ -138,10 +138,10 @@ <h4 class="md-subhead">with nested data, formatting, and templates</h4>
             })
             export class Demo {
               columns: ITdDataTableColumn[] = [
-                { name: 'food.name',  label: 'Dessert (100g serving)' },
+                { name: 'food.name',  label: 'Dessert (100g serving)', sortable:true },
                 { name: 'food.type', label: 'Type' },
-                { name: 'calories', label: 'Calories', numeric: true, format: NUMBER_FORMAT },
-                { name: 'fat', label: 'Fat (g)', numeric: true, format: DECIMAL_FORMAT },
+                { name: 'calories', label: 'Calories', numeric: true, format: NUMBER_FORMAT, sortable:true },
+                { name: 'fat', label: 'Fat (g)', numeric: true, format: DECIMAL_FORMAT, sortable:true },
                 { name: 'carbs', label: 'Carbs (g)', numeric: true, format: NUMBER_FORMAT },
                 { name: 'protein', label: 'Protein (g)', numeric: true, format: DECIMAL_FORMAT },
                 { name: 'sodium', label: 'Sodium (mg)', numeric: true, format: NUMBER_FORMAT },
@@ -392,7 +392,7 @@ <h3>Example:</h3>
             { sku: '1421-0', item: 'Prime Rib', price: 41.15 },
           ];
           private columns: ITdDataTableColumn[] = [
-            { name: 'sku', label: 'SKU #', tooltip: 'Stock Keeping Unit' },
+            { name: 'sku', label: 'SKU #', tooltip: 'Stock Keeping Unit', sortable: true },
             { name: 'item', label: 'Item name' },
             { name: 'price', label 'Price (US$)', numeric: true, format: v => v.toFixed(2) },
           ];
diff --git a/src/app/components/components/data-table/data-table.component.ts b/src/app/components/components/data-table/data-table.component.ts
index d5e6dd0aff..c07b2e9ff9 100644
--- a/src/app/components/components/data-table/data-table.component.ts
+++ b/src/app/components/components/data-table/data-table.component.ts
@@ -120,10 +120,10 @@ export class DataTableDemoComponent implements OnInit {
   }];
 
   columns: ITdDataTableColumn[] = [
-    { name: 'name',  label: 'Dessert (100g serving)' },
+    { name: 'name',  label: 'Dessert (100g serving)', sortable: true },
     { name: 'type', label: 'Type' },
-    { name: 'calories', label: 'Calories', numeric: true, format: NUMBER_FORMAT },
-    { name: 'fat', label: 'Fat (g)', numeric: true, format: DECIMAL_FORMAT },
+    { name: 'calories', label: 'Calories', numeric: true, format: NUMBER_FORMAT, sortable: true },
+    { name: 'fat', label: 'Fat (g)', numeric: true, format: DECIMAL_FORMAT, sortable: true },
     { name: 'carbs', label: 'Carbs (g)', numeric: true, format: NUMBER_FORMAT },
     { name: 'protein', label: 'Protein (g)', numeric: true, format: DECIMAL_FORMAT },
     { name: 'sodium', label: 'Sodium (mg)', numeric: true, format: NUMBER_FORMAT },
diff --git a/src/platform/core/data-table/data-table.component.html b/src/platform/core/data-table/data-table.component.html
index 6fe29e886f..baf9157c26 100644
--- a/src/platform/core/data-table/data-table.component.html
+++ b/src/platform/core/data-table/data-table.component.html
@@ -9,12 +9,12 @@
         (click)="selectAll(!checkBoxAll.checked)">
       </md-checkbox>
     </th>
-    <th td-data-table-column 
+    <th td-data-table-column
         *ngFor="let column of columns"
         [name]="column.name"
         [numeric]="column.numeric"
-        [active]="_sortable && column === _sortBy"
-        [sortable]="_sortable"
+        [active]="(column.sortable || _sortable) && column === _sortBy"
+        [sortable]="column.sortable ||  _sortable"
         (mouseleave)="column.tooltip && tooltipRefresh()"
         (mouseenter)="column.tooltip && tooltipRefresh()"
         [sortOrder]="_sortOrder"
diff --git a/src/platform/core/data-table/data-table.component.ts b/src/platform/core/data-table/data-table.component.ts
index e8268891cc..f6d59dc01e 100644
--- a/src/platform/core/data-table/data-table.component.ts
+++ b/src/platform/core/data-table/data-table.component.ts
@@ -27,6 +27,7 @@ export interface ITdDataTableColumn {
   numeric?: boolean;
   format?: (value: any) => any;
   nested?: boolean;
+  sortable?: boolean;
 };
 
 export interface ITdDataTableSelectEvent {