Skip to content
This repository has been archived by the owner on Aug 22, 2022. It is now read-only.

lorenzofox3/lrStickyHeader

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

24 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

About

make table headers sticky

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •