# ColReorderWithResize

**Repository Path**: mirrors_jeffreydwalter/ColReorderWithResize

## Basic Information

- **Project Name**: ColReorderWithResize
- **Description**: Column reordering and resizing plug-in for DataTables
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-09-25
- **Last Updated**: 2026-05-24

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# ColReorderResize

> I'm looking for people willing to contribute to this project as I no longer use dataTables and so don't have any motivation (or time) to maintain it. If you're insterested, please feel free to create pull-requests and I'll happily support your effort and help to get them merged in. Thanks!
***
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](http://legacy.datatables.net/extras/thirdparty/ColReorderWithResize/) 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.
    });
```