JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<link rel="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" type="text/css"/>
<table class="table table-condensed tableDesign tablePagination">
<thead>
<tr >
<th>File Name</th>
<th>TimeStamp</th>
<th>Total NON DND MSISDN COUNT</th>
<th>Total DND MSISDN COUNT</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>test1.csv</td>
<td>11/10/17 11:22:45</td>
<td>3
<a class="downloadCampaign" href="">
<u>Download </u>
</a>
</td>
<td>2 <a class="downloadCampaign" href="">
<u>Download </u>
</a></td>
<td>Completed</td>
</tr>
<tr>
<td>abc.csv</td>
<td>12/10/17 11:22:45</td>
<td>3 <a class="downloadCampaign" href="">
<u>Download </u>
</a></td>
<td>2 <a class="downloadCampaign" href="">
<u>Download </u>
</a></td>
<td>Completed</td>
...
CSS
.dataTables_filter, .dataTables_paginate {
display: none;
}
.dataTables_length {
position: absolute;
right: 100px;
padding: 10px;
text-aling:right !important
}
.dataTables_Header {
position: fixed !important
}
.dataTables_info{
position: absolute;
right: 0px;
width:100px;
}
JavaScript
$(document).ready(function (){
var table = $('.tablePagination').DataTable({
/* "sDom": '<"top"i>rt<"bottom"flp><"clear">',*/
"bSort": false,
"sDom": 'Rfrtlip',
"oLanguage": {
"sLengthMenu": "_MENU_",
"sInfo": "View _START_ - _END_ of _TOTAL_",
"sInfoEmpty": "No Entries"
}
});
});