AngularJS ng-table fixed headers

前端 未结 3 1252
伪装坚强ぢ
伪装坚强ぢ 2021-01-31 04:46

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.

3条回答
  •  有刺的猬
    2021-01-31 05:28

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

提交回复
热议问题