Skip to content
make table headers sticky
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.gitignore
LICENSE
README.md
bower.json
example.html
lrStickyHeader.js
package.json

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

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.