JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/jquery-1.12.3.js"></script>
<script src="//code.jquery.com/jquery-1.12.3.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.2/js/dataTables.buttons.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
<script src="//cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js"></script>
<script src="//cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js"></script>
<script src="//cdn.datatables.net/buttons/1.2.2/js/buttons.html5.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css">
<table id="tabledata" class="display nowrap cell-border" style="width:100%;" cellspacing="0"></table>

JavaScript

$(document).ready(function () {
$('#tabledata').append(
"<thead><tr><th>No</th><th>Status</th><th>Speed</th><th>Refrence</th></tr></thead><tbody>"
    );

     for(i=0;i<200;i++){
        $('#tabledata').append( '<tr> <td>' + 'result1'+  i + '</td><td>' + 'result2'+  i + '</td><td>' + 'result3'+  i + '</td><td>' + 'result4'+ i +'</td> </tr>' );
    }

 var myTable = $('#tabledata').DataTable();

 $('#tabledata').on('click', 'tbody tr', function () {
 myTable.row(this).edit({
buttons: [
{ label: 'Cancel', fn: function () { this.close(); } },
 ],                               
});
});
                        
       
     });
     
document.title="Test Page";