JSFiddle - React, Tailwind, and code Playground

HTML

<!--BOOTSTRAP -->
        <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">       
        <script type="text/javascript" charset="utf-8" src="https://cdn.datatables.net/1.10.10/js/dataTables.bootstrap.min.js"></script>
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.10/css/dataTables.bootstrap.min.css">

        <!-- DATATABLE -->
        <script type="text/javascript" charset="utf-8" src="//code.jquery.com/jquery-1.12.0.min.js"></script>
        <script type="text/javascript" charset="utf-8" src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>
            
        <title>Riassunto prenotazioni utente</title>

    <body>
        <div>
            <section>
                <h1>DataTables example: Ajax sourced data</h1>
                <table id="prenotazioni" class="table table-striped table-bordered">
                    <thead>
                        <tr>
                           <th>Film</th>
                            <th>Genre</th>
                            <th>Date</th>
                            <th>Time</th>
                            <th>TicketNumber</th>
                            <th>Price</th>
                        </tr>
                    </thead>
                    <tfoot>
                        <tr>
                            <th>Film</th>
                            <th>Genre</th>
                            <th>Date</th>
                            <th>Time</th>
                            <th>TicketNumber</th>
                            <th>Price</th>
                        </tr>
                    </tfoot>
                </table>
            </section>
        </div>	
    </body>
</html>

JavaScript

$(document).ready(function () {
                $('#prenotazioni').DataTable({
                    "processing": true,
                    "serverSide": true,
                    "sAjaxSource": "../UserCheckoutTableServlet",
                    "columns": [
                        {"data": "film"},
                        {"data": "genre"},
                        {"data": "date"},
                        {"data": "localTIme"},
                        {"data": "ticketNumber"},
                        {"data": "price"}
                    ]
                });
            });
            
            
            
            [{
        "film": "The Avengers",
        "genre": "Action",
        "date": {
            "year": 2016,
            "month": 2,
            "day": 11
        },
        "localTime": {
            "time": {
                "hour": 17,
                "minute": 57,
                "second": 0,
                "nano": 0
            }
        },
        "ticketNumber": 1,
        "price": 8.5
    }]