Stickytable

Stickytable is a javascript plugin that makes your table headers sticky, allowing users to scroll through big sets of table data on any size screen.

See a Demo

Features:

• Written in pure javascript, no jQuery or framework needed
• Completely responsive and plays nice with touch devices
• Make both the row and column headers sticky
• Have any number of rows and columns in your table
• Use your own CSS to style your tables
• It works on tables made of other elements, like <div>s

Install

Download

• Minified javascript
• Source code (zip)

Package managers

NPM | npm install stickytable

Usage

Make a table

<table>
	...	
</table>

Style it how you like. Don't be scared of using widths/heights/paddings etc...

...
	
table {
	cellpadding: 0;
	callspacing: 0;
}

th {
	min-width: 200px;
}
	
td {
	padding: 15px;
	border: 1px solid #DDD;
}

...

Import the module with <script>

<script src="Stickytable.min.js"/><script>

or commonjs

var Stickytable = require("stickytable");	

Instantiate a Stickytable object by passing the table element and options

var el = document.querySelector("table");
var stickytable = new Stickytable(el, {
	// options
});

Options

Option	Type	Default	Description
width	string	'100%'	Sets the the css width property of the scrollable container. Set to 'auto' to allow the container width to match the width of the table.
height	string	'auto'	Sets the the css height property of the scrollable container. Set to auto to allow the container height to match the height of the table.
rowSelector	string	'tr'	A selector to tell Stickytable which elements are the rows in your table. Change this value if your table is made of elements other than table/tr/td, like divs.

Methods

Stickytable(element, options)

Instantiates Sticky table.

###Arguments:

element DOM element for the table

options Object that specifies options

###Returns: New Stickytable instance

--

stickytable.destroy()

Destroys the sticky table and restores the original table into the DOM.

###Arguments: None ###Returns: Undefined

--

stickytable.refresh()

Recalculates the sticky element dimensions and redraws the sticky table. ###Arguments: None ###Returns: Undefined

License

MIT