feat(tablepanel): added support for column sorting

public/app/panels/table/controller.ts

@@ -29,7 +29,8 @@ export class TablePanelCtrl {
       pageSize: 50,
       showHeader: true,
       columns: [],
-      fields: []
+      fields: [],
+      sort: {col: null, desc: true},
     };
 
     $scope.init = function() {
@@ -52,6 +53,21 @@ export class TablePanelCtrl {
       });
     };
 
+    $scope.toggleColumnSort = function(col, colIndex) {
+      if ($scope.panel.sort.col === colIndex) {
+        if ($scope.panel.sort.desc) {
+          $scope.panel.sort.desc = false;
+        } else {
+          $scope.panel.sort.col = null;
+        }
+      } else {
+        $scope.panel.sort.col = colIndex;
+        $scope.panel.sort.desc = true;
+      }
+
+      $scope.render();
+    };
+
     $scope.dataHandler = function(results) {
       $scope.dataRaw = results.data;
       $scope.render();
@@ -59,6 +75,7 @@ export class TablePanelCtrl {
 
     $scope.render = function() {
       $scope.table = TableModel.transform($scope.dataRaw, $scope.panel);
+      $scope.table.sort($scope.panel.sort);
       panelHelper.broadcastRender($scope, $scope.table, $scope.dataRaw);
     };
 

public/app/panels/table/module.html

@@ -7,8 +7,12 @@
 					<thead>
 						<tr>
 							<th ng-repeat="col in table.columns">
-								<div class="table-panel-table-header-inner">
+								<div class="table-panel-table-header-inner" ng-click="toggleColumnSort(col, $index)">
 									{{col.text}}
+									<span class="table-panel-table-header-controls" ng-if="col.sort">
+										<i class="fa fa-caret-down" ng-show="col.desc"></i>
+										<i class="fa fa-caret-up" ng-hide="col.desc"></i>
+									</span>
 								</div>
 							</th>
 						</tr>

public/app/panels/table/specs/table_model_specs.ts

@@ -0,0 +1,51 @@
+import {describe, beforeEach, it, sinon, expect} from 'test/lib/common';
+
+import {TableModel} from '../table_model';
+
+describe('when sorting table desc', () => {
+  var table;
+  var panel = {
+    sort: {col: 0, desc: true},
+  };
+
+  beforeEach(() => {
+    table = new TableModel();
+    table.columns = [{}, {}];
+    table.rows = [[100, 12], [105, 10], [103, 11]];
+    table.sort(panel.sort);
+  });
+
+  it('should sort by time', () => {
+    expect(table.rows[0][0]).to.be(105);
+    expect(table.rows[1][0]).to.be(103);
+    expect(table.rows[2][0]).to.be(100);
+  });
+
+  it ('should mark column being sorted', () => {
+    expect(table.columns[0].sort).to.be(true);
+    expect(table.columns[0].desc).to.be(true);
+  });
+
+});
+
+describe('when sorting table asc', () => {
+  var table;
+  var panel = {
+    sort: {col: 1, desc: false},
+  };
+
+  beforeEach(() => {
+    table = new TableModel();
+    table.columns = [{}, {}];
+    table.rows = [[100, 11], [105, 15], [103, 10]];
+    table.sort(panel.sort);
+  });
+
+  it('should sort by time', () => {
+    expect(table.rows[0][1]).to.be(10);
+    expect(table.rows[1][1]).to.be(11);
+    expect(table.rows[2][1]).to.be(15);
+  });
+
+});
+

public/app/panels/table/specs/transformers_specs.ts

@@ -19,7 +19,10 @@ describe('when transforming time series table', () => {
     ];
 
     describe('timeseries_to_rows', () => {
-      var panel = {transform: 'timeseries_to_rows'};
+      var panel = {
+        transform: 'timeseries_to_rows',
+        sort: {col: 0, desc: true},
+      };
 
       beforeEach(() => {
         table = TableModel.transform(timeSeries, panel);

public/app/panels/table/table_model.ts

@@ -9,6 +9,31 @@ export class TableModel {
     this.rows = [];
   }
 
+  sort(options) {
+    if (options.col === null || this.columns.length < options.col) {
+      return;
+    }
+
+    this.rows.sort(function(a, b) {
+      a = a[options.col];
+      b = b[options.col];
+      if (a < b) {
+        return -1;
+      }
+      if (a > b) {
+        return 1;
+      }
+      return 0;
+    });
+
+    this.columns[options.col].sort = true;
+
+    if (options.desc) {
+      this.rows.reverse();
+      this.columns[options.col].desc = true;
+    }
+  }
+
   static transform(data, panel) {
     var model = new TableModel();