Sticky headers for tables
APACHE-2.0 License
html
...
<link rel="stylesheet" href="angular-sticky-table-header.css">
</head>
<body>
<div ng-controller="fooCtrl">
<div
sticky-table-header
rows="rowCollection"
disabled="expression"
>
<table>
...
</table>
</div>
</div>
...
<script src="angular-sticky-table-header.js"></script>
js
angular
.module('foo', ['turn/stickyTableHeader'])
.controller('fooCtrl', ['$scope', function ($scope) {
$scope.rowCollection = [
{ column1: 'foo', column2: 'bar', ... },
...
];
$scope.expression = false;
});
<th>
s (this is to preserve spacing when the header is absolutely positioned, and to serve as source of truth when computing <th>
widths in steps 3 and 5)<th>
's width equal to the offsetWidth of each one's source <th>
<th>
s if the original <th>
s are off-screen<th>
s accordingly<th>
is modified, re-clone itsass index.scss index.css
bower install
then pop open index.html in a browser.
bower install
npm install
grunt