Stacking Tables On Small Screens with jQuery - stacktable

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

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.

See Also:

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();

Changelogs:

2021-06-23

2017-06-10

  • Adding support for thead as first row

2017-02-05

  • bugfix

2016-06-12

  • bugfix

2015-11-19

  • deprecate unnecessary hideOriginal setting
  • v1.0.1

2015-11-02

  • JS update.

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.