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>
<hr>
<table id="tabella-catalogo" class="table dt-responsive activate-select cell-border table-hover" style="width: 100%;">
<thead>
<tr>
<!-- <th class=''><i class="fas fa-arrow-circle-right"></i>Scaffale</th>
<th class=''><i class="fas fa-file-signature"></i> <i class="fas fa-user"></i> Campata</th>
<th class=''><i class="fas fa-arrow-circle-right"></i>Piano</th>-->
<th class=''><i class="fas fa-arrow-circle-right"></i>Locazione</th>
<th class=''><i class="fas fa-arrow-circle-right"></i>Macchina</th>
<th class=''><i class="fas fa-arrow-circle-right"></i>Cliente</th>
</tr>
</thead>
<tbody>
<tr>
<!-- <td> PIAZZALE 1</td>
<td> T</td>
<td> 0</td> -->
<!--<td>4049</td>-->
<td>PIAZZALE 1-T-0-loc_PIAZZALE 1_1</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<!-- <td> PIAZZALE 1</td>
<td> T</td>
<td> 0</td> -->
<!--<td>4050</td>-->
<td>PIAZZALE 1-T-0-loc_PIAZZALE 1_2</td>
<td>
</td>
<td>
</td>
...
JavaScript
$(function () {
/*
$("#example1").DataTable({
"responsive": true, "lengthChange": false, "autoWidth": false,
"buttons": ["copy", "csv", "excel", "pdf", "print", "colvis"]
}).buttons().container().appendTo('#example1_wrapper .col-md-6:eq(0)');
*/
$('#tabella-catalogo').DataTable({
"paging": true,
"lengthChange": false,
"searching": true,
"ordering": true,
"info": true,
"autoWidth": false,
"responsive": true,
columnDefs: [
{
target: 0,
type: '',
},
],
});
});