JSFiddle - React, Tailwind, and code Playground

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 id="Table">

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;
}
.myspinner {
  position: absolute;
}
#transp {
    position: absolute;
    background: rgba(250,250,250,0.8);
    width: 98%;
}

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 height = $('#FactoryTable').height();
var width = $('#FactoryTable').width();
$("#spinner").css('top', height * 0.50);
$("#spinner").css('left', width * 0.50);
$("#transp").css('height', height * 0.50);
$("#transp").css('top', height * 0.50);