Stacking Tables On Small Screens with jQuery - stacktable

Stacking Tables On Small Screens with jQuery - stacktable
File Size: 46.4 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

stacktable.js is a jQuery Plugin for equalizing the height or width of elements. With this plugin, the wide tables will be converted to a format that works better on small screens.

How to use it:

1. Markup

<a id="run" href="#">run »</a>
<table id="simple-example-table" cellspacing="0">
<tbody>
<tr align="left">
<th width="30%">Stuff</th>
<th width="12%">Rate</th>
<th width="12%">Amount</th>
<th width="12%">Points</th>
<th width="12%">Number</th>
<th width="18%">Type</th>
<th width="12%">Name</th>
</tr>
<tr>
<td>Something</td>
<td>3.375%</td>
<td>$123.12</td>
<td>1.125</td>
<td>4,000</td>
<td>Potato</td>
<td>Paul</td>
</tr>
<tr>
<td>Something Else</td>
<td>2.750%</td>
<td>$345.23</td>
<td>5</td>
<td>180</td>
<td>Spaceship</td>
<td>Skippy</td>
</tr>
<tr>
<td colspan="7" class="sub">Subgroup Header</td>
</tr>
<tr>
<td>Another Thing</td>
<td>3.375%</td>
<td>$563.12</td>
<td>222</td>
<td>60</td>
<td>Gym Shoe</td>
<td>George</td>
</tr>
<tr>
<td>Thing w/Less Stuff</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>Harmonica</td>
<td>Helga</td>
</tr>
<tr>
<td>Last Thing</td>
<td></td>
<td></td>
<td></td>
<td>4</td>
<td>Meaning of Life</td>
<td></td>
</tr>
</tbody>
</table>

2. Include jQuery library and stacktable.js

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> 
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.8.1.min.js"><\/script>')</script> </script> 
<script src="stacktable.js" type="text/javascript"></script> 

3. Call the plugin

<script>
  $(document).on('click', '#run', function(e) {
    e.preventDefault();
    $('#simple-example-table').stacktable({hideOriginal:true});
    $(this).replaceWith('<span>ran</span>');
  });
</script> 

Change logs:

2016-06-12

  • bugfix

2015-11-19

  • deprecate unnecessary hideOriginal setting
  • v1.0.1

2015-11-02

2015-01-17

  • add card table function

2014-11-01

  • Added support for headIndex, in order to choose what cell use as header.
  • Some variable name changes (the two "index" became "rowIndex" and "cellIndex", in order to avoid ambiguities).

2013-12-18

  • fixed documentation on index.html; class variable should be myClass
  • remove unused var.

This awesome jQuery plugin is developed by johnpolacek. For more Advanced Usages, please check the demo page or visit the official website.