JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdn.datatables.net/v/dt/jq-2.2.3/jszip-2.5.0/pdfmake-0.1.18/dt-1.10.12/b-1.2.2/b-colvis-1.2.2/b-html5-1.2.2/b-print-1.2.2/fc-3.2.2/datatables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/v/dt/jq-2.2.3/jszip-2.5.0/pdfmake-0.1.18/dt-1.10.12/b-1.2.2/b-colvis-1.2.2/b-html5-1.2.2/b-print-1.2.2/fc-3.2.2/datatables.min.css">
<script src="https://use.fontawesome.com/8b82053d2d.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<table id="numberWithLeading0">
<thead>
<tr>
<th>Carrier Code <span class="fa fa-question-circle datatable-th-info js-datatable-info-tooltip" data-html="true" data-delay='{"show":"500", "hide":"1500"}' title="<b>Friendlyname:</b> Description"></span></th>
<th>Flight</th>
<th>Arrival Date</th>
<th>Shipment</th>
<th>Site</th>
<th>Error Code</th>
</tr>
</thead>
<tbody>
<tr>
<td> 5X</td>
<td> 017 </td>
<td> 2016-08-11</td>
<td>AT2510MFHD7</td>
<td>04196</td>
<td>003</td>
</tr>
<tr>
<td> 5X</td>
<td> 018 </td>
<td> 2016-08-11</td>
<td>AT2510MFHD7</td>
<td>04196</td>
<td>019</td>
</tr>
</tbody>
</table>
JavaScript
/*
Datatable
*/
dataTableOptions = {
responsive: true
};
_dtb = $('#numberWithLeading0').DataTable(dataTableOptions);
_colVisOpt = {};
_colVisOpt.extend = 'colvis';
colvis = new $.fn.dataTable.Buttons(_dtb, {
buttons: [_colVisOpt]
});
$('#numberWithLeading0').parents('.dataTables_wrapper').children('.dataTables_filter').before(colvis.container());
// Datatable Buttons
var datatableExportButtons = new $.fn.dataTable.Buttons(_dtb, {
buttons: [
{
extend: 'copy'
},
{
extend: 'csv'
},
{
extend: 'excel'
},
{
extend: 'print'
},
{
extend: 'pdf'
}
]
});
$('#numberWithLeading0').dataTable().fnAdjustColumnSizing(false);
$('#numberWithLeading0').attr('width', '100%');
$(document.getElementsByClassName('js-datatable-info-tooltip')).tooltip({
trigger: 'hover',
placement: 'top',
container: 'body'
});