JSFiddle - React, Tailwind, and code Playground

by mcompte

HTML

<div id="thebody">
</div>

JavaScript

data = '[["Person A", "Person B", "Person C", "Person D"], ["Wed Jun 29 12:30", "Thu Jun 30 13:45", "Thu Jun 30 13:46", "Fri Jul 1 15:40"]]';
function createTable(inputData) {
  //Checks for error - if so, does not output table
  if (inputData == "ERROR") {
    document.getElementById('errorMessage').innerHTML = "Error: Unable to find sport";
  } else {
  	var tableData = JSON.parse(inputData);
  	var table = document.createElement('table');
    table.setAttribute("id", "table");
    var tableBody = document.createElement('tbody');
    var rows = [];
    // use the first element in the array to build table rows
    header = tableData.pop(0);
    header.forEach(function(headerData) {
    	var row = document.createElement('tr');
      var cell = document.createElement('td');
      cell.appendChild(document.createTextNode(headerData));
      row.appendChild(cell);
    	rows[rows.length] = row;
    });
    // now go through the rest to update the rows array
    tableData.forEach(function(rowData) {
    	var numRow = 0;
    	rowData.forEach(function(cellData) {
      	var cell = document.createElement('td');
        cell.appendChild(document.createTextNode(cellData));
        rows[numRow].insertBefore(cell, rows[numRow].firstChild);
        ++numRow;
      });
    });
    // now append those childs to the tableBody
    rows.forEach(function(row) {
    	tableBody.appendChild(row);
    });
    table.appendChild(tableBody);
    document.getElementById('thebody').appendChild(table);
  }
 }
createTable(data);