JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="app">
  <table class="table table-bordered">
    <tr>
      <th>Nama</th>
      <th>Tgl 1</th>
      <th>Tgl 2</th>
      <th>Tgl 3</th>
      <th>Tgl 4</th>
      <th>Tgl 5</th>
    </tr>
    <tbody id="data">
    </tbody>
  </table>
</div>

JavaScript

var mF = {
	data: [],
	init: function(){
  	this.setData();
  },
  setData: function(){
    this.data.push([1, 'nama1', 'sakit', '1-Jun-2017', 'supardi']);
    this.data.push([2, 'nama2', 'alfa', '2-Jun-2017', 'supardi']);
    this.data.push([3, 'nama3', 'izin', '2-Jun-2017', 'supardi']);
    this.data.push([4, 'nama4', 'izin', '4-Jun-2017', 'supardi']);
    this.data.push([5, 'nama5', 'sakit', '5-Jun-2017', 'supardi']);
    this.createTable();
  },
  createTable: function(){
  	var ins = document.getElementById("data");
    for(var i = 0; i < this.data.length; i++){
  	var app = document.createElement("tr");
    	for(var j = 0; j < this.data[i].length; j++){
      	if(j == 3){
        	var gD = new Date(this.data[i][j]);
          var mD = gD.getDate();
          for(var k = 1; k <= this.data.length; k++){
          	if(k == mD){
            	var inp = document.createElement("td");
            	inp.innerHTML = this.data[i][2];
            	app.appendChild(inp);
            } else {
            	var dt = document.createElement("td");
              app.appendChild(dt);
            }
          }
        }
        else if(j == 1) {
        	var nm = document.createElement("td");
          nm.innerHTML = this.data[i][1];
          app.appendChild(nm);
        }
      }
      ins.appendChild(app)
    }
  }
}

mF.init();