JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <thead>
        <tr>
            <th>Nombre</th>
            <th>Apellido</th>
            <th>Edad</th>
            <th>País</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td id="f1c1"></td>
            <td id="f1c2"></td>
            <td id="f1c3"></td>
            <td id="f1c4"></td>
        </tr>
        <tr>
            <td id="f2c1"></td>
            <td id="f2c2"></td>
            <td id="f2c3"></td>
            <td id="f2c4"></td>
        </tr>
        <tr>
            <td id="f3c1"></td>
            <td id="f3c2"></td>
            <td id="f3c3"></td>
            <td id="f3c4"></td>
        </tr>
    </tbody>
</table>

CSS

table *{
    border: 1px solid;
}

JavaScript

let datos = [["Juan", "Pérez", 28, "Panamá"], ["María", "Galindo", 54, "Costa Rica"], ["Susan", "Ortiz", 41, "Holanda"]];

for (let i = 0, l = datos.length; i < l; i++){
  	for (let j = 0, m = datos[i].length; j < m; j++){
  			let id = "#f" + (i + 1) + "c" + (j + 1);
    		document.querySelector(id).textContent = datos[i][j];
  	}
}