angular-sticky-table-header

Sticky headers for tables

0.1.2
Source
npm

Version published: 11 years ago

Weekly downloads: 4; decreased by-69.23%

Maintainers: 1

Weekly downloads

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">
		<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', ... },
		...
	];

});

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

more unit tests
end to end tests

Keywords

FAQs

What is angular-sticky-table-header?

Is angular-sticky-table-header popular?

Is angular-sticky-table-header well maintained?

Package last updated on 22 May 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