Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

sticky-table-header

OliverJAsh110.0.6TypeScript support: included

Progressively enhance a table so the header sticks as you scroll vertically.

readme

Sticky Table Header

Progressively enhance a table so the header sticks as you scroll vertically.

Demo

This works by cloning the thead and positioning it according to the user's scroll position inside a wrapper element.

This library works under some assumptions:

  • cells with borders will have box-sizing: border-box
  • cellspacing will be set to 0
  • the input table element will have a thead and tbody

The table should be transformed so that:

  • thead should stick when scrolling vertically
  • thead should not stick when scrolling horizontally
  • thead cells should grow/shrink to column contents from tbody

Installation

# Distributed as a UMD module with the global name `initStickyTableHeader`
npm install sticky-table-header

Example

See code example.

Development

npm install
npm run compile
http-server -c-1 ./target
# Once the server is running, see /example.html

API

(tableEl: HTMLTableElement, height?: number) => { destroy: () => void, applyColumnWidths: () => void }