stacktable.js

jQuery plugin for stacking tables on small screens

Created by John Polacek

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