Tablesorter demo

All options included, as well as the uitheme widget

by Mottie

HTML

<script src="https://mottie.github.io/tablesorter/js/jquery.tablesorter.js"></script>
<script src="https://mottie.github.io/tablesorter/js/jquery.tablesorter.widgets.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://mottie.github.io/tablesorter/js/widgets/widget-reflow.js"></script>
<link rel="stylesheet" href="https://mottie.github.io/tablesorter/css/theme.bootstrap.css">
<table id="table1">
  <thead>
    <tr>
      <th>Rank</th>
      <th>Age</th>
      <th>Total</th>
      <th>Discount</th>
      <th>Date</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>25</td>
      <td>$5.95</td>
      <td>22%</td>
      <td>Jun 26, 2013 7:22 AM</td>
    </tr>
    <tr>
      <td>11</td>
      <td>12</td>
      <td>$82.99</td>
      <td>5%</td>
      <td>Aug 21, 2013 12:21 PM</td>
    </tr>
    <tr>
      <td>12</td>
      <td>51</td>
      <td>$99.29</td>
      <td>18%</td>
      <td>Oct 13, 2013 1:15 PM</td>
    </tr>
    <tr>
      <td>51</td>
      <td>28</td>
      <td>$9.99</td>
      <td>20%</td>
      <td>Jul 6, 2013 8:14 AM</td>
    </tr>
    <tr>
      <td>21</td>
      <td>33</td>
      <td>$19.99</td>
      <td>25%</td>
      <td>Dec 10, 2012 5:14 AM</td>
    </tr>
    <tr>
      <td>013</td>
      <td>18</td>
      <td>$65.89</td>
      <td>45%</td>
      <td>Jan 12, 2013 11:14 AM</td>
    </tr>
    <tr>
      <td>005</td>
      <td>45</td>
      <td>$153.19</td>
      <td>45%</td>
      <td>Jan 18, 2014 9:12 AM</td>
    </tr>
    <tr>
      <td>10</td>
      <td>3</td>
      <td>$5.29</td>
      <td>4%</td>
      <td>Jan 8, 2013 5:11 PM</td>
    </tr>
    <tr>
      <td>16</td>
      <td>24</td>
      <td>$14.19</td>
      <td>14%</td>
      <td>Jan 14, 2014 11:23 AM</td>
    </tr>
    <tr>
      <td>66</td>
      <td>22</td>
      <td>$13.19</td>
     ...

CSS

.tablesorter-bootstrap thead th {
  margin: 0;
}

/* REQUIRED CSS: change your reflow breakpoint here (35em below) */
@media ( max-width: 35em) {
  .ui-table-reflow td,
  .ui-table-reflow th {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    float: right;
    /* if not using the stickyHeaders widget (not the css3 version)
			 * the "!important" flag, and "height: auto" can be removed */
    width: 100% !important;
    height: auto !important;
  }
  /* reflow widget */
  .ui-table-reflow tbody td[data-title]:before {
    color: #469;
    font-size: .9em;
    content: attr(data-title);
    float: left;
    width: 50%;
    white-space: pre-wrap;
    text-align: bottom;
    display: inline-block;
  }
  /* allow toggle of thead */
  thead.hide-header {
    display: none;
  }
}

.ui-table-reflow .ui-table-cell-label {
  display: none;
}

JavaScript

/* Documentation for this tablesorter FORK can be found at
 * http://mottie.github.io/tablesorter/docs/
 */
$(function() {
  $("#table1").tablesorter({
    theme: 'bootstrap',
    widgets: ['zebra', 'uitheme', 'reflow'],
    headerTemplate: '{content}{icon}',
    widgetOptions: {
      // class name added to make it responsive (class name within media query)
      reflow_className: 'ui-table-reflow',
      // header attribute containing modified header name
      reflow_headerAttrib: 'data-name',
      // data attribute added to each tbody cell
      // it contains the header cell text, visible upon reflow
      reflow_dataAttrib: 'data-title'
    }
  });
});