jQuery Plugin For Resizable Table Columns - ResizableColumns

jQuery Plugin For Resizable Table Columns - ResizableColumns

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

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();
})

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

  • Publication date: 16.12.2017
  • Source