JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>
<script src="https://cdn.datatables.net/2.3.0/js/dataTables.min.js"></script>
<script src="https://cdn.datatables.net/2.3.0/js/dataTables.bootstrap5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/3.2.3/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/3.2.3/js/buttons.bootstrap5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/3.2.3/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/datetime/1.5.5/js/dataTables.dateTime.min.js"></script>

            <div class="page-content">
                <section class="row">
                    <div class="col-12 col-lg-12">

                        
<!-- 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>
            <h5 class="mb-0 text-primary">

                Movimenti

                Ricerca

            </h5>

        </div>
        <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');

        $("#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");
            }
        });



    });