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

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-headers when 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);
        }
    }