JSFiddle - React, Tailwind, and code Playground

by deeprony7

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<div id="test">
    <div id="table-1">
        <table id="datatable-1" class="table table-sm table-sortable table-striped table-hover">
            <tbody class="header bg-info">
                <tr id="header-row-1">
                    <th>ID</th>
                    <th>Name</th>
                    <th>Username</th>
                    <th>Email</th>
                    <th>Address</th>
                    <th>Phone</th>
                    <th>Website</th>
                    <th>Company</th>
                </tr>
                <tr class="searchrow-1">
                </tr>
            </tbody>

            <tbody id="myTable-1">

            </tbody>
        </table>
    </div>

</div>

CSS

body {
  font-size:12px;
}   
   
   td[title]::after {
        position: absolute;
        width: 0;
        height: 0;
        top: 0;
        right: 0;
        border-top: 10px solid red;
        border-left: 10px solid transparent;
    }

JavaScript

var row = document.querySelector("#myTable-1").insertRow(-1);
    row.classList.add("item")


    var data = function getData() {
      fetch('https://jsonplaceholder.typicode.com/users')
        .then(response => response.json())
        .then(data => {
          /* console.log(data) */
          // buildTableHeader(data)
          buildTable(data)
          $(".item td:nth-child(2)").attr("title", "some tooltip")
        })

    }
    data()




    function buildTable(data) {
      for (var i = 0; i < data.length; i++) {
        var row = document.querySelector("#myTable-1").insertRow(-1);
        row.classList.add("item")
        // for (var i = 0; i < 8; i++) {
        row.insertCell(-1).innerHTML = data[i].id
        row.insertCell(-1).innerHTML = data[i].name
        row.insertCell(-1).innerHTML = data[i].username
        row.insertCell(-1).innerHTML = data[i].email
        row.insertCell(-1).innerHTML = data[i].address.street
        row.insertCell(-1).innerHTML = data[i].phone
        row.insertCell(-1).innerHTML = data[i].website
        row.insertCell(-1).innerHTML = data[i].company.name
        // }
      }
    }