FixedHeader

AngularJS Directive and CSS for creating scrollable tables with fixed headers.

Creating scrollable tables with fixed headers that do not scroll off the screen is tricky due to the way tables work in HTML. We use the the techniques described by Miriam Salzer here: Don’t Mess With Tables – Pure CSS Fixed-Header Left-Aligned Tables, and wrap them up in a reusable AngularJS directive.

Usage

Add dist/fixed-header.js and dist/fixed-header.css to your index.html.

Add oci.fixedHeader as a module dependency on your module:

angular.module('app', ['oci.fixedHeader']);

Add oci.fixed-header as an attribute to your table:

<div class="my-table">
  <table oci.fixed-header>
  <!-- table markup goes here ... -->
  </table>
</div>

Note the wrapper div with the class my-table. The oci.fixed-header directive adds wrapper divs around the table, so we need div.my-table for our custom CSS below:

Add custom css to control the height of the table and the height of the header row:

div.my-table div.fixed-table-container-inner {
    /* the maximum height of the table: */
    max-height: 150px;

    border: 1px solid #aaaaaa;
    width: 150px;
}

div.my-table div.th-inner {
    /* the height of the header row */
    line-height: 30px;
}

div.my-table div.fixed-table-container {
    /* the height of the header row - this needs to match line-height above */
   padding-top: 30px;
}

div.my-table tr.hidden-header .th-inner {
  padding-right: 5px;
}

Demo

oci.fixed-header demo

Running Tests

• Install global dependencies npm install -g karma phantomjs bower

• Install local dependencies npm install

• Install Bower dependencies bower install

• Run tests karma start

Authors

• Lance Finney finneyl@ociweb.com
• Steve Molitor molitors@ociweb.com