JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <table id="deploymentMap_table" class="table table-condensed table-bordered table-hover"></table>

CSS

.td_color{
	background-color: #ddf5df ;
	color:green;
}

#deploymentMap_table th{
	background-color: #e1e1e1 ;
}

#deploymentMap_table.popover{
	color:white;
	background-color: #555;
	font-size:0.7vW;
	padding:0;
	z-index:1030;
}

#deploymentMap_table.popover.bottom #deploymentMap_table.arrow:after {
	border-bottom-color: pink;
}

JavaScript

$(document).ready(function() {

// for tooltip
$("#deploymentMap_table").tooltip({ 
		selector: '[data-toggle=tooltip]' ,
		container:'body',
		placement : 'right',
		html : true,
		template : '<div class="tooltip" style="font-size:16px;" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner" style="min-width: 100px; max-width: 100%; "></div></div>'
	});

  var response=  {
    "service1": {
      "APH7": "1.1.5",
      "USE1": "1.1.5",
      "EUW1": "1.1.5",
      "APK2": {
        "CSTG": "1.0.10",
        "CSTH": null,
        "0": "1.0.10"
      },
      "APT2": {
        "CSTG": "1.1.5",
        "CSTH": null,
        "0": "1.1.5"
      },
      "INDW2": {
        "CSTG": "1.1.5",
        "CSTH": null,
        "0": "1.1.5"
      },
      "USW1": {
        "CSTG": "1.1.5",
        "CSTH": null,
        "0": "1.1.5"
      },
      "USW2": {
        "CSTG": "1.1.5",
        "CSTH": null,
        "0": "1.1.5"
      },
      "AP2": {
        "CSTG": "1.1.5",
        "CSTH": null,
        "0": "1.1.5"
      },
      "APS2": {
        "CSTG": "1.1.5",
        "CSTH": null,
        "0": "1.1.5"
      },
      "0": "CD"
    },
    "service2": {
      "APH7": 1,
      "EUW1": 1,
      "USE1": 1,
      "APS2": {
        "CSTG": 1,
        "CSTH": null,
        "0": 1
      },
      "USW2": {
        "CSTG": 1,
        "CSTH": null,
        "0": 1
      },
      "USW1": {
        "prd": "1",
        "CSTH200722": null,
        "0": 1
      },
      "APK2": {
        "CSTG": 1,
        "CSTH": null,
        "0": 1
      },
      "APT2": {
        "CSTG": 1,
        "CSTH": null,
        "0": 1
      },
      "AP2": {
        "CSTG": 1,
        "CSTH": null,
        "0": 1
      },
      "INDW2": {
        "CSTG": 1,
        "CSTH": null,
        "0": 1
      },
      "0": "BSF"
    }
  }

  rendertable(response);

  function rendertable(data){

    //data from webservice
    var dataSet = data;

    //create table
    var table  =...