Submit your widget

Useful jQuery Resizable table columns

Created 4 years ago   Views 16739   downloads 2911    Author dobtco
Useful jQuery Resizable table columns
View DemoDownload 65.7 KB
75
Share |

Resizable table columns for jQuery. 

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: < 3kb 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 a function 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>

The article source:https://github.com/dobtco/jquery-resizable-columns