jQuery Plugin For Resizable Table Columns - ResizableColumns
File Size: | 182 KB |
---|---|
Views Total: | 14035 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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.