angular-sticky-table-header

Sticky headers for tables

0.2.12
Source
npm

Version published: 10 years ago

Maintainers: 1

Created: 11 years ago

Source

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

events that trigger column resizing

initial load
window resize
row collection change
original clone modification

running the demo

sass index.scss index.css
bower install

then pop open index.html in a browser.

running the tests

bower install
npm install
grunt

todo

end to end tests

Keywords

FAQs

What is angular-sticky-table-header?

Is angular-sticky-table-header well maintained?

Package last updated on 30 Sep 2014

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install