jQuery Plugin For Resizable Table Columns - ResizableColumns

ResizableColumns is an ultra-lightweight jQuery plugin which allows the user to resize columns in an HTML table using mouse drag.

How to use it:

1. Import jQuery library and the JavaScript file jQuery.resizableColumns.js into the web page.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous">
</script>
<script src="jQuery.resizableColumns.js"></script>

2. Then call the function resizableColumns() on the target html table. That's it.

<table class="resizable">
  <thead>
    <tr>
      <th> col 1 </th>
      <th> col 2 </th>
      <th> col 3 </th>
      <th> col 4 </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> Column 1 </td>
      <td> Column 2 </td>
      <td> Column 3 </td>
      <td> Column 4 </td>
    </tr>
    <tr>
      <td> Column 1 </td>
      <td> Column 2 </td>
      <td> Column 3 </td>
      <td> Column 4 </td>
    </tr>
  </tbody>
</table>

$(function(){
  $('table.resizable').resizableColumns();
})

Changelog:

2019-11-15

• Supports fixed columns

v1.1.0 (2019-03-20)

• Works with two rows in <thead> tag.
• Resizing is applied only to the first header row.

2018-02-21

• Updated .resizing class to be added to first header row

---

This awesome jQuery plugin is developed by Jo-Geek. For more Advanced Usages, please check the demo page or visit the official website.