JSFiddle - React, Tailwind, and code Playground

by Udhay

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="myTable" border='1' width="100%">
  <thead>
    <tr>
        <th width="50%">Name</th>
         <th width="50%">Actions</th>
    </tr>
  </thead>
  <tbody>
    
  </tbody>
</table>

JavaScript

var myCollection = [{name: 'row 1', action: 'edit 1'},
                    {name: 'row 2', action: 'edit 2'},
                    {name: 'row 3', action: 'edit 3'},
                    {name: 'row 4', action: 'edit 4'},
                    {name: 'row 5', action: 'edit 5'},
                    {name: 'row 6', action: 'edit 6'},
                    {name: 'row 7', action: 'edit 7'},
                    {name: 'row 8', action: 'edit 8'},
                    {name: 'row 9', action: 'edit 9'},
                    {name: 'row 10', action: 'edit 10'},
                    {name: 'row 11', action: 'edit 11'},
                    {name: 'row 12', action: 'edit 12'},
                    {name: 'row 13', action: 'edit 13'},
                    {name: 'row 14', action: 'edit 14'}
                    ];
var trHTML = '';
                
$.each(myCollection, function (i, item) {

  trHTML += '<tr><td>' + myCollection[i].name + '</td><td>' + myCollection[i].action + '</td></tr>';
});

$('#myTable tbody').append(trHTML);
        
        
console.log(myCollection);