JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
<script src="//cdn.datatables.net/plug-ins/1.13.4/sorting/natural.js"></script>
 <div class="table-responsive">

                    <table id="tabella-catalogo" class="table dt-responsive activate-select cell-border table-hover" style="width: 100%;">

                    <thead>
                        <tr>
		                 
                            
                            <th class=''>Seriale</th>
                            <th class=''>Codice</th>

					   </tr>

					</thead>
					
                    <tbody>
			  
				<tr>



                    <td> bil_14.000_10</td>

                    <td> 14.000</td>



  </tr>
			
				<tr>



                    <td> bil_14.000_9</td>

                    <td> 14.000</td>



  </tr>
			
				<tr>



                    <td> bil_14.000_8</td>

                    <td> 14.000</td>



  </tr>
			
				<tr>



                    <td> bil_14.000_7</td>

                    <td> 14.000</td>



  </tr>
			
				<tr>



                    <td> bil_14.000_6</td>

                    <td> 14.000</td>



  </tr>
			
				<tr>



                    <td> bil_14.000_5</td>

                    <td> 14.000</td>



  </tr>
			
				<tr>



                    <td> bil_14.000_4</td>

                    <td> 14.000</td>



  </tr>
			
				<tr>



                    <td> bil_14.000_3</td>

                    <td> 14.000</td>



  </tr>
			
				<tr>



                    <td> bil_14.000_2</td>

                    <td> 14.000</td>



  </tr>
			
				<tr>



                    <td> bil_14.000_1</td>

                    <td> 14.000</td>



  </tr>
						</tbody>
				</table>

</div>

JavaScript

$(document).ready(function() {

                
 
                


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

                        keys: true,
                        responsive: true,
                        select: true,
                        columnDefs: [
                            { type: 'natural', targets: 0 }
                        ],
                        'order': [[0, 'desc']],
                        "lengthMenu": [[10, 25, 50,500, 200000000000], [10, 25, 50,500, "TUTTO"]],                        
                        "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"
                                },

                        },

                });
                });