GUI -- Scrollable table working!
Change-Id: I77eb1a620cfa64e44996e8eed09a6be9c9cda202
diff --git a/web/gui/src/main/webapp/_bripc/practice-table.js b/web/gui/src/main/webapp/_bripc/practice-table.js
index c025671..b062674 100644
--- a/web/gui/src/main/webapp/_bripc/practice-table.js
+++ b/web/gui/src/main/webapp/_bripc/practice-table.js
@@ -22,21 +22,32 @@
'use strict';
function setColWidth($log, t) {
- var tHeaders, tdElement;
+ var tHeaders, tdElement, colWidth;
- // for each th, set its width to td's width
- // do this by looping through each td in the first row
- // and finding its column width
tHeaders = t.selectAll('th');
- //loop through selectAll array
- tHeaders.forEach(function(thElement){
- tdElement = t.filter('nth-child()');
- $log.log(thElement);
+
+ // select each td in the first row and set the header's width to the
+ // corresponding td's width, if td is larger than header's width
+ tHeaders.each(function(thElement, index){
+ thElement = d3.select(this);
+
+ tdElement = t.select('td:nth-of-type(' + (index + 1) + ')');
+ colWidth = tdElement.style('width');
+
+ thElement.style('width', colWidth);
+ tdElement.style('width', colWidth);
+ //thElement.style('color', 'blue');
+ //tdElement.style('color', 'red');
+
});
}
function setCSS(thead, tbody) {
-
+ thead.style('display', 'block');
+ tbody.style({'display': 'block',
+ 'height': '100px',
+ 'overflow': 'auto'
+ });
}
function trimTable(tbody) {
@@ -74,56 +85,11 @@
$timeout(function() {
$log.log('timeout is over');
fixTable($log, table, thead, tbody);
- }, 200);
+ });
}
});
$log.log('fixedHeader directive has been created');
}
};
}]);
-}());
-
-$scope.$watch(function () { return $elem.find("tbody").is(':visible') },
- function (newValue, oldValue) {
- if (newValue === true) {
- // reset display styles so column widths are correct when measured below
- $elem.find('thead, tbody, tfoot').css('display', '');
-
- // wrap in $timeout to give table a chance to finish rendering
- $timeout(function () {
- // set widths of columns
- $elem.find('th').each(function (i, thElem) {
- thElem = $(thElem);
- var tdElems = $elem.find('tbody tr:first td:nth-child(' + (i + 1) + ')');
- var tfElems = $elem.find('tfoot tr:first td:nth-child(' + (i + 1) + ')');
-
- var columnWidth = tdElems.width();
- thElem.width(columnWidth);
- tdElems.width(columnWidth);
- tfElems.width(columnWidth);
- });
-
- // set css styles on thead and tbody
- $elem.find('thead, tfoot').css({
- 'display': 'block',
- });
-
- $elem.find('tbody').css({
- 'display': 'block',
- 'height': $scope.tableHeight || '400px',
- 'overflow': 'auto'
- });
-
- // reduce width of last column by width of scrollbar
- var scrollBarWidth = $elem.find('thead').width() - $elem.find('tbody')[0].clientWidth;
- if (scrollBarWidth > 0) {
- // for some reason trimming the width by 2px lines everything up better
- scrollBarWidth -= 2;
- $elem.find('tbody tr:first td:last-child').each(function (i, elem) {
- $(elem).width($(elem).width() - scrollBarWidth);
- });
- }
- });
- }
- });
-}
\ No newline at end of file
+}());
\ No newline at end of file