make table headers sticky
HTML JavaScript
Latest commit ca1bae4 Dec 7, 2016 @lorenzofox3 committed on GitHub Merge pull request #17 from bbodenmiller/patch-1
link to stStickyHeader

README.md

lrStickyHeader

make table headers sticky, example for React CRM

stStickeyHeader

live demo

  • (almost)no css to add
  • no dependency
  • does not add any other element to the markup
  • ~ 100 loc

install

bower install lr-sticky-header

npm install lr-sticky-header

dependencies

None

usage

var tableElement = document.getElementById('table');

var stickyTable = lrStickyHeader(tableElement);

var parentElement = document.getElementById('scrollPanel');
var stickyTable2 = lrStickyHeader(tableElement, {parent: parentElement});

style

You'll need your table element and its children to have the property box-sizing set to border-box (it is the default of many css framework such bootstrap

when the header is sticked the class name lr-sticky-header is added to the thead element if you want to add some more style

api

  • setWidth() : if you want to call manually the resize of the column (within a resize event handler for example)
  • clean() ~: to detach the scroll event handler from the window

example of a directive with smart-table