JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.1.0/js/dataTables.buttons.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.10/css/dataTables.bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script>

<table id="example" class="display table table-bordered table-striped responsive" cellspacing="0" width="100%">
    <thead>
        <tr>
                    <th>ARRIVO</th>
                    <th class="targetHeaderCell">ITEM</th>
        </tr>
    </thead>
   
    <tbody>
                      <tr>

                  <td>18/12/2021 08:00 </td>
                    <td>MARIO ROSSI</td>
                  </tr>
                                    <tr>

                  <td>18/12/2021 08:00 </td>
                    <td >PAOLA BIANCHI</td>
                  </tr>
                                    <tr>

                  <td>18/12/2021 07:00 </td>
                    <td >ANNA VENTURA</td>
                  </tr>
                                    <tr>

                  <td>18/12/2021 01:00 </td>
                    <td >GIOVANNA VERCHI</td>
                  </tr>
                                    
       
    </tbody>
</table>

JavaScript

$(document).ready(function (){
  
  $('#example thead tr th').on("click", function(event) {
  if ($(event.target).is("button")) {
		table.column(0).orderable(false).draw();//dummy to disable sorting
  }

});


 

var table = $('#example').DataTable({
   
    stateSave: false,
    

      paging: true,
      responsive: true,

  initComplete: function() {
    this.api().columns([0]).every(function() {
      var column = this;
      var select = $('<select class="selectpicker" data-show-content="false" data-none-selected-text="" ><option value="" >Tutto</option></select>')
        .appendTo($(column.header()).empty())
        .on('changed.bs.select', function(e) {
          var val = $(this).val();
          var fVal = val.join("|")
          column
            .search(fVal, true, false)
            .draw();
        }); //select

      column.data().unique().sort().each(function(d, j) {
        select.append('<option value="' + d + '">' + d + '</option>')
      }); //column.data
    }); //this.api
  } //initComplete
});
    

});