🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

Resizable table columns for jQuery. Grab the column headers and drag em!.To save column sizes on page reload (or js re-rendering), just pass a function that responds to get and set.

Plugins Tables

Documentation

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

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.


You May Also Like