jQuery DataTables: Column reordering and resizing


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


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


  1. ColReorder position not changed when drag columns one place to another pokace

    $(document).ready(function () {

      var page_load = true;

      var new_array = [];

      var table = $(‘#example’).DataTable({

        “ajax”: {

          “url”: “https://gyrocode.github.io/files/jquery-datatables/arrays.json”,

          “type”: “GET”,

          “dataType”: “json”,

          “complete”: function(res) {

              console.log(“api complete “);

              new_array.map(function(v, i) {

                $(“#example thead tr th”).eq(i).width(v);


              page_load = false;



        ‘dom’: ‘Rlfrtip’,

        // ‘scrollX’: true,

        ‘stateSave’: true,

        ‘colReorder’: {

          ‘allowReorder’: true


        stateSaveCallback: function (settings, data) {

          if(page_load == false) {

            var columns = data[‘columns’];

            $.each(columns, function (index, el) {

              data[‘columns’][index][‘width’] = $(“#example thead tr th”).eq(index).width();




              “url”: “http://blakbit.com/dt_test.php?id=example”,

              “data”: data,

              “dataType”: “json”,

              “type”: “POST”,

              “success”: function () { }




        stateLoadCallback: function (settings, callback) {

          new_array = [];


            url: ‘http://blakbit.com/dt_test.php?id=example&load’,

            dataType: ‘json’,

            //async : false,

            success: function (json) {

              console.log(“json “, json);

              var table_columns = json.columns;

              // let load_index = 0;

              for(var i = 0; i < table_columns.length; i++) {

                if(table_columns[i].visible == true) {

                    var width = table_columns[i].width;

                    if(width) {











  2. hi,

    I am getting the following errors

    Uncaught TypeError: Cannot read properties of null (reading ‘dt’)

        at ColReorder._fnStateSave (ColReorderWithResize.js:903)

        at S.fn.init.<anonymous> (ColReorderWithResize.js:773)

        at jquery.dataTables.js:6700

        at Function.map (jquery-3.6.0.min.js:2)

        at _fnCallbackFire (jquery.dataTables.js:6699)

        at _fnSaveState (jquery.dataTables.js:6381)

        at _Api.<anonymous> (jquery.dataTables.js:8761)

        at _Api.iterator (jquery.dataTables.js:7091)

        at _Api.<anonymous> (jquery.dataTables.js:8750)

        at _Api.visible (jquery.dataTables.js:7258)

Leave a Reply


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