stacktable.js

jQuery plugin for stacking tables on small screens

Made in Chicago by John Polacek

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.

2021 Update
9 years later, I recommend using all or mostly pure CSS for this kind of thing. See this for example.

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

Options

myClass: Space separated classes to add to the table.
headIndex: Use this to specify the row index of the header, in case it isn’t the first.

Card Table

Card table works similarly to stack table except it breaks each row into its own table. The row tables function like cards. Any content left in tfoot is also broken into its own card, this allows for things like view all links or pagination to be easily used.

$('#responsive-card-table-example').cardtable();
Name Phone Info Actions
Test 555-555-5555 I am a test Edit
Greg 555-555-5555 This is an example Edit
John 444-444-4444 Tables are cool Edit
View all

StackColumns

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

$('#responsive-stackcolumns-example').stackcolumns();
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