feat(tablepanel): worked on issues and improving defaults

public/app/panels/table/controller.ts

@@ -28,11 +28,26 @@ export class TablePanelCtrl {
       transform: 'timeseries_to_rows',
       pageSize: 50,
       showHeader: true,
-      columns: [],
+      columns: [
+        {
+          type: 'date',
+          pattern: 'Time',
+          dateFormat: 'YYYY-MM-DD HH:mm:ss',
+        },
+        {
+          unit: 'short',
+          type: 'number',
+          decimals: 2,
+          colors: ["rgba(245, 54, 54, 0.9)", "rgba(237, 129, 40, 0.89)", "rgba(50, 172, 45, 0.97)"],
+          colorMode: null,
+          pattern: '/.*/',
+          thresholds: [],
+        }
+      ],
       fields: [],
       scroll: true,
       fontSize: '100%',
-      sort: {col: null, desc: true},
+      sort: {col: 0, desc: true},
     };
 
     $scope.init = function() {

public/app/panels/table/editor.html

@@ -11,7 +11,7 @@
 						<select class="input-large tight-form-input"
 							ng-model="panel.transform"
 							ng-options="k as v.description for (k, v) in transformers"
-							ng-change="render()"></select>
+							ng-change="transformChanged()"></select>
 					</li>
 				</ul>
 				<div class="clearfix"></div>
@@ -131,9 +131,6 @@
 						<spectrum-picker ng-model="column.colors[1]" ng-change="render()" ></spectrum-picker>
 						<spectrum-picker ng-model="column.colors[2]" ng-change="render()" ></spectrum-picker>
 					</li>
-					<li class="tight-form-item last">
-						<a class="pointer" ng-click="invertColorOrder()">invert order</a>
-					</li>
 				</ul>
 				<div class="clearfix"></div>
 			</div>

public/app/panels/table/editor.ts

@@ -73,6 +73,10 @@ export function tablePanelEditor() {
         scope.render();
       };
 
+      scope.transformChanged = function() {
+        scope.render();
+      };
+
       scope.removeJsonField = function(field) {
         scope.panel.fields = _.without(scope.panel.fields, field);
         scope.render();

public/app/panels/table/module.ts

@@ -55,8 +55,8 @@ export function tablePanel() {
 
         var paginationList = $('<ul></ul>');
 
-        var prevLink = $('<li><a class="table-panel-page-link pointer">«</a></li>');
-        paginationList.append(prevLink);
+        // var prevLink = $('<li><a class="table-panel-page-link pointer">«</a></li>');
+        // paginationList.append(prevLink);
 
         for (var i = startPage; i < endPage; i++) {
           var activeClass = i === scope.pageIndex ? 'active' : '';
@@ -64,8 +64,8 @@ export function tablePanel() {
           paginationList.append(pageLinkElem);
         }
 
-        var nextLink = $('<li><a href="#">»</a></li>');
-        paginationList.append(nextLink);
+        // var nextLink = $('<li><a href="#">»</a></li>');
+        // paginationList.append(nextLink);
 
         footerElem.append(paginationList);
       }

public/app/panels/table/renderer.ts

@@ -95,7 +95,7 @@ export class TableRenderer {
     return this.formaters[colIndex](value);
   }
 
-  renderCell(columnIndex, value) {
+  renderCell(columnIndex, value, addWidthHack = false) {
     var value = this.formatColumnValue(columnIndex, value);
     var style = '';
     if (this.colorState.cell) {
@@ -107,7 +107,15 @@ export class TableRenderer {
       this.colorState.value = null;
     }
 
-    return '<td' + style + '>' + value + '</td>';
+    // because of the fixed table headers css only solution
+    // there is an issue if header cell is wider the cell
+    // this hack adds header content to cell (not visible)
+    var widthHack = '';
+    if (addWidthHack) {
+      widthHack = '<div class="table-panel-width-hack">' + this.table.columns[columnIndex].text + '<div>';
+    }
+
+    return '<td' + style + '>' + value + widthHack + '</td>';
   }
 
   render(page) {
@@ -117,11 +125,18 @@ export class TableRenderer {
 
     for (var y = startPos; y < endPos; y++) {
       let row = this.table.rows[y];
-      html += '<tr>';
+      let cellHtml = '';
+      let rowStyle = '';
       for (var i = 0; i < this.table.columns.length; i++) {
-        html += this.renderCell(i, row[i]);
+        cellHtml += this.renderCell(i, row[i], y === 0);
       }
-      html += '</tr>';
+
+      if (this.colorState.row) {
+        rowStyle = ' style="background-color:' + this.colorState.row + ';color: white"';
+        this.colorState.row = null;
+      }
+
+      html += '<tr ' + rowStyle + '>' + cellHtml + '</tr>';
     }
 
     return html;

public/app/panels/table/table_model.ts

@@ -10,7 +10,7 @@ export class TableModel {
   }
 
   sort(options) {
-    if (options.col === null || this.columns.length < options.col) {
+    if (options.col === null || this.columns.length <= options.col) {
       return;
     }
 

public/less/panel_table.less

@@ -12,7 +12,7 @@
 }
 
 .table-panel-container {
-  padding-top: 2em;
+  padding-top: 2.2em;
   position: relative;
 }
 
@@ -94,3 +94,8 @@
   top: 0;
 }
 
+.table-panel-width-hack {
+  visibility: hidden;
+  height: 0px;
+  line-height: 0px;
+}