sticky-table
sticky-table is a library for sticky table headers written in TypeScript. With this library you can easily set sticky table headers on your website. It's responsive, accessible and super tiny.
Features
- Written in TypeScript, no dependencies needed
- Lightweight (gzip: ~1.7kb)
- No additional CSS needed
Install
npm
npm install @zhitkov/sticky-table
yarn
yarn add @zhitkov/sticky-table
script tag
<script src="https://unpkg.com/@zhitkov/sticky-table@latest/dist/bundle.umd.js"/>
Usage
<table class="js-table">
<thead>
<tr>
<th>...</th>
<th>...</th>
...
<th>...</th>
</tr>
</thead>
<tbody>
<tr>
<td>...</td>
<td>...</td>
...
<td>...</td>
</tr>
</tbody>
</table>
document.addEventListener('DOMContentLoaded', () => {
const tableElements = document.querySelectorAll('.js-table');
tableElements.forEach(tableElement => {
new window.StickyTable(tableElement);
})
});
Development
Clone this repository and run:
npm start
Demo
Check out the demo
Browser Compatibility
Library is using ECMAScript 5 features.
- IE 9+
- Chrome 23+
- Firefox 21+
- Safari 6+
- Opera 15+
License
MIT © Konstantin Zhitkov