jQuery DataTables: Column reordering and resizing

November 14, 2017March 13, 2019 Michael Ryvkin

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:

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);

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.

Comments

mik says:

April 2, 2018 at 7:47 am

Hello, how can i catch the event of column resize. Thanks.

Reply
1. Jeff Walter says:
  
  June 22, 2018 at 5:06 pm
  Hi mik, you can catch it like this:
```
 Self.oTable.on('column-resize.dt.mouseup', function(event, oSettings) { // do something here. });
```
  Reply

Hi,

I am trying to use this js ColReorderWithResize.js replace dataTables.colReorder.min.js

the resize and reorder worked

however, the column select input filter not working, it worked in dataTables.colReorder.min.js but not this new js

is there a conflict?

$(document).ready( function () {
    var divExample = $('#exampleTable');
    var tableExample =divExample.DataTable({
        "paging": false,
        "searching": true,
        "stateSave": true,
        "dom": 'Rlfrtip'    
    });

//this code is filter//

$("#exampleTable thead th").each( function ( i ) {
var select = $('')
    .appendTo( $(this).empty() )
    .on( 'change', function () {
        tableExample.column( $(this).parent().index()+':visible'  )
            .search($(this).val() )
            .draw();
    } );
tableExample.column(i ).data().unique().sort().each( function ( d, j ) {
    select.append( ''+d+'' )
} );
} );
} );

lee says:

April 11, 2018 at 2:57 pm

Hi,
append select input filter to your example, not working

$(“#example tfoot th”).each( function ( i ) {
var select = $(”)
.appendTo( $(this).empty() )
.on( ‘change’, function () {
table.column(i )
.search( $(this).val() )
.draw();
} );

table.column( i ).data().unique().sort().each( function ( d, j ) {
select.append( ”+d+” )
} );
} );

Reply
lee says:

April 11, 2018 at 5:36 pm

Hi,

By another testing, to use this js, the stateSave not work

Reply
1. Michael Ryvkin says:
  
  April 11, 2018 at 5:48 pm
  
  You can try opening an issue on GitHub.
  
  Reply

Your code worked fine for me. Try my exact code.


$(document).ready( function () {
    var divExample = $('#t1');
    var tableExample = divExample.DataTable({
        "paging": false,
        "searching": true,
        "stateSave": true,
        "dom": 'Rlfrtip'    
    });

    $("#t1 thead th").each( function ( i ) {
        var select = $('')
            .appendTo( $(this).empty() )
            .on( 'change', function () {
                tableExample.column( $(this).parent().index()+':visible'  )
                    .search($(this).val() )
                    .draw();
            } );
        tableExample.column(i ).data().unique().sort().each( function ( d, j ) {
            select.append( ''+d+'' )
        } );
    } );
} );

Festus480 says:

September 5, 2018 at 11:17 am

Worked out perfectly!!! Thanks

Reply

Also, to fixed a column and disallow it from being re-ordered and resized


// Apply fixed column feature on table.
new $.fn.dataTable.FixedColumns(_table, {leftColumns: 1}); // Note: leftColumns: 1 = Number of columns (counting from the left) to disallow. if from right use rightColumns: 1 or both if required.
// Apply column position re-ordering and resizing features on table.
new $.fn.dataTable.ColReorder(_table, {fixedColumnsLeft: 1});// Note: fixedColumnsLeft: 1 = Number of columns (counting from the left) to disallow. if from right use fixedColumnsRight: 1 or both if required.

Finally the following plugin is need for the datatable fixed column:
https://cdn.datatables.net/fixedcolumns/3.2.6/js/dataTables.fixedColumns.min.js

Harsha says:

October 5, 2018 at 2:01 am

Is there a way to use this with sort disabled ? I see that this will not work if sort is disabled in datatables!!

Reply
youlanda says:

December 10, 2018 at 4:55 am

Hello, how to use scrollX with colReorder? Thanks!

Reply
Anurag says:

March 13, 2019 at 4:14 am

Is there a way to disable reordering and only using resize?

Reply
1. Michael Ryvkin says:
  
  March 13, 2019 at 7:34 am
  
  Great question! I have updated the article demonstrating how to only allow column resizing. See this example for demonstration.
  
  Reply
  1. Anurag says:
    
    March 13, 2019 at 7:40 am
    
    Thanks for quick help, I am also facing issue when we are having a scrollX and scrollY
    
    Reply
    1. Michael Ryvkin says:
      
      March 13, 2019 at 8:03 am
      
      See this issue on GitHub, seems like it has been in fixed in the recent update. Try using the most recent version of the plug-in and see if it resolves your problem.
      
      Reply
      1. Priyesh says:
        
        March 19, 2019 at 9:50 am
        
        Hi Michael,
        The resize fails when we use scrollX and scrollY – it only allows to move the header, not other rows. Can you please suggest?
        
        Reply
        
        Michael Ryvkin says:
        
        March 19, 2019 at 10:09 am
        
        Please see my earlier reply. This issue on GitHub has been in fixed in the recent update. Try using the most recent version of the plug-in and see if it resolves your problem.
        
        Reply
        
        Priyesh says:
        
        March 20, 2019 at 6:14 am
        
        Thank you, Michael – I will check this.
        Apologies for another question on this – Is there a way to enable resizing only for a selected set of columns? I would just want to do it for 2 columns.
        
        Reply
Hagai says:

April 9, 2019 at 11:29 am

Is there a way to make it work with RTL table?

Reply
Dhanil Dinesan says:

October 8, 2019 at 1:36 am
I’m using Datatable
```
columnDefs
```
for setting the width for each column, but while using this the resizing functionality is not working properly. If I removing the width setting area then it’s working fine. Is there any way to do it without removing the width setting area.
Reply
1. Michael Ryvkin says:
  
  October 9, 2019 at 7:33 am
  
  Resizing with ColReorderWithResize plugin works the same for me when using the `columns.width` option, see this example. Also I tried disabling automatic width calculation with `autoWidth: false`.
  
  Reply
Dhanil Dinesan says:

October 11, 2019 at 12:27 am

Yes, sir, I’m also using the same, `autoWidth: false` but the column width is not persisting its actual width. There is some flickering is there.

Reply
Dhanil Dinesan says:

October 11, 2019 at 12:28 am

Cant make column width smaller than content length with white-space:nowrap;

Reply

Hi sir,
I have a doubt about the column resize plugin. I will post my code here for your reference. My issue is when im trying to resize the column width by dragging it, it gets retained its previous position when releasing mouse click.

here is my code

$(document).ready( function () {
 $('#data-table-basic').DataTable(
            {
                dom: 'rt',
                colReorder: {   
                    'allowReorder': false
                },
                ordering: true,
                searching: false,
                paging: true,
                lengthChange: false,
                processing: true,
                autoWidth: false,
                scrollX: true,
                scrollY:"345px",
 columns: [
                    { "data": "", render: $.fn.dataTable.render.ellipsis(20),"defaultContent": "-" },
                    { "data": "", render: $.fn.dataTable.render.ellipsis(20), "defaultContent": "-" },
                    { "data": "", render: $.fn.dataTable.render.ellipsis(20), "defaultContent": "-" },
                    { "data": "", render: $.fn.dataTable.render.ellipsis(20), "defaultContent": "-" }                 
                ],
                columnDefs: [
                    { className: "text-center", "targets": [4] },
                    { className: "popover-right", "targets": [0] },
                    { "targets": [0, 1, 2, 3], "width": "20%" },
                    { "targets": [4], "width": "10%" } 
                ]
  });
  });

Dhanil says:

October 17, 2019 at 3:59 am

I found this is because of ScrollX and ScrollY – can you tell me any solution or suggestion for this. I’m using ScrollX and ScrollY for responsive purposes.

Reply

Bob says:

February 11, 2020 at 8:28 am

Hi is there any solution for 100+ entries in one page because the table moves very slow while resizing …

Reply
Kauthuk says:

May 14, 2020 at 9:02 am

The Plugin works fine for me.

But the only issue i’m facing is that, the column widths are not saved after resize. As soon as i click the refresh button, the changes are gone. I want the modified column widths to be saved.

Any help would be appreciated. Thank You.

Reply
1. Michael Ryvkin says:
  
  May 14, 2020 at 1:47 pm
  
  I am not the original author of the plug-in. It seems that plug-in doesn’t save/restore column widths. Please see [this issue](https://github.com/jeffreydwalter/ColReorderWithResize/issues/13) for insight on how it could be done.
  
  Reply
Poliano Martini says:

August 14, 2020 at 5:41 pm
Does it work with Bootstrap 4?

My DOM looks like this:
```
dom: "<'row'<'col-sm-12'f>>" +
     "<'row'<'col-sm-12'tr>>" +
     "<'row'<'col-sm-6'l><'col-sm-6'p>>"
```
Where do I insert the “R”?
Reply
1. Michael Ryvkin says:
  
  August 20, 2020 at 10:26 am
  Letter R just need to be present in the dom option, for example:
```
dom: "<'row'<'col-sm-12'f>>" +
     "<'row'<'col-sm-12'Rtr>>" +
     "<'row'<'col-sm-6'l><'col-sm-6'p>>"
```
  Reply
Devvishnu says:

September 3, 2020 at 4:58 am

Hi, I want to do resize only specific columns of table.

Reply
Dean DePue says:

April 29, 2021 at 1:13 pm

I have included the JS file with DataTables 1.10.15 but I get a JavaScript error that oApi not found. How do i get around this error? Fails on this line:

$.fn.dataTableExt.oApi.fnColReorder = function ( oSettings, iFrom, iTo, drop, invalidateRows )

Reply

Overview

Example

Allow column resizing only

You May Also Like

Michael Ryvkin

Comments

Leave a Reply Cancel reply