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.
https://smasala.github.io/ColResize/
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)
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.
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 **/
}$(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)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.stateSave: boolean [default=false] set to true if you wish to save the column width states using the DT default state saving mechanismscrollY: number [default=false] much like the DT scrollY. Sets a fixed header andtbodyheight with scroll functionality. Cannot be used with DTscrollYoption.
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 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.dtarguments: (jQuery Event Object, columnIndex [integer], newColumnWidth [integer]) - fired after a drag event on mouse up.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent