Resizable table columns for jQuery.
Clone or download
Pull request Compare This branch is 2 commits ahead of dobtco:gh-pages.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo
dist
less
src
.bowerrc
.gitignore
AUTHORS
README.md
bower.json
gulpfile.js
index.html
package.json

README.md

jquery-resizable-columns

Resizable table columns for jQuery. Live Demo

New and Improved! Now tested and working on Chrome & Firefox (Mac + Windows), and IE 9 + 10. Other browsers might work too, just haven't had time to check.

Size: < 8kb minified

Reasons for making this fork

  • jQuery version constraint in original bower.json is too strict and does not allow version 2.0, that works correctly with this plugin
  • The original repository seems to be abandoned

Dependencies

  • jQuery
  • store.js (or anything similar) for localStorage persistence.

Simple Usage

<table>
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    ...
  </tbody>
</table>

<script>
  $(function(){
    $("table").resizableColumns();
  });
</script>

Persist column sizes

To save column sizes on page reload (or js re-rendering), just pass an object that responds to get and set. You'll also have to give your <table> a data-resizable-columns-id attribute, and your <th>s data-resizable-column-id attributes.

<script src="libs/jquery.js"></script>
<script src="libs/store.js"></script>
<script src="jquery.resizableColumns.js"></script>

<table data-resizable-columns-id="demo-table">
  <thead>
    <tr>
      <th data-resizable-column-id="#">#</th>
      <th data-resizable-column-id="first_name">First Name</th>
      <th data-resizable-column-id="last_name">Last Name</th>
      <th data-resizable-column-id="username">Username</th>
    </tr>
  </thead>
  <tbody>
    ...
  </tbody>
</table>

<script>
  $(function(){
    $("table").resizableColumns({
      store: store
    });
  });
</script>

License

MIT

Credits

There's various versions of this plugin floating around the internet, but they're all outdated in one way or another. Thanks to http://robau.wordpress.com/2011/06/09/unobtrusive-table-column-resize-with-jquery/ for a great starting point.