JSFiddle - React, Tailwind, and code Playground

by ChrisStanyon

HTML

<table id = "PROGWandH" class = "PROGWandH table table-striped">
   <!-- here goes our data! -->
</table>

JavaScript

const arr = [ { date: "04/11", weight: "18.2", height: "108.0" },{ date: "05/12", weight: "18.2", height: "108.0" },{ date: "06/20", weight: "18.2", height: "109.0" },{ date: "10/15", weight: "19.2", height: "111.5" },{ date: "11/14", weight: "19.3", height: "111.5" },{ date: "12/12", weight: "19.8", height: "112.0" },{ date: "01/13", weight: "20.2", height: "113.0" },{ date: "02/19", weight: "", height: "113.5" } ];

const rows = Object.keys(arr[0]).reduce((row, pr) => (row += `<tr><th>${pr}</th>${arr.reduce((cells, ob) => (cells += `<td>${ob[pr]}</td>`, cells), '')}</tr>`, row), '');
console.log(rows)
                           document.querySelector('.PROGWandH').insertAdjacentHTML('beforeend', rows);