JSFiddle - React, Tailwind, and code Playground

HTML

<div id="table">
</div>

JavaScript

var tableData = {
  cellValues: [
    ['c1', 'c2', 'c3', 'c4'],
    ['DoubleType', 'longType', 'DoubleType', 'longType'],
    ['Bob', 'Dave', 'Bob', 'Dave']
  ]
}

var headerData = tableData.cellValues.shift();
var bodyData = tableData.cellValues;

function buildCells(data, type) {
  return {
    header: '<th>' + data.join('</th><th>') + '</th>',
    row: '<td>' + data.join('</td><td>') + '</td>'
  }[type];
}

function buildRow(data) {
  return ['<tr>', buildCells(data, 'row'), '</tr>'].join('');
}

var rows = bodyData.reduce(function(p, c) {
  return p.concat(buildRow(c));
}, []);

var header = ['<thead>', buildCells(headerData, 'header'), '</thead>'].join('');
var body = ['<tbody>', rows.join(''), '</tbody>'].join('');

var table = ['<table>', header, body, '</table>'].join('');

document.getElementById('table').insertAdjacentHTML('beforeend', table);