FixedHeader

AngularJS Directive and CSS for creating scrollable tables with fixed headers
Homepage:
0 people use it
Submitted by: 6683747 LMFinney

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:

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

Note the wrapper div with the class demo-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:

Demo

oci.fixed-header demo

Authors

comments powered by Disqus
This page was last updated about 3 years ago.