JSFiddle - React, Tailwind, and code Playground

HTML

<div class="table-responsive">
                            <table id="ciudadesDatatable" class="display" style="width:100%">
                                <thead>
                                    <tr>
                       <th>País</th>
                       <th>Departamento</th>
                                        <th>Ciudad</th>
                                        <th>Código</th>
                                        <th>Segmentada</th>
<th>Transportista</th>
                                        <th></th>
                             
                                                      
                                       
          
                                    </tr>
                                </thead>
                                
                            </table>
                        </div>

JavaScript

$(document).ready(function() {

      $.ajaxSetup({
    headers: {
    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
    });

    var table =   $('#ciudadesDatatable')
.on('processing.dt', function (e, settings, processing) {
   // $('#loader').css('display', 'none');
         if (processing) {

         $('body').LoadingOverlay("show", {
    image       : "",
   fontawesomeColor: "#ff8227",
    fontawesome : "fa fa-cog fa-spin"
});

     } else {
//         $(e.currentTarget).LoadingOverlay("hide", true);
$('body').LoadingOverlay("hide", true);
     }
    } )

    .DataTable({

     stateSave: true,
 //    "pageLength": 25,
//"sDom": '<"wrapper"lfptip>',
 /*

     "processing": true,
        "serverSide": true,
        "paging": true,
*/
      "processing": true,
            "serverSide": true,
    ajax: {

    url: './ciudades.ajax',
    type: 'POST',
     dataType : 'json',
 // dataSrc: '',

    },


 "columns": [
   {"data": "country"},
     {"data": "region"},
  {"data": "city"},
     
            { "data": "code" },
                       {"render" : function (data, type, row) {

if (row.segmentada==true) {
  return '<div class="form-group">  \
  <span class="switch switch-sm">\
    <input id='+row.id+' type="checkbox" class="switch" checked>\
    <label for='+row.id+'></label>\
  </span>\
</div>';
}else{
  return '<div class="form-group">  \
  <span class="switch switch-sm">\
    <input id='+row.id+' type="checkbox" class="switch">\
    <label for='+row.id+'></label>\
  </span>\
</div>';
}

            }
              },
  {"data": "trans"},
        ],

"columnDefs": [ 

   { targets: 0, type: 'locale-compare' },
   { targets: 1, type: 'locale-compare' },
   { targets: 2, type: 'locale-compare' },
   { targets: 3, type: 'locale-compare' },
   { targets: 4, type: 'locale-compare' },
{
    "targets": 6,
    className: 'dt-body-right',
    "data": "null",
    "render": function ( data, type, row, meta ) {
return '<td > <a...