JSFiddle - React, Tailwind, and code Playground

by serGlazkov

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.9/css/dataTables.bootstrap.css">
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.js"></script>
<script src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.js"></script>
<script src="https://cdn.datatables.net/1.10.9/js/dataTables.bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/floatthead/1.3.1/jquery.floatThead.min.js"></script>
<a href="#" class="i-paste">Paste table</a><br>
<a href="#" class="i-init">Init DataTables</a><br>
<a href="#" class="i-fixed-header">Fixed Header</a><br>
<a href="#" class="i-delete">Delete DataTables</a><br>
<a href="#" class="i-resize">Resize</a><br>

<div class="container"></div>

CSS

.dataTable-table {
    width:100%;
}

JavaScript

$(document).on('click', '.i-paste', function () {
    $('.container').html(table);
});
$(document).on('click', '.i-init', function () {
    $('.dataTable-table').DataTable();
});
$(document).on('click', '.i-delete', function () {
    $('.dataTable-table').dataTable().fnDestroy();
});
$(document).on('click', '.i-resize', function () {
    $(window).resize();
});
$(document).on('click', '.i-fixed-header', function () {
    $('table.fixed-header-table').floatThead({
        scrollContainer: function ($table) {
            return $table.closest('.fixed-header-table-wrapper');
        },
        zIndex: 101
    });
});


var table = '<div class="fixed-header-table-wrapper"><table class="dataTable-table fixed-header-table"><thead><tr><th>Column1</th><th>Column2</th><th>Column3</th></tr></thead><tbody><tr><td>Data11</td><td>Data12</td><td>Data13</td></tr><tr><td>Data21</td><td>Data22</td><td>Data23</td></tr><tr><td>Data31</td><td>Data32</td><td>Data33</td></tr></tbody></table></div>'