JSFiddle - React, Tailwind, and code Playground

by Artem

CSS

table  { border-collapse: collapse; }
  td, th { border: 1px solid black; padding: 3px 8px; }
  th     { text-align: left; }

JavaScript

var MOUNTAINS = [
  {name: "Kilimanjaro", height: 5895, country: "Tanzania"},
  {name: "Everest", height: 8848, country: "Nepal"},
  {name: "Mount Fuji", height: 3776, country: "Japan"},
  {name: "Mont Blanc", height: 4808, country: "Italy/France"},
  {name: "Vaalserberg", height: 323, country: "Netherlands"},
  {name: "Denali", height: 6168, country: "United States"},
  {name: "Popocatepetl", height: 5465, country: "Mexico"}
];

  function buildTable(data) {
    var table = document.createElement('table');
    var tr = document.createElement('tr'),
    		td = document.createElement('td');
    Object.keys(data[0]).forEach(function(el){
    	var th = document.createElement('th');
      th.textContent = el;
      tr.appendChild(th);
    });
    table.appendChild(tr);
    for(var i = data.length; i--;){
    	tr = document.createElement('tr');
			for(var j in data[i]){
      	td = document.createElement('td');
        td.textContent = data[i][j];
        tr.appendChild(td);
      }
      table.appendChild(tr);
    }
    return table;
  }

  document.body.appendChild(buildTable(MOUNTAINS));