JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/tabletools/2.2.4/css/dataTables.tableTools.css">
<script src="https://cdn.datatables.net/tabletools/2.2.4/js/dataTables.tableTools.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/plug-ins/1.10.7/integration/bootstrap/3/dataTables.bootstrap.css">
<script src="https://cdn.datatables.net/plug-ins/1.10.7/integration/bootstrap/3/dataTables.bootstrap.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="row">
<div class="col-md-12">
<div class="box box-success">
<div class="box-header">
<h3 class="box-title">Liste des clients</h3><span id="compteur" class="label bg-green"></span>
<div class="box-tools pull-right">
<button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
</div>
</div>
<div class="box-body collapsed-box">
<table id="table_client" class="table table-bordered table-hover">
<thead>
<tr>
<th>ID Client</th>
<th>Nom Client</th>
<th>Ville</th>
<th>Prestations en cours</th>
<th>Date début</th>
<th>Test</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
...
JavaScript
$(function() {
var table_client = $('#table_client').DataTable({
"bPaginate": true,
"bLengthChange": true,
"bFilter": true,
"bSort": true,
"bInfo": true,
"bAutoWidth": true,
"iDisplayLength": 5,
"lengthMenu": [[5, 10, 25, 50, -1], [5, 10, 25, 50, "Tous"]],
"order": [[1, "asc"]]
});
});