Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 

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

About

make table headers sticky

Resources

License

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •