Drag and Resize HTML Table Columns - jQuery resizable-columns

File Size: 55.7 KB
Views Total: 648
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Drag and Resize HTML Table Columns - jQuery resizable-columns

Resizable-columns is an easy-to-use jQuery plugin that allows you to resize HTML table columns by mouse dragging.

See Also:

How to use it:

1. Load the jQuery resizable-columns plugin's files.

<!-- jQuery Is Required -->
<script src="/path/to/cdn/jquery.slim.min.js"></script>

<!-- jQuery resizable-columns -->
<link rel="stylesheet" href="dist/jquery.resizableColumns.css" />
<script src="dist/jquery.resizableColumns.min.js"></script>

2. Load the store.js library to save the current column width in the local storage. OPTIONAL.

<script src="/path/to/cdn/store.min.js"></script>

3. Add the data-resizable-column-id attribute to the table columns which should be resizable. OPTIONAL.

<table data-resizable-columns-id="demo-table">
      <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" id="username-column" data-noresize>Username</th>
      <td colspan="2">Larry the Bird</td>

4. Call the plugin on the HTML table and done.

    // optional
    store: window.store,

5. All default plugin options.

  selector: function selector($table) {
    if ($table.find('thead').length) {
      return _constants.SELECTOR_TH;
    return _constants.SELECTOR_TD;
  store: window.store,
  syncHandlers: true,
  resizeFromBody: true,
  maxWidth: null,
  minWidth: 0.01

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