JavaScripting

The definitive source of the best
JavaScript libraries, frameworks, and plugins.


  • ×

    jQuery Resizable Columns

    Resizable table columns for jQuery.
    Filed under 

    • 🔾34%Overall
    • 511
    • 22.7 days
    • 🕩137
    • 👥12

    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.

    Show All