Lightweight jQuery Responsive Table Solution - resTables

resTables is a lightweight (3kb) jQuery responsive table plugin which converts your wide table into a stacked, 2-column table view on small screens for better readability.

How to use it:

1. Place jQuery library and the jQuery resTables plugin's script at the bottom of the webpage.

<script src="//code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="restables.js"></script>

2. Call the function on the html table and we're ready to go.

$('table').resTables();

3. Be sure that your html table have thead and tbody elements as follows:

<table class="table table-bordered">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@TwBootstrap</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">4</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

4. Style the new table.

table.restables-clone { display: none; }

table.restables-clone td { width: 50%; }

table.restables-clone td:first-child { font-weight: bold; }

table.restables-clone tr:first-child td { background: #333; color:#fff; }

5. Specify at which breakpoint the html table should be transformed by the plugin.

@media (max-width: 991px) {

.container table.restables-origin { display: none; }

.container table.restables-clone { display: table; }

}

6. Default plugin settings.

$('table').resTables({

// The columns to be merged with the others.
  // Example: {1: [2, 3], 5: [6]}
  // Result:
  //  - column with index 1 will contain values from columns: 1, 2, 3.
  //  - column with index 5 will contain values from columns: 5, 6.
  merge: {},

  // The columns to be moved to the given position.
  // Example: {1: 0}
  // Result: column with index 1 will be placed at the top of the table (index 0).
  move: {},

  // The columns to be skipped.
  // Example: [3, 5]
  // Result: columns with indexes 3 and 5 will be skipped.
  skip: [],

  // The columns to be spanned.
  // Example: [2, 4]
  // Result: columns with indexes 2 and 4 will have only 1 column (value) and colspan=2 attribute.
  span: [],

  // The CSS cssClass that are added to the origin and cloned elements.
  cssClassOrigin: 'restables-origin',
  cssClassClone: 'restables-clone',

  // The list of attributes that should remain unique.
  // Example: ['id']
  // Result: <div id="test"> will become <div id="test-restables-clone">
  uniqueAttributes: ['id', 'for'],

  // The attribute suffix to make it unique.
  // Example: -unique-clone
  // Result: <div id="test"> will become <div id="test-unique-clone">
  attributeSuffix: '-restables-clone',

  // The clone callback that is executed when cloning table element.
  // Usage example: function (clone) { clone.addClass('cloned-table') }
  cloneCallback: null,

  // The CSS classes of cells will be preserved in the cloned table element.
  preserveCellClasses: true
  
});

Change log:

2016-12-01

• Added the option to preserve CSS cell classes

---

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