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.
Source files on github or download the zip.
How to UseCall 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 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
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4