jQuery DataTables: Column reordering and resizing

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

You May Also Like

Comments

    1. Hi mik, you can catch it like this:

       Self.oTable.on('column-resize.dt.mouseup', function(event, oSettings) { // do something here. });
  1. 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+'' )
    } );
    } );
    } );
    
  2. 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+” )
    } );
    } );

  3. 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+'' )
            } );
        } );
    } );
    

  4. 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

          1. 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?

              1. 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.

  5. 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.

  6. 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.

  7. 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%" } 
                    ]
      });
      });
    
    1. 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.

Leave a Reply to youlanda Cancel reply

You may use simple HTML to add links or lists to your comment. Also use <pre><code class="language-*">...</code></pre> to mark up code snippets. We support language-js, language-markup and language-css for comments.
(Optional)

This site uses Akismet to reduce spam. Learn how your comment data is processed.