A jQuery Table Resizeable Plugin

1. Introduction

jQuery-ResizableColumns is a lightweight library which makes every HTML table columns resizeable. The plugin is easy to install on any website.

2. Plugin Overview

Demo

3. How to install and use jQuery-ResizableColumns jQuery plugin

Follow the below steps to install jQuery-ResizableColumns jQuery plugin on your website.

1. Include jQuery and jQuery-ResizableColumns library files:

<!--jQuery-->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<!-- The plugin jQuery.resizableColumns -->
<script src="resizableColumns.min.js"></script>

<!-- Some styles for Table-->
<link rel="stylesheet" href="style.css" />

2. Create simple HTML table:

<table id="tbResizable">
  <thead>
    <tr>
      <th>col 1</th>
      <th>col 2</th>
      ...
      ...
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Content</td>
      <td>Conent</td>
      ...
      ...
    </tr>
  </tbody>
</table>

3. Initialize the jQuery-ResizableColumns plugin:

jQuery(document).ready(function($) {
    $('#tbResizable').resizableColumns();
});

4. Conclusion

In this article, we presented jQuery-ResizableColumns jQuery plugin that makes every HTML table columns resizeable. The plugin can be useful for everyone who wants to extend table functionality on their websites and give users some extra features.