README
ColResize
Doesn't always work under jQuery version 3.2.x
: https://github.com/jquery/jquery/issues/3611
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.
Demo
https://smasala.github.io/ColResize/
Compatibility
Tested in:
- Chrome 59.0.3071.115
- FF 54.0.1
- IE 8, 9 (without scrollY + fixed header feature)
- IE 10+ (for scrollY + fixed header feature)
Installation
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.
Please see the DataTables NPM and Bower installation pages for further information. The DataTables installation manual also has details on how to use package managers with DataTables.
Basic usage
Import necessary files:
<!DOCTYPE html> <!-- must be set for scrollY + fixed header feature -->
...
<script type="text/javascript" src="../js/dataTables.colResize.js"></script>
<link rel="stylesheet" href="../css/dataTables.colResize.css" />
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.
autoWidth
and scrollX
must also be set as false
.
Example:
$(document).ready( function () {
$('#myTable').DataTable( {
colResize: true,
autoWidth: false,
scrollX: false
} );
} );
/** Customise the resize bar **/
.dt-colresizable-col {
/** styles go here **/
}
Configuration / options
$(document).ready( function () {
$('#myTable').DataTable( {
colResize: {
scrollY: 200, //cannot be used with DT scrollY
minColumnWidth: 50
},
autoWidth: false,
scrollX: false
} );
} );
Possible 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 andtbody
height with scroll functionality. Cannot be used with DTscrollY
option.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 totrue
, when a column is resized, the neighbouring column is left untouched and the table shifts accordingly.
API
This extension also has a few extra api functions which can be called by using the created DataTables instance.
var dtInstance = $(table).DataTable({... colResize: true ...});
dtInstance.colResize.redraw();
Available functions:
redraw()
: forces a complete redraw of the draggable bars etc by destroying the current DOM elements and recreating themvisible(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
Events can be caught on the DataTable instance object
var dtInstance = $(table).DataTable({... colResize: true ...});
dtInstance.on("column-resized.dt" function(event, columnIndex, newColumnWidth) {
// do something
});
Possible events:
column-resized.dt
arguments: (jQuery Event Object, columnIndex [integer], newColumnWidth [integer]) - fired after a drag event on mouse up.