JSFiddle - React, Tailwind, and code Playground

by SASSACB

HTML

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" />

<!-- Load javascript libraries. -->
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"> </script>

<div id="content"></div>

JavaScript

var MOUNTAINS = [
  {"name":"Mount Everest","height":8848,"country":"Nepal"},
  {"name":"Mount Rushmore","height":18,"country":"USA"}
];	


function buildTable(data) {
    var table = document.createElement("table");
    table.className="display";
    table.setAttribute("id", 'example');
    var thead = document.createElement("thead");
    var tbody = document.createElement("tbody");
    var headRow = document.createElement("tr");
    ["Name","Height","Country"].forEach(function(el) {
      var th=document.createElement("th");
      th.appendChild(document.createTextNode(el));
      headRow.appendChild(th);
    });
    thead.appendChild(headRow);
    table.appendChild(thead); 
    data.forEach(function(el) {
      var tr = document.createElement("tr");
      for (var o in el) {  
        var td = document.createElement("td");
        td.appendChild(document.createTextNode(el[o]))
        tr.appendChild(td);
      }
      tbody.appendChild(tr);  
    });
    table.appendChild(tbody);             
    return table;
}
window.onload=function() {
  document.getElementById("content").appendChild(buildTable(MOUNTAINS));
}

   $(document).ready(function() {
    $('#example').dataTable({
      "sPaginationType": "full_numbers"
    });
} );