JSFiddle - React, Tailwind, and code Playground

by kapantzak

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<table id="myTable">
  <thead>
    <tr>
      <th>ID</th>
      <th>Description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>One</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Two</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Three</td>
    </tr>
  </tbody>
</table>

CSS

#myTable {
  width: 100%;
}

JavaScript

function isVisible(elem) {
	return elem.offsetWidth > 0 && elem.offsetHeight > 0;
}

function waitVisible(elem, callback) {
	if (isVisible(elem)) {
  	callback();
  } else {
  	requestAnimationFrame(waitVisible);
  }	
}

const elem = document.getElementById("myTable");
setTimeout(() => {
  elem.style.display = "table";  
  //initDataTables();
}, 2000);

//waitVisible(elem, initDataTables());

function initDataTables() {
  $("#myTable").DataTable();
}

/* function waitVisible(elem, callback) {
  let max = 2000;
  const interval = setInterval(() => {
    if (max <= 0) clearInterval(interval);
    if (isVisible(elem)) {
      callback();
      max = 0;
    }
    max -= 50;
  }, 50);
}

const elem = document.getElementById("myTable");
waitVisible(elem, () => {
  
});
initDataTables();
setTimeout(() => {
  elem.style.display = "block";  
}, 2000);

function initDataTables() {
  $("#myTable").DataTable();
} */