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").dataTable({
             "aoColumnDefs": [{ 'bSortable': false, 'aTargets': [3] }],
             "bSort": true,
             "scrollY": 100,
             "scrollX": true,
             dom: 'Blfrtip',
             lengthMenu: [
                 [10, 25, 50, -1],
                 ['10 rows', '25 rows', '50 rows', 'Show all']
             ],
             buttons: [
                 'excelHtml5'
             ]
         });
     });
     
     
$('#tabledata').append(
"<thead><tr><th>No</th><th>Status</th><th>Speed</th><th>Refrence</th></tr></thead>"
    );

     for(i=0;i<10;i++){
        $('#tabledata').append( '<tr> <td>' + 'result1'+  i + '</td><td>' + 'result2'+  i + '</td><td>' + 'result3'+  i + '</td> </tr>' );
    }
     $('#tabledata').append(  '</table>' );
     
  var editor; // use a global for the submit and return data rendering in the examples
 
$(document).ready(function() {
    editor = new $.fn.dataTable.Editor( {
        ajax: "../php/staff.php",
        table: "#tabledata",
        fields: [ {
                label: "No",
                name: "No"
            }, {
                label: "Status",
                name: "Status"
            }, {
                label: "Speed",
                name: "Speed"
            }, {
                label: "Refrence",
                name: "Refrence"
            }
        ]
    } );
 
    // Activate an inline edit on click of a table cell
    $('#example').on( 'click', 'tbody td:not(:first-child)', function (e) {
        editor.inline( this );
    } );
 
    $('#tabledata').DataTable( {
        dom: "Bfrtip",
        ajax: "../php/staff.php",
        columns: [
            {
                data: null,
                defaultContent: '',
                className: 'select-checkbox',
                orderable: false
            },
            { data: "No" },
            { data: "Status" },
            { data: "Speed" },
            { data: "Refrence" },
...