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
Teradata · Feb 22, 2017 · 3e24fcf · 3e24fcf
1 parent 3a082d7
commit 3e24fcf
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 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
@@ -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
@@ -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
@@ -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
@@ -27,6 +27,7 @@ export interface ITdDataTableColumn {
   numeric?: boolean;
   format?: (value: any) => any;
   nested?: boolean;
+  sortable?: boolean;
 };
 
 export interface ITdDataTableSelectEvent {