JSFiddle - React, Tailwind, and code Playground

HTML

<table>
  <tr data-id="1">
    <td>a</td>
    <td></td>
    <td></td>
  </tr>
</table>

SCSS

table {
  border: 1px solid #fff;
  
  td {
    border: 1px solid #fff;  
  }
}

JavaScript

var mr_cools_data = [{
    "main": {
        "sub": [],
        "tittle": "water",
        "start value": "21",
        "stop value": "45",
        "status": "",
        "accumulated": "",
        "comment": ""
    }
}]

$("tr[data-id=1] > td:nth-child(1)").text(mr_cools_data[0].main['tittle'])

$("tr[data-id=1] > td:nth-child(2)").text(mr_cools_data[0].main['start value'])

$("tr[data-id=1] > td:nth-child(3)").text(mr_cools_data[0].main['stop value'])