AngularJS ng-table fixed headers

this CSS-only solution worked for me. Just add the class table-scroll to the table element and the following CSS:

.table-scroll thead {    display: table;    width: 100%;    table-layout: fixed;}.table-scroll tbody {    max-height: 150px;    overflow-y: auto;    display: block;    width: 100%;    table-layout: fixed;}.table-scroll tr {    display: table;    table-layout: fixed;    width: 100%;}.table-scroll td {    height: 47px; // needed in order to keep rows from collapsing}

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

<div id="scrollable-area">      <table ng-table="tableParams" fixed-table-headers="scrollable-area">        <tr ng-repeat="user in $data">            <td data-title="'Name'">{{user.name}}</td>            <td data-title="'Age'">{{user.age}}</td>        </tr>      </table></div>

CSS

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

I don't know about the footer but I had a similar requirement for the headers.

This was requested before @ Github: https://github.com/esvit/ng-table/issues/41

I made my own implementation using a jquery plugin (https://github.com/jmosbech/StickyTableHeaders).

There is a plunkr here: http://plnkr.co/edit/KyilXo?p=preview

Basically we just call the plugin in the directive data-fixed-table-headerswhen the data has been rendered.

angular.module('main').directive('fixedTableHeaders', ['$timeout', fixedTableHeaders]);    function fixedTableHeaders($timeout) {        return {            restrict: 'A',            link: link        };        function link(scope, element, attrs) {            $timeout(function () {              element.stickyTableHeaders();                    }, 0);        }    }