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}
-
-