...
```
**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