JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/fixedheader/3.0.0/js/dataTables.fixedHeader.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/fixedheader/3.0.0/css/fixedHeader.dataTables.min.css">
<script src="https://cdn.datatables.net/buttons/1.0.3/js/dataTables.buttons.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.0.3/css/buttons.dataTables.min.css">
<script src="https://cdn.datatables.net/buttons/1.0.3/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.0.3/js/buttons.colVis.min.js"></script>
<ul class="menu">
    <li class="menu_top_item" onclick="hideall()"><a>Hide All</a>
    </li>
    <li class="menu_top_item" onclick="hideall();show('Foo');"><a title="Foo">Foo</a>
    </li>
    <li class="menu_top_item" onclick="hideall();show('Bar');"><a title="Bar">Bar</a>
    </li>
</ul>
<br>
<br>
<div class='hideable' id='Foo'>
    <table class='datatable stripe hover order-column cell-border nowrap'>
        <thead>
            <tr>
                <th>Column 1</th>
                <th>Column 2</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Data</td>
                <td>More Data</td>
            </tr>
            <tr>
                <td>Data</td>
                <td>More Data</td>
            </tr>
            <tr>
                <td>Data</td>
                <td>More Data</td>
            </tr>
            <tr>
                <td>Data</td>
                <td>More Data</td>
            </tr>
            <tr>
                <td>Data</td>
                <td>More Data</td>
            </tr>
            <tr>
                <td>Data</td>
                <td>More Data</td>
            </tr>
            <tr>
                <td>Data</td>
               ...

CSS

.menu {
    cursor: default;
    list-style-type: none;
    padding: 0;
}
.menu li {
    background-color: #333;
    color: #fff;
}
.menu li:hover {
    color: #069;
}
.menu_top_item {
    float: left;
    line-height: 30px;
    width: calc(100% / 3);
}
.menu_top_item a {
    padding: 7px;
}

JavaScript

$(document).ready(

function () {
    $('table.datatable').DataTable({
        dom: 'fBrti',
        fixedHeader: true,
        buttons: [
            'copyHtml5',
            'csvHtml5',
            'colvis'],
            "stateSave": true,
            "paging": false
    });

    hideall();
});

function hideall() {
    var divs = document.getElementsByClassName("hideable");
    for (var i = 0; i < divs.length; i++) {
        divs[i].style.display = "none";
    }

    // remove all fixed headers_list
    var all_tables = $.fn.dataTable.tables();
    Object.keys(all_tables).forEach(function (key) {
        var single_table = $('#' + key).DataTable();
        //        delete $.fn.dataTable.FixedHeader(single_table);
    });
}

function show(id) {
    // show page
    var div_element = document.getElementById(id);
    div_element.style.display = "block";

    // attach fixed header
    var table_elements = $(div_element).find("table");
    if (typeof table_elements[0] !== 'undefined') {
        var table = $('#' + table_elements[0].id).DataTable();
        new $.fn.dataTable.FixedHeader(table);
    }
}