From 7387f2e490ac6b6eadd8bd2487f18d1154c65998 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel.odegaard@gmail.com>
Date: Wed, 4 Nov 2015 17:23:16 +0100
Subject: [PATCH] feat(tablepanel): fixed header, and pagination styling

---
 public/app/panels/table/module.html     | 16 +++++
 public/app/panels/table/module.ts       | 26 +++----
 public/app/panels/table/transformers.ts | 10 ++-
 public/less/panel_table.less            | 91 ++++++++++++++++---------
 4 files changed, 95 insertions(+), 48 deletions(-)

diff --git a/public/app/panels/table/module.html b/public/app/panels/table/module.html
index 75d428acf6a..1ceb7f52647 100644
--- a/public/app/panels/table/module.html
+++ b/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>
diff --git a/public/app/panels/table/module.ts b/public/app/panels/table/module.ts
index f4da7161f6f..deae2aaed89 100644
--- a/public/app/panels/table/module.ts
+++ b/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);
       }
 
diff --git a/public/app/panels/table/transformers.ts b/public/app/panels/table/transformers.ts
index 7617f03c413..41e43fd0815 100644
--- a/public/app/panels/table/transformers.ts
+++ b/public/app/panels/table/transformers.ts
@@ -79,6 +79,12 @@ transformers['timeseries_to_columns'] = {
   }
 };
 
+transformers['annotations'] = {
+  description: 'Annotations',
+};
+
+transformers['json'] = {
+  description: 'JSON',
+};
+
 export {transformers}
-
-
diff --git a/public/less/panel_table.less b/public/less/panel_table.less
index 272f5a5c3dc..1a0583f420f 100644
--- a/public/less/panel_table.less
+++ b/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;
-}