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:

• jQuery Plugin For Resizable Table Columns - ResizableColumns
• jQuery Plugin For Draggable Resizable Table Columns - colResizable

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">
  <thead>
    <tr>
      <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>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <td>3</td>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

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

$(function(){
  $("table").resizableColumns({
    // optional
    store: window.store,
  });
});

5. All default plugin options.

$("table").resizableColumns({
  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.