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.
Source files on github or download the zip.
Call the plugin on a table.
$('#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 |
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({class:'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 |