JSFiddle - React, Tailwind, and code Playground

by VVetya

CSS

table { border-collapse: collapse; }
tr { border: 1px solid #dfdfdf; }
th, td { padding: 2px 5px 2px 5px;}

JavaScript

let data = [
  ['Title', 'Artist', 'Duration', 'Created'],
  ['hello', 'me', '2', '2019'],
  ['ola', 'me', '3', '2018'],
  ['Bob', 'them', '4.3', '2006']
];

function getCells(data, type) {
  return data.map(cell => '<${type}>${cell}</${type}>').join('');
}

function createBody(data) {
  return data.map(row => '<tr>${getCells(row, 'td')}</tr>').join('');
}

function createTable(data) {
  const [headings, ...rows] = data;
  return '
    <table>
      <thead>${getCells(headings, 'th')}</thead>
      <tbody>${createBody(rows)}</tbody>
    </table>
  ';
}

document.body.insertAdjacentHTML('beforeend', createTable(data));