jQuery Plugin For Draggable Resizable Table Columns - colResizable

colResizable is a small yet useful jQuery plugin which allows the users to responsively & dynamically change the width of the table column via drag and drop (and even touch gesture events).

The plugin uses HTML5 localstorage or sessionstorage to automatically save the current cell width in the local browser.

Without the need of jQuery UI library and works perfectly for mobile device, responsive web layout and dynamic table content.

See Also:

• jQuery Plugin For Resizable Table Columns - ResizableColumns
• Drag and Resize HTML Table Columns - jQuery resizable-columns

Basic usage:

1. Load the latest version of the jQuery colResizable plugin after jQuery library and you're ready to go.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="colResizable-LATEST.js"></script>

2. Initialize the plugin on your html table and specify the resize you prefer:

• 'fit': Table width adapts to the container width. Columns resize using their neighbour's width.
• 'flex': Columns are sized independently unless there is not enought space in the container.
• 'overflow': Columns are sized independently. Table width can exceed its container.

$("#myTable").colResizable({
  resizeMode:'fit'
});

3. All possible plugin options to customize the resizing functionality.

$("#myTable").colResizable({

  // 'fit', 'flex' or 'overflow'
  resizeMode: 'fit', 

  // css-class used when a grip is being dragged (for visual feedback purposes)
  draggingClass: 'JCLRgripDrag',  

  // if it is required to use a custom grip it can be done using some custom HTML    
  gripInnerHtml: '',        //if it is required to use a custom grip it can be done using some custom HTML        

  // enables table-layout updating while dragging  
  liveDrag: false,        

  // minimum width value in pixels allowed for a column 
  minWidth: 15,           

  // specifies that the size of the the column resizing anchors will be bounded to the size of the first row 
  headerOnly: false,        

  // cursor to be used on grip hover
  hoverCursor: "col-resize",      

  // cursor to be used while dragging
  dragCursor: "col-resize",    

  // when it is enabled, table layout can persist after postback or page refresh. 
  // it requires browsers with sessionStorage support (it can be emulated with sessionStorage.js).  
  postbackSafe: false,      

  // when postbakSafe is enabled, and it is required to prevent layout restoration after postback, 'flush' will remove its associated layout data 
  flush: false,      

  // in case the table contains any margins, colResizable needs to know the values used, e.g. "10%", "15em", "5px" ...     
  marginLeft: null,       

  // in case the table contains any margins, colResizable needs to know the values used, e.g. "10%", "15em", "5px" ...
  marginRight: null,        

  // disables all the enhancements performed in a previously colResized table  
  disable: false,         

  // can be used in combination with postbackSafe when the table is inside of an updatePanel
  partialRefresh: false,      

  // use local storage
  useLocalStorage: false,	

  // column indexes to be excluded
  disabledColumns: [],           

  // for some uses (such as multiple range slider), it is advised to set this modifier to true, it will remove padding from the header cells. 
  removePadding: true

});

4. Callback functions available.

$("#myTable").colResizable({

  / fired during the column resizing process if liveDrag is enabled
  onDrag: null,           

  // fired when the dragging process is over
  onResize: null         
   
});

Changelog:

2020-06-26

• Bugfix

2020-06-25

• Updated for JQuery 3.0+

2019-09-20

• Add option to save widths to localStorage instead of sessionStorage

2018-02-03

• IE8 Array indexOf polyfill

---

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