mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
feat(tablepanel): fixed header, and pagination styling
This commit is contained in:
parent
93b4f3fac8
commit
7387f2e490
@ -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>
|
||||
|
@ -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);
|
||||
}
|
||||
|
||||
|
@ -79,6 +79,12 @@ transformers['timeseries_to_columns'] = {
|
||||
}
|
||||
};
|
||||
|
||||
transformers['annotations'] = {
|
||||
description: 'Annotations',
|
||||
};
|
||||
|
||||
transformers['json'] = {
|
||||
description: 'JSON',
|
||||
};
|
||||
|
||||
export {transformers}
|
||||
|
||||
|
||||
|
@ -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;
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user