https://github.com/bcherny/angular-sticky-table-header
Sticky headers for tables
https://github.com/bcherny/angular-sticky-table-header
Last synced: 6 months ago
JSON representation
Sticky headers for tables
- Host: GitHub
- URL: https://github.com/bcherny/angular-sticky-table-header
- Owner: bcherny
- License: apache-2.0
- Created: 2014-04-30T19:13:58.000Z (over 11 years ago)
- Default Branch: master
- Last Pushed: 2015-04-16T03:45:51.000Z (over 10 years ago)
- Last Synced: 2025-04-12T19:40:01.246Z (6 months ago)
- Language: CoffeeScript
- Size: 687 KB
- Stars: 6
- Watchers: 17
- Forks: 7
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# angular-sticky-table-header
[![Build Status][build]](https://travis-ci.org/bcherny/angular-sticky-table-header) [![Coverage Status][coverage]](https://coveralls.io/r/bcherny/angular-sticky-table-header) ![][bower] [![npm]](https://www.npmjs.com/package/angular-sticky-table-header)
[build]: https://img.shields.io/travis/bcherny/angular-sticky-table-header.svg?branch=master&style=flat-square
[coverage]: http://img.shields.io/coveralls/bcherny/angular-sticky-table-header.svg?branch=master&style=flat-square
[bower]: https://img.shields.io/bower/v/angular-sticky-table-header.svg?style=flat-square
[npm]: https://img.shields.io/npm/v/angular-sticky-table-header.svg?style=flat-square
### dependencies
- angular 1.0.8
- jquery ^1.11
- lodash ^2.4
- watch-dom ^0.0
### usage
**html**
```html
...
...
...
```
**js**
```js
angular
.module('foo', ['turn/stickyTableHeader'])
.controller('fooCtrl', ['$scope', function ($scope) {
$scope.rowCollection = [
{ column1: 'foo', column2: 'bar', ... },
...
];
$scope.expression = false;
});
```
### how it works
1. create an in-dom clone of any ``s (this is to preserve spacing when the header is absolutely positioned, and to serve as source of truth when computing `` widths in steps 3 and 5)
2. hide the clone
3. set each ``'s width equal to the offsetWidth of each one's source ``
4. when the user scrolls, show the cloned ``s if the original ``s are off-screen
5. when the window is resized or a data collection changes, resize the ``s accordingly
6. when the original `` is modified, re-clone it
### events that trigger column resizing
- initial load
- window resize
- row collection change
- original clone modification
### running the demo
```shell
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