JSFiddle - React, Tailwind, and code Playground
HTML
<div id="container"></div>
JavaScript
var dataset = [ { "field1":"val1", "field2":"val2", "field3":"val3" }, { "field1":"val4", "field2":"val5", "field3":"val6", "field4":"val7" } ] ;
function addHeaders(table, keys) {
var row = table.insertRow();
for( var i = 0; i < keys.length; i++ ) {
var cell = row.insertCell();
cell.appendChild(document.createTextNode(keys[i]));
}
}
var max_keys = 0;
var max_idx = 0;
for( var i = 0; i < dataset.length; i++ ) {
var child = dataset[i];
cur_keys = Object.keys(child).length;
if (cur_keys > max_keys) {
max_keys = cur_keys;
max_idx = i;
}
}
var table = document.createElement('table');
addHeaders(table, Object.keys(dataset[max_idx]));
for( var i = 0; i < dataset.length; i++ ) {
var child = dataset[i];
var row = table.insertRow();
Object.keys(child).forEach(function(k) {
var cell = row.insertCell();
cell.appendChild(document.createTextNode(child[k]));
})
}
document.getElementById('container').appendChild(table);