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.

The ng-table documentation site has no documentation on how to make that happen.

Any ideas?

Grindle

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
}

Drayman

Wow!...Thank you so much for uploading this..this is awesome! – Muth

the width of scrollbar is added to tbody width so the lines of thead and tr are not under each other – Bulldoze

After looking for around 20 solutions, found this working for my case. thanks alot @Drayman – Electrician

@SaeidAlidadi - have you found any solution for the width issue? other than using a script? – Manly

This solution almost worked for me today. The problem is that my page is resizable, so the max-height of 150px does not work well. What change is necessary here for the table to be resizable and yet still keep the frozen headers? – Homosexual

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

Tessy

The plnkr is no longer working due to an old link to ng-table.js. Try replacing it with this https://cdnjs.cloudflare.com/ajax/libs/ng-table/0.3.3/ng-table.min.js – Trass

It is not working with accordian above ng-table.. Please see plunker for the issue.. plnkr.co/edit/FGjU46cCMuhIdyacffHl?p=preview – Breadthways

I noticed that in the demo it's got a bug where when you reduce the width of the viewport so that horizontal scrolling is triggered on the table, when you then scroll down, the fixed headers appear to the right of the edge of the table. This would be a problem for horizontally wide tables. – Thirddegree

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

Contestant

This seems to stick the table headers to the top of the screen, but doesn't the case where the table is in a scrollable element: plnkr.co/edit/5wvfzNzWQfH4NNpgYdB9?p=preview – Chastitychasuble

Yes but that seems to be a limitation of the stickyTableHeaders jquery plugin. See issue and potential fix here: github.com/jmosbech/StickyTableHeaders/issues/1 – Contestant

It is not working with accordian above ng-table.. Please see plunker for the issue.. plnkr.co/edit/FGjU46cCMuhIdyacffHl?p=preview – Breadthways

seems like you will need to recalculate the header position while the animation is happening. My intention was only to have it work in a simple scenario... – Contestant

So is there any alternative to work both together.. If possible can you share the same plunker code? Thanks in advance – Breadthways