Plugin to resize columns by mouse drag or touch.
https://dhobi.github.io/datatables.colResize/
As npm package:
npm i datatables.net-colresize-unofficial
Manually:
Javascript file to include: jquery.dataTables.colResize.js
Stylesheet to include: jquery.dataTables.colResize.css
With CDN links:
https://cdn.jsdelivr.net/npm/datatables.net-colresize-unofficial@latest/jquery.dataTables.colResize.css
https://cdn.jsdelivr.net/npm/datatables.net-colresize-unofficial@latest/jquery.dataTables.colResize.js
The plugin will try to initialize itself on preInit.dt event.
var options = { ...see below... };
// Either:
var table = $('#example').DataTable({
colResize: options
});
// Or:
var table = $('#example').DataTable();
new $.fn.dataTable.ColResize(table, options);
// Available methods:
table.colResize.enable(); // enable plugin (i.e. when options was isEnabled: false)
table.colResize.disable(); // remove all events
table.colResize.reset(); // reset column.sWidth values
table.colResize.save(); // save the current state (defaults to localstorage)
table.colResize.restore(); // restore the state from storage (defaults to localstorage)colResize = {
isEnabled: true,
saveState: false,
hoverClass: 'dt-colresizable-hover',
hasBoundCheck: true,
minBoundClass: 'dt-colresizable-bound-min',
maxBoundClass: 'dt-colresizable-bound-max',
isResizable: function (column) {
return true;
},
onResizeStart: function (column, columns) {
},
onResize: function (column) {
},
onResizeEnd: function (column, columns) {
},
getMinWidthOf: function ($thNode) {
},
stateSaveCallback: function (settings, data) {
},
stateLoadCallback: function (settings) {
}
}default: true
Specify whether resize functionality is enabled on dataTable init
default false
Specify whether state should automatically save when changed and restore on page load
default: 'dt-colresizable-hover'
Class which will be toggled on resizable & hovered <th> element (right border +/- 10px)
default: true
Specify whether min-width / max-width styles are checked to keep resizing of column in bounds
default: 'dt-colresizable-bound-min'
Class which will be toggled for 500ms once the min-width of the column has been reached
default: 'dt-colresizable-bound-max'
Class which will be toggled for 500ms once the max-width of the column has been reached
default: column.isResizable / true
Called once during plugin/datatable init. Return false will not attach the drag events to the column.
Callback on drag start / touchstart event. Parameter is the dataTable column which has been resized and all other columns in the table.
Callback on dragging / touchmove event. Parameter is the dataTable column which is currently being resized.
Callback on drag end / touchend event. Parameter is the dataTable column which has been resized and all other columns in the table.
default: null
If defined (not null) will be used to calculate the minimal width of the given jQuery th - node.
If null (default) the plugin tries to detect the minimal width by
- Looking at the CSS min-width property
- Guessing the width by checking the space the text label uses
- Minimum 30px width
default: uses localStorage
Callback when state needs to save. Parameter is an array of column sizes.
example: [437,412,416,258,397,357]
default: uses localStorage
Callback when state needs to be restored. You will need to return an array of column sizes.
example: [437,412,416,258,397,357]
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent