JSFiddle - React, Tailwind, and code Playground

HTML

<table>
        <thead>
            <th>data</th>
            <th>pressĂŁo</th>
            <th>frequencia</th>
            <th></th>
        </thead>
        <tbody></tbody>
    </table>
    <template>
        <tr>
            <td>#[date]</td>
            <td>#[sis]:#[dia]</td>
            <td>#[freq]</td>
            <td>#[id]</td>
        </tr>
    </template>

CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif;
}
body {
    display: flex;
    flex-direction: column;
    align-items: center;
}
table {
    width: 100%;
    max-width: 400px;
}
table th {
    text-align: left;
    background-color: #000;
    color: #fff;
}
table tr:nth-child(even) {
    background-color: #ccc;
}

JavaScript

function fillTable(objects) {
    let tbody = document.querySelector('tbody');
    let html = document.querySelector('template').innerHTML;
    let parser = new DOMParser();
    objects.forEach(object => {
        let string = Object.entries(object).reduce((str, key) => {
            return str.replace(`#[${key[0]}]`, key[1]);
        }, html);
        console.log(string);
        let node = parser.parseFromString(string, 'text/html').body.firstChild
        console.log(node);
        tbody.appendChild(node);
    });
}
addEventListener('DOMContentLoaded', async () => {
    let response = await fetch('https://my-api-g8he.onrender.com/medidas');
    let json = await response.json();
    let objects = json.data;
    fillTable(objects);
});