Angular Sticky Table Header Directive

Author: larsjueljensen
Publish Date:
Official Page: Go to website
License: MIT

This is an Angular directive that will make an html table’s header “sticky”.

If the height of the table exceeds that of the page, the table header will stay on top of the page if you scroll past the content above it. Furthermore, if you have content below the table and the last row slips under the header, the header will follow the last row when scrolling further.

Features:

  • Simple to use. Just add ng-sticky-header attribute to a <table> element.
  • Works with multi-level headers
  • Table can contain images
  • There can be content both above and below the table
  • Works with multiple tables
  • Can watch for angular $scope changes and resize accordingly

Preview:

Angular Sticky Table Header Directive