JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdn.datatables.net/1.10.0/js/jquery.dataTables.js"></script>
<div>
  <table id="fooTable">
    <thead>
	  <tr>
		<th>Col0</th>
		<th>Col1</th>
		<th>Col2</th>
        <th>Col3</th>
        <th>Col4</th>
      </tr>
    </thead>
    <tbody>
	</tbody>
  </table>
</div>
<div>
    <button type="button" id="newLine">New Line</button>
    <button type="button" id="checkValues">Check Values</button>
</div>

JavaScript

/* Test Hidden Column */
    var oFooTable = $('#fooTable').DataTable({
        "bInfo" : false,
        "bFilter": false,
        "bDeferRender": false,
        "aLengthMenu": [
            [25, 50, 100, 200, -1],
            [25, 50, 100, 200, "All"]
        ], 
        "iDisplayLength" : -1 ,
        "aoColumnDefs": [
            { "bSortable": false, "aTargets": [ 4 ] },
            { "bVisible": false, "aTargets": [ 2,3 ] }
        ],
        'paging': false        
    });
    
    $('#newLine').click(function() {
        
        alert('DEBUGnewLine');
        oFooTable.row.add( [
                'Field0',
                'Field1',
                'Field2',
                '',
                'Field4' 
        ]).draw();
    });
        
    $('#checkValues').click(function() {
        
         alert('DEBUGcheckValues');
         for(i=0;i<10;i++){
             alert('i='+i+' val='+oFooTable.cell(0,i).data());
         }        
                
    });