JSFiddle - React, Tailwind, and code Playground

HTML

<table class="tg" id="table">
  <thead>
      <tr>
        <th class="tg-031e">FREQ</th>
        <th class="tg-031e">ITU</th>
        <th class="tg-031e">Country</th>
        <th class="tg-031e">PI</th>
        <th class="tg-031e">PS</th>
        <th class="tg-031e">Staion Name</th>
        <th class="tg-031e">PROP</th>
        <th class="tg-031e">TX Power</th>
        <th class="tg-031e">TX Location</th>
        <th class="tg-031e">Distance</th>
      </tr>
  </thead>
  <tbody>
  </tbody>
</table>

CSS

.tg  {border-collapse:collapse;border-spacing:0;}
.tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}

JavaScript

var news = [{
    freq: 92.0,
    itu: 'TUR',
    country: 1,
    pi: 3201,
    ps: 'TRT-FM_92.0',
    sn: 'TRT FM',
    prop: 'E Skip',
    txpower: 30,
    txloc: 'Trabzon',
    dist: '2200 KM',
},{
    freq: 90.0,
    itu: 'TUR',
    country: 2,
    pi: 3201,
    ps: 'TRT-FM_92.0',
    sn: 'TRT FM',
    prop: 'E Skip',
    txpower: 30,
    txloc: 'Trabzon',
    dist: '2200 KM',
}];

var countries = {
    1: {
        name: 'Turkey'   
    },
    2: {
        name: 'Slovenia'   
    }
}

function drawTable() {
    var table = document.querySelector('#table'),
        tbody = [];
    for(var i = 0, len = news.length; i < len; i++) {
        var n = news[i];
        tbody.push(
            '<td>' +
            [n.freq, n.itu, countries[n.country].name, n.pi, n.ps, n.sn, n.prop, n.txpower, n.txloc, n.dist].join('</td><td>') + 
            '</td>'
        );
    }
    table.querySelector('tbody').innerHTML = '<tr>' + tbody.join('</tr><tr>') + '</tr>';
}

drawTable();