Fixed header table in AngularJS

Question

I'm stuck on a problem involving a fixed header table. I'm using AngularJS & Bootstrap to build a web application. I can't use ng-grid as it doesn't support IE7. So, I'm populating the table rows by ng-repeat. The application is responsive. So, I can't give fixed width to the cells/headers. Is there any simple way to have the table headers fixed?

I've put up a Plunker at Fixed header table with AngularJS

Thanks in advance.

Answer 1

I created a directive for this recently, you can install it using bower:

bower install angu-fixed-header-table

For more details and a working example you can see my blog post at http://pointblankdevelopment.com.au/blog/angularjs-fixed-header-scrollable-table-directive

Answer 2

I used Kumar's suggestion and created two tables. One contains the thead, and the other contains both the thead and the tbody.

<div ng-style="{'margin-right': scrollBarWidth}">
    <table>
       <thead>
         <tr>
            <th width="{{tableSizes[0].width}}">Col0</th>
            <th width="{{tableSizes[1].width}}">Col1</th>
            <th width="{{tableSizes[2].width}}">Col2</th>
         </tr>
       </thead>
    </table>
 </div> 
 <div class="fixedHeadBody">
    <table ng-style="{'margin-top': -rowSize.height}">
       <thead>
         <tr el-size="rowSize">
           <th el-size="{{tableSizes[0].width}}">Col0</th>
           <th el-size="{{tableSizes[1].width}}">Col1</th>
           <th el-size="{{tableSizes[2].width}}">Col2</th>
         </tr>
       </thead>
       <tbody>
         <!-- data goes here -->
       </tbody>
    </table>
 </div>

Within the thead of the second one, I added a directive (see below) that watches the width and the height of each column. The output of these columns are used to set the width of the first thead (angular binding). I also added the same directive to the thead tr of the second table, and use the height value to hide the scrollable thead of the second table. That way, I only show the first thead which is fixed.

One more thing I had to sort out was the scrollBar. The scroll bar takes space and that misalign the columns between the first and the second table. To fix this, I added a margin-right to the top table that is equal to the width of scroll bar (width difference between the div containing the table and the table). The scrollbar width varies between browsers and the last function works for any browser.

app.directive('elSize', ['$parse', '$timeout', function ($parse, $timeout) {
    return function(scope, elem, attrs) {
        var fn = $parse(attrs.elSize);

        scope.$watch(function () {
            return { width: elem.innerWidth(), height: elem.innerHeight() };
        },
        function (size) {
            fn.assign(scope, size);
        }, true);
    }
}])

Within the controller, you can set the scrollBarWidth using the function below. You can call $scope.setScrollBarWidth() from anywhere once the table has been rendered.

    $scope.scrollBarWidth = "5px";
    $scope.setScrollBarWidth = function () {
        $timeout(function () {
            var divWidth = $(".fixedHeadBody").width();
            var tableWidth = $(".fixedHeadBody table").width();
            var diff = divWidth - tableWidth;
            if (diff > 0) $scope.scrollBarWidth = diff + "px";
        }, 300);
    }

Answer 3

A co-worker and I have just released a new GitHub project that supplies an Angular directive that you can use to decorate your table with fixed headers: https://github.com/objectcomputing/FixedHeader

This implementation isn't as fully-featured as some other implementations, but if your need is simply to add fixed tables, we think this might be a good option.

Answer 4

Well, did it the dirty way using $watch and jQuery.

Just duplicate your table header and make it sticky. It's not perfect but it serves the purpose.

Here's the fiddle: http://jsfiddle.net/jchnxu/w1n1fp97/7/

// watch the width of table headers
        scope.$watch(function() {
          return {
            width: $(th).innerWidth(),
            height: $(th).innerHeight()
          };
        }, function(size) {
          console.log(size);
          $($stickyThs[i]).attr('width', size.width);
        }, true);

// also watch the table width
      scope.$watch(function() {
        return $bodyTable.innerWidth();
      }, function(width) {
        $headerTable.css('width', width + 'px');
      }); 

Answer 5

You can use the excellent ag-Grid library.

agGrid.initialiseAgGridWithAngular1(angular); // https://www.ag-grid.com/best-angularjs-data-grid/index.php
angular.module('myApp', ['agGrid'])

Then in your controller define a gridOptions (or other variable name) like this one:

var nbCols = 10,
    nbLines = 300,
    list = [],
    cols = [],
    columnDefs = [],
    i, j;

for (i = 0 ; i < nbCols ; i++) {
    var fieldName = 'col' + i;
    cols.push(fieldName);
    columnDefs.push({
        headerName: 'Col' + i,
        field: fieldName,
        editable: true
    });
}
for (i = 0 ; i < nbLines ; i++) {
    var elem = {};
    for (j = 0 ; j < nbCols ; j++) {
        elem[cols[j]] = 'content '+i+'-'+j;
    }
    list.push(elem);
}
$scope.list = list;
$scope.cols = cols;

$scope.gridOptions = {
    columnDefs: columnDefs,
    rowData: list,
    singleClickEdit: true
};

And finally define your table like this in your HTML:

<div ag-grid="gridOptions" class="ag-fresh" style="height: 300px;"></div>

Answer 6

You better to keep the header part outside the table. Take two tables:

• one for header and
• another one for table data. (put the scroller in table data part only.)

Good luck!