JSFiddle - React, Tailwind, and code Playground

HTML

<link
  href="https://cdn.datatables.net/2.3.0/css/dataTables.bootstrap5.min.css"
  rel="stylesheet"
  integrity="sha384-xkQqWcEusZ1bIXoKJoItkNbJJ1LG5QwR5InghOwFLsCoEkGcNLYjE0O83wWruaK9"
  crossorigin="anonymous"
/>
<link
  href="https://cdn.datatables.net/buttons/3.2.3/css/buttons.bootstrap5.min.css"
  rel="stylesheet"
  integrity="sha384-DJhypeLg79qWALC844KORuTtaJcH45J+36wNgzj4d1Kv1vt2PtRuV2eVmdkVmf/U"
  crossorigin="anonymous"
/>

<link
  href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css"
  rel="stylesheet"
/>
<link
  rel="stylesheet"
  href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"
/>

<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css"
  integrity="sha512-aEe/ZxePawj0+G2R+AaIxgrQuKT68I28qh+wgLrcAJOz3rxCP+TwrK5SPN+E5I+1IQjNtcfvb96HDagwrKRdBw=="
  crossorigin="anonymous"
  referrerpolicy="no-referrer"
/>

<style type="text/css">
  .dataTables_filter {
    margin-bottom: 2em;
  }
</style>

<!-- Page Header-->
<div class="card">
  <div class="card-header">
    <h4>Movimentazioni Materiali</h4>
  </div>
  <div class="card-body">
    <div class="card-title d-flex align-items-center">
      <div><i class="bx bxs-user me-1 font-22 text-primary\"></i></div>
    </div>
    <div class="table-responsive">
      <div class="table-responsive">
        <table
          id="tabella-catalogo"
          class="table table-striped activate-select cell-border table-hover"
        >
          <thead>
            <tr class="mt-2">
              <th colspan="3" class="border text-center">Locazione attuale</th>
              <th colspan="3" class="border text-center">
                Locazione Movimentazione
              </th>
              <th colspan="2" class="border text-center">Dati Materiale</th>
              <th colspan="2" class="border text-center">Fase</th>
              <th colspan="2" class="border text-center"></th>
            </tr>

...

JavaScript

$(document).ready(function() {
				//$.fn.dataTable.moment('DD-MM-YYYY HH:ii:ss');
        DataTable.datetime('DD-MM-YYYY HH:mm:ss');

        $("#tabella-catalogo").DataTable({


            dom: 'Blfrtip',
            buttons: [{
                    extend: 'excelHtml5',
                    autoFilter: true,
                    sheetName: 'Exported data',
                    messageTop: 'Movimenti Magazzino Viteria'

                },

            ],

            order: [
                [11, 'desc'],

            ],
            keys: true,
            responsive: true,
            select: true,
            "language": {
                "sEmptyTable": "Nessun dato presente nella tabella",
                "sInfo": "Vista da _START_ a _END_ di _TOTAL_ Record",
                "sInfoEmpty": "Vista da 0 a 0 di 0 Record",
                "sInfoFiltered": "(filtrati da _MAX_ Record totali)",
                "sInfoPostFix": "",
                "sInfoThousands": ".",
                "sLengthMenu": "Mostra _MENU_ Record",
                "sLoadingRecords": "Caricamento...",
                "sProcessing": "Elaborazione...",
                "sSearch": "Cerca:",
                "sZeroRecords": "Nessun risultato.",
                "oPaginate": {
                    "sFirst": "Inizio",
                    "sPrevious": "Precedente",
                    "sNext": "Successivo",
                    "sLast": "Fine"
                },
                "paginate": {
                    "previous": "<i class='mdi mdi-chevron-left'>",
                    "next": "<i class='mdi mdi-chevron-right'>"
                }
            },
            "drawCallback": function() {
                $(".dataTables_paginate > .pagination").addClass("pagination-rounded");
            }
        });




    });