Submit your widget
HomeTableUseful jQuery Resizable table columns

Useful jQuery Resizable table columns

Created 11 years ago   Views 11465   downloads 1961    Author dobtco
Useful jQuery Resizable table columns
View DemoDownload
28
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

You might also like