Angular-sticky-table-header NPM

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>

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