JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdn.datatables.net/r/bs-3.3.5/jqc-1.11.3,dt-1.10.9,r-1.0.7/datatables.min.css">
<script src="https://cdn.datatables.net/r/bs-3.3.5/jqc-1.11.3,dt-1.10.9,r-1.0.7/datatables.min.js"></script>
<div class="container">
    <div id="wait">
        <h1>Loading in progress, please wait, ...</h1>
    </div>
    <div id="table-div-wait">
        <table id="table-test" class="table-recap table nowrap" width="100%">
            <thead>
                <tr>
                    <th>Col1</th><th>Col2</th><th>Col3</th><th>Col4</th><th>Col5</th>
                </tr>
            </thead>

            <tbody>
                <tr><td>Val 1</td><td>Val 2</td><td>Val 3</td><td>Val 4</td><td>Val 5</td></tr>
                <tr><td>Val 1</td><td>Val 2</td><td>Val 3</td><td>Val 4</td><td>Val 5</td></tr>
                <tr><td>Val 1</td><td>Val 2</td><td>Val 3</td><td>Val 4</td><td>Val 5</td></tr>
           <tr><td>Val 1</td><td>Val 2</td><td>Val 3</td><td>Val 4</td><td>Val 5</td></tr>
                <tr><td>Val 1</td><td>Val 2</td><td>Val 3</td><td>Val 4</td><td>Val 5</td></tr>
                <tr><td>Val 1</td><td>Val 2</td><td>Val 3</td><td>Val 4</td><td>Val 5</td></tr>
                <tr><td>Val 1</td><td>Val 2</td><td>Val 3</td><td>Val 4</td><td>Val 5</td></tr>
                <tr><td>Val 1</td><td>Val 2</td><td>Val 3</td><td>Val 4</td><td>Val 5</td></tr>
                <tr><td>Val 1</td><td>Val 2</td><td>Val 3</td><td>Val 4</td><td>Val 5</td></tr>
                <tr><td>Val 1</td><td>Val 2</td><td>Val 3</td><td>Val 4</td><td>Val 5</td></tr>
                <tr><td>Val 1</td><td>Val 2</td><td>Val 3</td><td>Val 4</td><td>Val 5</td></tr>
                <tr><td>Val 1</td><td>Val 2</td><td>Val 3</td><td>Val 4</td><td>Val 5</td></tr><tr><td>Val 1</td><td>Val 2</td><td>Val 3</td><td>Val 4</td><td>Val 5</td></tr>
                <tr><td>Val 1</td><td>Val 2</td><td>Val 3</td><td>Val 4</td><td>Val 5</td></tr>
                <tr><td>Val...

JavaScript

$(document).ready(function() {
    document.getElementById('wait').style.visibility='visible';
document.getElementById('table-div-wait').style.visibility='hidden';    
    var oTable = $('.table-recap').DataTable( {
        "paging": false,
        "autoWidth": true,
        "initComplete": function(settings, json) {
    document.getElementById('wait').style.visibility='hidden';
document.getElementById('table-div-wait').style.visibility='visible';    
        },
        "pagingType": "full_numbers",
        "dom": "<'row'<'col-sm-6'l><'col-sm-6'f>>" + "<'row'<'col-sm-12'tr>>" + "<'row'<'col-sm-5'i><'col-sm-7'p>>"
    } );
});