feat(tablepanel): fixed header, and pagination styling

public/app/panels/table/module.html

@@ -1,6 +1,22 @@
 <div class="table-panel-wrapper">
 	<grafana-panel>
 		<div class="table-panel-container">
+			<div class="table-panel-header-bg"></div>
+			<div class="table-panel-scroll">
+				<table class="table-panel-table">
+					<thead>
+						<tr>
+							<th ng-repeat="col in table.columns">
+								<div class="table-panel-table-header-inner">
+									{{col.text}}
+								</div>
+							</th>
+						</tr>
+					</thead>
+					<tbody>
+					</tbody>
+				</table>
+			</div>
 		</div>
 		<div class="table-panel-footer">
 		</div>

public/app/panels/table/module.ts

@@ -53,8 +53,8 @@ export class TablePanelCtrl {
     };
 
     $scope.render = function() {
-      $scope.tableModel = TableModel.transform($scope.dataRaw, $scope.panel);
-      panelHelper.broadcastRender($scope, $scope.tableModel);
+      $scope.table = TableModel.transform($scope.dataRaw, $scope.panel);
+      panelHelper.broadcastRender($scope, $scope.table);
     };
 
     panelSrv.init($scope);
@@ -93,8 +93,8 @@ export function tablePanelDirective() {
         headElem.appendTo(tableElem);
       }
 
-      function appendTableRows(tableElem) {
-        var tbodyElem = $('<tbody></tbody>');
+      function appendTableRows(tbodyElem) {
+        var rowElements = $(document.createDocumentFragment());
         var rowEnd = Math.min(panel.pageSize, data.rows.length);
         var rowStart = 0;
 
@@ -105,14 +105,14 @@ export function tablePanelDirective() {
             var colElem = $('<td>' + row[i] + '</td>');
             rowElem.append(colElem);
           }
-          tbodyElem.append(rowElem);
+          rowElements.append(rowElem);
         }
 
-        tableElem.append(tbodyElem);
+        tbodyElem.empty();
+        tbodyElem.append(rowElements);
       }
 
       function appendPaginationControls(footerElem) {
-        var paginationElem = $('<div class="pagination">');
         var paginationList = $('<ul></ul>');
 
         var pageCount = data.rows.length / panel.pageSize;
@@ -123,23 +123,19 @@ export function tablePanelDirective() {
 
         var nextLink = $('<li><a href="#">»</a></li>');
         paginationList.append(nextLink);
-        paginationElem.append(paginationList);
 
         footerElem.empty();
-        footerElem.append(paginationElem);
+        footerElem.append(paginationList);
       }
 
       function renderPanel() {
-        var rootElem = elem.find('.table-panel-container');
+        var rootElem = elem.find('.table-panel-scroll');
+        var tbodyElem = elem.find('tbody');
         var footerElem = elem.find('.table-panel-footer');
-        var tableElem = $('<table class="gf-table-panel"></table>');
 
-        appendTableHeader(tableElem);
-        appendTableRows(tableElem);
+        appendTableRows(tbodyElem);
 
         rootElem.css({'max-height': getTableHeight()});
-        rootElem.empty();
-        rootElem.append(tableElem);
         appendPaginationControls(footerElem);
       }
 

public/app/panels/table/transformers.ts

@@ -79,6 +79,12 @@ transformers['timeseries_to_columns'] = {
   }
 };
 
+transformers['annotations'] = {
+  description: 'Annotations',
+};
+
+transformers['json'] = {
+  description: 'JSON',
+};
+
 export {transformers}
-
-

public/less/panel_table.less

@@ -7,54 +7,83 @@
   }
 }
 
-.table-panel-container {
+.table-panel-scroll {
   overflow: auto;
 }
 
+.table-panel-container {
+  padding-top: 32px;
+  position: relative;
+}
+
 .table-panel-footer {
   text-align: center;
-  .pagination {
+  background: @grafanaListAccent;
+  font-size: 80%;
+  line-height: 2px;
+
+  ul {
+    position: relative;
     display: inline-block;
+    margin-left: 0;
+    margin-bottom: 0;
+  }
+  ul > li {
+    display: inline; // Remove list-style and block-level defaults
+  }
+  ul > li > a {
+    float: left; // Collapse white-space
+    padding: 4px 12px;
+    text-decoration: none;
+    border-left-width: 0;
   }
 }
 
-.gf-table-panel* {
-  box-sizing: border-box;
-}
-
-.gf-table-panel {
+.table-panel-table {
   width: 100%;
   border-collapse: collapse;
+
+  tr {
+    border-bottom: 2px solid @bodyBackground;
+  }
+
+  th {
+    padding: 0;
+
+    &:first-child {
+      .table-panel-table-header-inner {
+        padding-left: 15px;
+      }
+    }
+  }
+
+  td {
+    padding: 10px 0 10px 15px;
+
+    &:first-child {
+      padding-left: 15px;
+    }
+  }
 }
 
-.gf-table-panel tr {
-  border-bottom: 2px solid @bodyBackground;
-}
-
-.gf-table-panel th {
+.table-panel-header-bg {
   background: @grafanaListAccent;
+  border-top: 2px solid @bodyBackground;
+  border-bottom: 2px solid @bodyBackground;
+  height: 30px;
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+}
+
+.table-panel-table-header-inner {
   padding: 5px 0 5px 15px;
   text-align: left;
-  border-top: 2px solid @bodyBackground;
   color: @blue;
 
-  &:first-child {
-    padding-left: 15px;
-  }
+  position: absolute;
+  top: 0;
+  line-height: 23px;
 }
 
-.gf-table-panel td {
-  padding: 12px 0 12px 15px;
-
-  &:first-child {
-    padding-left: 15px;
-  }
-}
-
-.gf-table-panel .ellipsis {
-  display: block;
-  width: 100%;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}