JSFiddle - React, Tailwind, and code Playground

by Musale Martin

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<table id="attack-table">
  <thead>
    <tr>
      <th>Source Country</th>
      <th>Target Country</th>
      <th>Date Created</th>
      <th>Attack Type</th>
      <th>Parameter</th>
    </tr>
  </thead>
</table>

JavaScript

(function() {
  function updateTable(alerts) {
    const table = d3.select("#attack-table");
    const tableBody = table.append("tbody");

    tableBody
      .selectAll("tr")
      .data(alerts)
      .enter()
      .append("tr")
      .selectAll("td")
      .data(function(row, i) {
        return [{
            column: "Source Country",
            value: row.country
          },
          {
            column: "Target Country",
            value: row.targetCountry
          },
          {
            column: "Date Created",
            value: row.dateCreated
          },
          {
            column: "Attack Type",
            value: row.analyzerType
          },
          {
            column: "Parameter",
            value: row.requestString
          }
        ];
      })
      .enter()
      .append("td")
      .attr("class", "small")
      .text(function(d) {
        return d.value;
      });
  }
  const alerts = [{
      "analyzerType": "VNC(vnclowpot)",
      "clientDomain": true,
      "country": "RU",
      "countryName": "Russian Federation",
      "dateCreated": "2018-07-13 19:29:42",
      "destLat": "25.66669999999999",
      "destLng": "-100.3167",
      "id": "48a140b7df45cdb824eb898b3647f9b9",
      "requestString": "",
      "sourceLat": "55.75219999999999",
      "sourceLng": "37.6156",
      "targetCountry": "MX"
    },
    {
      "analyzerType": "VNC(vnclowpot)",
      "clientDomain": true,
      "country": "RU",
      "countryName": "Russian Federation",
      "dateCreated": "2018-07-13 19:29:42",
      "destLat": "50.10249999999999",
      "destLng": "8.629899999999992",
      "id": "cdf7b9ebff8e49073bc54998c32542f3",
      "requestString": "",
      "sourceLat": "55.75219999999999",
      "sourceLng": "37.6156",
      "targetCountry": "DE"
    },
    {
      "analyzerType": "Network(honeytrap)",
      "clientDomain": true,
      "country": "-",
      "countryName": "-",
      "dateCreated": "2018-07-13 19:29:42",
      "destLat":...