JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.10/css/jquery.dataTables.min.css">
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>
<script src="https://rawgit.com/maca88/datatables.plugins/master/Source/dataTables.colResize.js"></script>
<table class="dataTables" id='example'></table>
JavaScript
$(document).ready(function() {
var columns = [{ "title": "No.",
"className" : "dt-body-right",
"orderable": "true",
"data": "counter"
},
{ "title": "Timestamp",
"orderable": "true",
"data": "timestamp"
},
{ "title": "Source",
"type": "ip-address",
"orderable": "true",
"data": "srcIP"
},
{ "title": "Destination",
"type": "ip-address",
"orderable": "true",
"data": "dstIP"
},
{ "title": "Protocol",
"orderable": "true",
"data": "protocol"
},
{ "title": "Length",
"orderable": "true",
"className" : "dt-body-right",
"data": "length"
},
{ "title": "Information",
"orderable": "true",
"data": "info"
},
{ "title": "Message",
"orderable": "true",
"data" : "message"
},
{
"title": "Timestamp",
"orderable": "true",
"data": "timestamp"
},
{
"title": "Source",
"type": "ip-address",
"orderable": "true",
...