GUI -- Scrollable table working!

Change-Id: I77eb1a620cfa64e44996e8eed09a6be9c9cda202

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