Doesn't always work under jQuery version
use 3.1.1 if you can until 3.3.x is available :)
ColResize adds the ability for the end user to click and drag column headers to resize a DataTables table.
- Chrome 59.0.3071.115
- FF 54.0.1
- IE 8, 9 (without scrollY + fixed header feature)
- IE 10+ (for scrollY + fixed header feature)
NPM and Bower
If you prefer to use a package manager such as NPM or Bower, distribution repositories are available with software built from this repository under the name
dt-colresize. Styling packages for Bootstrap, Foundation and other styling libraries are also available by adding a suffix to the package name.
Import necessary files:
ColResize is initialised using the
colResize option in the DataTables constructor - a simple boolean
true will enable the feature. Further options can be specified using this option as an object - see the documentation for details.
scrollX must also be set as
/** Customise the resize bar **/
Configuration / options
minColumnWidth: number [default=10] must be equal too or greater than the sum of the cell's padding (left + right)
scrollY: number [default=false] much like the DT scrollY. Sets a fixed header and
tbodyheight with scroll functionality. Cannot be used with DT
resizeTable: boolean [default=false] set to true if you want the entire table to be shifted when a column is resized. Default behaviour is that when a column is resized the neighbouring column expands/shrinks accordingly. If set to
true, when a column is resized, the neighbouring column is left untouched and the table shifts accordingly.
This extension also has a few extra api functions which can be called by using the created DataTables instance.
var dtInstance = ;dtInstancecolResize;
redraw(): forces a complete redraw of the draggable bars etc by destroying the current DOM elements and recreating them
visible(columnIndex, visibilityBoolean, redrawCalculationsBoolean): when using the ColResize extension, the standard column visibility function should be avoided because the events are too late for ColResize to use. Use this visible function instead. Original docs for more info.
Events can be caught on the DataTable instance object
var dtInstance = ;dtInstance;
column-resized.dtarguments: (jQuery Event Object, columnIndex [integer], newColumnWidth [integer]) - fired after a drag event on mouse up.