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.

Leave a 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.