❤
npm
Sign UpSign In

angular-sticky-table-header

0.2.17 • Public • Published

angular-sticky-table-header

Build Status Coverage Status npm

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>

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 <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)
  2. hide the clone
  3. set each <th>'s width equal to the offsetWidth of each one's source <th>
  4. when the user scrolls, show the cloned <th>s if the original <th>s are off-screen
  5. when the window is resized or a data collection changes, resize the <th>s accordingly
  6. 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

Readme

Keywords

Package Sidebar

Install

npm i angular-sticky-table-header

Repository

github.com/bcherny/angular-sticky-table-header

Homepage

github.com/bcherny/angular-sticky-table-header

Weekly Downloads

2

Version

0.2.17

License

Apache2

Last publish

Collaborators

  • bcherny
Try on RunKit
Report malware