JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.8/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.10.8/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.0.1/js/dataTables.buttons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.js"></script>
<script src="https://cdn.datatables.net/buttons/1.0.1/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.0.1/js/buttons.flash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.0.1/css/buttons.dataTables.min.css">
<table id="numberWithLeading0">
<thead>
<tr>
<th>Name</th>
<th>Identification</th>
</tr>
</thead>
<tbody>
<tr>
<td>
raoul
</td>
<td>
21458P
</td>
</tr>
<tr>
<td>
michel
</td>
<td>
00255
</td>
</tr>
</tbody>
</table>
CSS
td{text-align:center;}
JavaScript
var table = $('#numberWithLeading0').DataTable({
dom : 'Bfrtlip',
buttons: [
{
extend: 'excel',
exportOptions: {
orthogonal: 'sort'
}
}
],
columnDefs: [{
targets:[1],
render: function(data, type, row, meta){
if(type === 'sort'){
//data = ' ' + data ;
return "\u200C" + data ;
}
return data ;
}
}]
});