AngularJS ng-table fixed headers - angularjs

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.
The ng-table documentation site has no documentation on how to make that happen.
Any ideas?

Answer 1

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
}

Answer 2

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

Answer 3

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