JSFiddle - React, Tailwind, and code Playground

HTML

<table id="table1">
  <thead>
  </thead>
  <tbody>
  </tbody>
</table>

CSS

table, th, td {
  border: 1px solid black;
}

JavaScript

$(function() {

    var myObj, i, j, x = "";
myObj = {
    "status": 1,
    "data": [
        {
            
            "1": {
                "shift": "8",
                "namashift": "SHIFT PAGI",
                "description": "MASUK PAGI",
                "checkin": "07:00:00",
                "checkout": "14:00:00",
                "unit": "2906"
            },
            "2": {
                "shift": "9",
                "namashift": "SHIFT SORE",
                "description": "MASUK SORE",
                "checkin": "14:00:00",
                "checkout": "21:00:00",
                "unit": "2906"
            },
            "3": {
                "shift": "5",
                "namashift": "REGULER SSRK",
                "description": "JAM KERJA REGULER SENIN-KAMIS",
                "checkin": "07:00:00",
                "checkout": "14:00:00",
                "unit": "2906"
            },
            "4": {
                "shift": "10",
                "namashift": "SHIFT MALAM",
                "description": "MASUK MALAM",
                "checkin": "21:00:00",
                "checkout": "07:00:00",
                "unit": "2906"
            },
            "5": {
                "shift": "8",
                "namashift": "SHIFT PAGI",
                "description": "MASUK PAGI",
                "checkin": "07:00:00",
                "checkout": "14:00:00",
                "unit": "2906"
            },
            "6": {
                "shift": "9",
                "namashift": "SHIFT SORE",
                "description": "MASUK SORE",
                "checkin": "14:00:00",
                "checkout": "21:00:00",
                "unit": "2906"
            },
            "7": {
                "shift": "10",
                "namashift": "SHIFT MALAM",
                "description": "MASUK MALAM",
                "checkin": "21:00:00",
                "checkout": "07:00:00",
                "unit": "2906"
            },
            "8": {
        ...