Past version of jQuery DataTables had column reordering plug-in ColReorderWithResize that also provided the ability to resize columns by clicking and dragging the point between two columns. However this plug-in was not compatible with the latest version of jQuery DataTables.

Luckily Jeff Walter updated ColReorderWithResize to make column reordering and resizing work with jQuery DataTables 1.10 and released it under MIT license.

Overview

jQuery DataTables already has official plug-in for column reordering ColReorder. But if you need the ability to resize columns, you may want to use ColReorderWithResize instead.

Plug-in can be initialized multiple ways:

  1. Using dom option and adding character R. 
    
var table = $('#example').DataTable({
    'dom': 'Rlfrtip'
});
  2. Using new $.fn.dataTable.ColReorder(). 
    
var table = $('#example').DataTable();
new $.fn.dataTable.ColReorder(table);

Example

Allow column resizing only

You can disable column reordering and allow column resizing only by setting colReorder.allowReorder option to false.


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

Michael Ryvkin

Freelance web developer based in Perkasie, Bucks County, PA. I design and develop custom websites and web applications, perform website maintenance and provide technical support for small and medium-sized businesses.

Contact me for a free quote or consultation on your project.