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

JavaScript

$(document).ready(function() {
				$.fn.dataTable.moment('DD-MM-YYYY HH:ii:ss');
        //DataTable.datetime('DD-MM-YYYY HH:ii: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");
            }
        });




    });