AngularJS ng-table fixed headers

Question

I\'m using ng-table to display some information. I would like to make the header and footer of the ng-table fixed and force the ng-table to draw scroll bars within the rows.

Answer 1

That is by far the most reliable solution that I found. And I've looked for hours before deciding to use a jQuery plugin. In the version of the plugin that I am using, we can stick the header to a scrollable container. Take a look at this plunker for a use case with ng-table:

http://plnkr.co/edit/ypBaDHIfaJWapXVs3jcU?p=preview

Javascript

app.directive('fixedTableHeaders', ['$timeout', function($timeout) {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
      $timeout(function() {
          var container = element.parentsUntil(attrs.fixedTableHeaders);
          element.stickyTableHeaders({ scrollableArea: container, "fixedOffset": 2 });
      }, 0);
    }
  }
}]);   

HTML

      

        

            
{{user.name}}
            
{{user.age}}
        
      

CSS

#scrollable-area {
    height: 150px;
    overflow-y: scroll; /* <-- here is what is important*/
}
table {
  width: 100%;
}
thead {
    background: #fff;
}