1.0.8 • Published 4 years ago

datatables.net-colreorderwithresizeupdated v1.0.8

Weekly downloads
6
License
MIT
Repository
github
Last release
4 years ago

This is a simple fork of jeffreydwalter's ColReorderWithResize package that adds NPM support

version downloads MIT License PRs Welcome

ColReorderResize adds the ability for the end user to click and drag column headers to reorder and resize a table as they see fit, to DataTables. See the documentation for full details.

This repository is based on a no longer supported version of the ColReorderWithResize plugin. I basically updated it to work with the latest version of DataTables and fixed some long-standing issues with the plugin.

There is an example of using this plugin here: https://www.gyrocode.com/articles/jquery-datatables-column-reordering-and-resizing

Plug-in can be initialized multiple ways:

Using dom option and adding character R.

var table = $('#example').DataTable({
    'dom': 'Rlfrtip'
});

Using new $.fn.dataTable.ColReorder().

var table = $('#example').DataTable();
new $.fn.dataTable.ColReorder(table);

This plugin fires the following events:

column-reorder.dt
column-reorder.dt.mouseup
column-resize.dt.mouseup
mousemove.ColReorder
touchmove.ColReorder
mouseup.ColReorder
touchend.ColReorder

Here is an example of capturing a resize event:

// Do something when a resize occurs.
$('#datatable').on('column-resize.dt.mouseup', function(event, oSettings) {
    // Do something here.
});

Here is an example of capturing some reorder event:

$('#datatable').on('column-reorder.dt.mouseup', function(event, oSettings) {
    // Do something here.
});
    
// or 
    
$('.dataTables_wrapper')
    .on('mousedown.ColReorder touchstart.ColReorder', function(event) {
        // User has clicked on a column and is currently holding the mouse button down.
    })
    .on('mouseup.ColReorder touchend.ColReorder', function(event) {
        // Users has released the mouse button.
    });