angular-sticky-table-header
v0.2.17
Published
Sticky headers for tables
Downloads
28
Maintainers
bchernyReadme
angular-sticky-table-header
dependencies
- angular 1.0.8
- jquery ^1.11
- lodash ^2.4
- watch-dom ^0.0
usage
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;
});how it works
- create an in-dom clone of any
<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) - hide the clone
- set each
<th>'s width equal to the offsetWidth of each one's source<th> - when the user scrolls, show the cloned
<th>s if the original<th>s are off-screen - when the window is resized or a data collection changes, resize the
<th>s accordingly - when the original
<th>is modified, re-clone it
events that trigger column resizing
- initial load
- window resize
- row collection change
- original clone modification
running the demo
sass index.scss index.css
bower installthen pop open index.html in a browser.
running the tests
bower install
npm install
grunttodo
- end to end tests