JSFiddle - React, Tailwind, and code Playground

by Andrei Gheorghiu

HTML

<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css">
<div id="Table"> 
  <table class="table table-bordered table-condensed table-responsive cell-border" id="FactoryTable">
        <thead>
            <tr class="active">
                <th>District</th>
                <th>Department</th>
                <th>Team</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
	<span id="spinner" class="myspinner" ><img src="http://www.snacklocal.com/images/ajaxload.gif"></span>
  <span id = "transp"></span>
</div>

CSS

th, td {
  text-align: center;
  vertical-align: middle;
}
.table-condensed > tbody > tr > td, 
.table-condensed > tbody > tr > th, 
.table-condensed > tfoot > tr > td, 
.table-condensed > tfoot > tr > th, 
.table-condensed > thead > tr > td, 
.table-condensed > thead > tr > th
{
  padding:5px;
}
body {
  margin: 0;
}

#spinner {
  position: absolute;
  top: 0;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* add this to make left and right columns equal,
 * thus centering the contents of the center column in the table 
 * but keep in mind for any table with more than 3 columns 30% is 
 * too much for a column width.
 */
 #FactoryTable td:first-child,#FactoryTable td:last-child {
   width: 30%;
 }

JavaScript

$('#FactoryTable').DataTable({
  "dom": "tipr",
  "pagingType": "simple",
});
var table = $('#FactoryTable').DataTable();

table.row.add( [ 1, 2, 3]).draw(false);
table.row.add( [ 1, 2, 3]).draw(false);
table.row.add( [ 1, 2, 3]).draw(false);
table.row.add( [ 1, 2, 3]).draw(false);

var resizeSpinner = function() {
  var fH = '#FactoryTable',
      thh = $(fH+' thead').height();
	$('#spinner').css({
  	height: ($(fH).height() - thh) +'px',
    top: thh + 'px'
  });
}
resizeSpinner();
$(window).on('load resize', resizeSpinner);