stacktable.js

jQuery plugin for stacking tables on small screens

Created by John Polacek

Fork me on GitHub

The purpose of stacktable.js is to give you an easy way of converting wide tables to a format that will work better on small screens. It creates a copy of the table that is converted into a 2-column key/value format.

Download

Source files on github or download the zip.

How to Use

Call the plugin on a table.

Simple Example run ยป

$('#simple-example-table').stacktable();
Stuff Rate Amount Points Number Type Name
Something 3.375% $123.12 1.125 4,000 Potato Paul
Something Else 2.750% $345.23 5 180 Spaceship Skippy
Subgroup Header
Another Thing 3.375% $563.12 222 60 Gym Shoe George
Thing w/Less Stuff Harmonica Helga
Last Thing 4 Meaning of Life

Responsive

Use media queries to toggle the visibility of the original table and the stacktable (check out the stacktable.css example). You can pass in classes or an id to give to the stacktable. Adjust the size of your browser window to see it in action in the example below.

$('#responsive-example-table').stacktable({myClass:'your-class-name'});
Stuff Rate Amount Points Number Type Name
Something 3.375% $123.12 1.125 4,000 Potato Paul
Something Else 2.750% $345.23 5 180 Spaceship Skippy
Subgroup Header
Another Thing 3.375% $563.12 222 60 Gym Shoe George
Thing w/Less Stuff Harmonica Helga
Last Thing 4 Meaning of Life

StackColumns

An alternative responsive design creates a copy of the table into a 2 column key/value format that preserves the columns of the orginal table. We call is stackcolumns to contrast with the default stacktables that preserves the lines of the original table.

Time Day 1 Day 2 Day 3 Day 4
8 AM breakfast ------
10 AM work work breakfast
12AM lunch run
1 PM work
work
beach lunch
4 PM work
beach beach bike
night rest rest party rest