javascript - Fixed header table in AngularJS - Stack Overflow

admin管理员组

文章数量:1203178

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.

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.

• javascript
• jquery
• angularjs
• angularjs-ng-repeat

Share Improve this question Follow edited May 11, 2015 at 15:43 scniro 17k88 gold badges6666 silver badges107107 bronze badges asked Jun 28, 2013 at 10:01 Arnab DasArnab Das 3,72888 gold badges3232 silver badges4343 bronze badges 7

• I don't understand, you want table headers fixed but also responsive. How is that possible? – Stewie Commented Jun 28, 2013 at 10:03
• @Stewie please see this: fixedheadertable.com – Arnab Das Commented Jun 28, 2013 at 10:06
• @Stewie you can also take the example of ng-grid. If you set the header fixed, it remains responsive. – Arnab Das Commented Jun 28, 2013 at 10:09
• 2 Keep in mind that IE7 isn't supported for AngularJS. – matsko Commented Sep 14, 2013 at 14:26
• 1 have you found any solution for this? – Parth Doshi Commented Mar 3, 2015 at 16:44

 |  Show 2 more comments

6 Answers 6

Sorted by: Reset to default 7

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

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

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.

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

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>

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!

本文标签： javascriptFixed header table in AngularJSStack Overflow