Angular Headers Fixed

Question

I am trying to make a table on my angular page with fixed headers and footers.

Solution 1:

I think you are missing to add table-height="". Here is the working demo. https://plnkr.co/edit/BdiQzYxVyPdFXU9TI44t?p=preview

/**
 * AngularJS fixed header scrollable table directive
 * @author Jason Watmore <jason@pointblankdevelopment.com.au> (http://jasonwatmore.com)
 * @version 1.2.0
 */
(function () {
    angular
        .module('anguFixedHeaderTable', [])
        .directive('fixedHeader', fixedHeader);

    fixedHeader.$inject = ['$timeout'];

    functionfixedHeader($timeout) {
        return {
            restrict: 'A',
            link: link
        };

        functionlink($scope, $elem, $attrs, $ctrl) {
            var elem = $elem[0];

            // wait for data to load and then transform the table
            $scope.$watch(tableDataLoaded, function(isTableDataLoaded) {
                if (isTableDataLoaded) {
                    transformTable();
                }
            });

            functiontableDataLoaded() {
                // first cell in the tbody exists when data is loaded but doesn't have a width// until after the table is transformedvar firstCell = elem.querySelector('tbody tr:first-child td:first-child');
                return firstCell && !firstCell.style.width;
            }

            functiontransformTable() {
                // reset display styles so column widths are correct when measured below
                angular.element(elem.querySelectorAll('thead, tbody, tfoot')).css('display', '');

                // wrap in $timeout to give table a chance to finish rendering
                $timeout(function () {
                    // set widths of columns
                    angular.forEach(elem.querySelectorAll('tr:first-child th'), function (thElem, i) {

                        var tdElems = elem.querySelector('tbody tr:first-child td:nth-child(' + (i + 1) + ')');
                        var tfElems = elem.querySelector('tfoot tr:first-child td:nth-child(' + (i + 1) + ')');

                        var columnWidth = tdElems ? tdElems.offsetWidth : thElem.offsetWidth;
                        if (tdElems) {
                            tdElems.style.width = columnWidth + 'px';
                        }
                        if (thElem) {
                            thElem.style.width = columnWidth + 'px';
                        }
                        if (tfElems) {
                            tfElems.style.width = columnWidth + 'px';
                        }
                    });

                    // set css styles on thead and tbody
                    angular.element(elem.querySelectorAll('thead, tfoot')).css('display', 'block');

                    angular.element(elem.querySelectorAll('tbody')).css({
                        'display': 'block',
                        'height': $attrs.tableHeight || 'inherit',
                        'overflow': 'auto'
                    });

                    // reduce width of last column by width of scrollbarvar tbody = elem.querySelector('tbody');
                    var scrollBarWidth = tbody.offsetWidth - tbody.clientWidth;
                    if (scrollBarWidth > 0) {
                        // for some reason trimming the width by 2px lines everything up better
                        scrollBarWidth -= 2;
                        var lastColumn = elem.querySelector('tbody tr:first-child td:last-child');
                        lastColumn.style.width = (lastColumn.offsetWidth - scrollBarWidth) + 'px';
                    }
                });
            }
        }
    }
})();

var app = angular.module('myApp', ['anguFixedHeaderTable'])
.controller('DemoController', function($scope) {
    $scope.products = [
      {
        displayName: 'Prod1',
        marketValue: '100',
        positions:'1'
      },
      {
        displayName: 'Prod1',
        marketValue: '100',
        positions:'1'
      },
      {
        displayName: 'Prod1',
        marketValue: '100',
        positions:'1'
      },
      {
        displayName: 'Prod1',
        marketValue: '100',
        positions:'1'
      },
      {
        displayName: 'Prod1',
        marketValue: '100',
        positions:'1'
      },
      {
        displayName: 'Prod1',
        marketValue: '100',
        positions:'1'
      },
      {
        displayName: 'Prod1',
        marketValue: '100',
        positions:'1'
      },
      {
        displayName: 'Prod1',
        marketValue: '100',
        positions:'1'
      },
      {
        displayName: 'Prod1',
        marketValue: '100',
        positions:'1'
      },
      {
        displayName: 'Prod1',
        marketValue: '100',
        positions:'1'
      },
      {
        displayName: 'Prod1',
        marketValue: '100',
        positions:'1'
      },
      {
        displayName: 'Prod1',
        marketValue: '100',
        positions:'1'
      },
      {
        displayName: 'Prod1',
        marketValue: '100',
        positions:'1'
      },
      {
        displayName: 'Prod1',
        marketValue: '100',
        positions:'1'
      },
    ];
});

<!DOCTYPE html><htmlng-app="myApp"><head><metacharset="utf-8" /><title>AngularJS Plunker</title><script>document.write('<base href="' + document.location + '" />');</script><linkhref="style.css" /><scriptdata-require="angular.js@1.4.x"src="https://code.angularjs.org/1.4.9/angular.js"data-semver="1.4.9"></script><scriptsrc="app.js"></script></head><bodyng-controller="DemoController"><tabletable-height="100px"class="table table-bordered table-striped table-hover"fixed-header><thead><tr><th>Name</th><th>Amount</th><th>Id</th></tr></thead><tbody><trclass="info"ng-repeat="item in products track by $index"><td><inputtype="checkbox"/><a>{{item.displayName}}</a></td><td>
              {{item.marketValue}}
          </td><td>
              {{item.positions}}
          </td></tr></tbody><tfoot><tr><td>Name</td><td>Amount</td><td>Id</td></tr></tfoot></table></body></html>

Html5 Manual

Angular Headers Fixed

Solution 1:

Post a Comment for "Angular Headers Fixed"