 |
| StackTable.js |
StackTable.js is a jQuery Plugin to equalize the height or width of elements. With this plugin, arrange table width styles will be resized to a format that works better on small screens.
How to use it:
1. The Markup structure.
<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 the stacktable.js plugin on the page.
<link rel="stylesheet" href="/path/to/stacktable.css" /> <script src="/path/to/cdn/jquery.min.js"></script> <script src="/path/to/stacktable.js"></script>
3. Call the plugin on the HTML table and done.
$(document).on('click', '#run', function(e) {
e.preventDefault();
$('#simple-example-table').stacktable();
$(this).replaceWith('<span>ran</span>');
});
4. Add an extra CSS class to the table.
$('#simple-example-table').stacktable({
myClass: 'your-custom-class'
});
5. Specify the row index of the header, in case it isn't the first.
$('#simple-example-table').stacktable({
headIndex: 2
});
6. 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.
$('#simple-example-table').cardtable();
7. 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.
$('#simple-example-table').stackcolumns();
Live Demo
See the Pen Untitled by Plugin JS (@teguhsigit) on CodePen.
File Info
- File Name :
- stacktable.js-master.zip
- Size :
- 48.13KB
- Site Download :
- Github.com
- Official Website:
- Go to website
- License:
- MIT