Boostrap Resizable

by Mottie

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://mottie.github.io/tablesorter/js/jquery.tablesorter.js"></script>
<script src="https://rawgit.com/Mottie/tablesorter/master/js/widgets/widget-resizable.js"></script>
<script src="https://mottie.github.io/tablesorter/js/widgets/widget-storage.js"></script>
<script src="https://mottie.github.io/tablesorter/js/widgets/widget-uitheme.js"></script>
<link rel="stylesheet" href="https://mottie.github.io/tablesorter/css/theme.bootstrap.css">
<table> <!-- bootstrap classes added by the uitheme widget -->
  <thead>
    <tr>
      <th>Name</th>
      <th>Major</th>
      <th class="filter-select filter-exact" data-placeholder="Pick a gender">Sex</th>
      <th>English</th>
      <th>Japanese</th>
      <th>Calculus</th>
      <th>Geometry</th></tr>
  </thead>
  <tfoot>
    <tr>
      <th>Name</th>
      <th>Major</th>
      <th>Sex</th>
      <th>English</th>
      <th>Japanese</th>
      <th>Calculus</th>
      <th>Geometry</th>
    </tr>
    <tr>
      <th colspan="7" class="ts-pager form-horizontal">
        <button type="button" class="btn first"><i class="icon-step-backward glyphicon glyphicon-step-backward"></i></button>
        <button type="button" class="btn prev"><i class="icon-arrow-left glyphicon glyphicon-backward"></i></button>
        <span class="pagedisplay"></span> <!-- this can be any element, including an input -->
        <button type="button" class="btn next"><i class="icon-arrow-right glyphicon glyphicon-forward"></i></button>
        <button type="button" class="btn last"><i class="icon-step-forward glyphicon glyphicon-step-forward"></i></button>
        <select class="pagesize input-mini" title="Select page size">
          <option selected="selected" value="10">10</option>
          <option value="20">20</option>
          <option...

CSS

.tablesorter-resizable-handle {
  background-color: rgba(0,0,255,.5);
}

JavaScript

$(function() {

  $('table').tablesorter({
    theme: 'bootstrap',
    headerTemplate: '{content} {icon}',
    widgets: [
      'resizable',
      'uitheme',
      'zebra'
    ]
  });
});