FixedHeader

AngularJS Directive and CSS for creating scrollable tables with fixed headers

Angular Core Dependency: 1.2.x

Module License: MIT

Added by: Sam Deering

GitHub

Repository

objectcomputing/fixedheader

Stats

Stars: 11

Watchers: 11

Forks: 2

Module Description

FixedHeader Build Status

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 [email protected]
  • Steve Molitor [email protected]

Module stats last updated: 2017-02-20 16:00:06

Disclaimer: Some data on this page may have been gathered from the authors GitHub respository. If you see any mistakes or outdated information please let us know. Thanks!