JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdn.datatables.net/1.10.5/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.5/css/jquery.dataTables.min.css">
<button>Show Tables</button><br/><br/>
<div>
    There are 3 near identical DataTables, each in its own hidden container. The only difference in initialization is the scrollX option.<br/><br/>
    DataTable 1 has scrollX = false.<br/>
    DataTable 2 has scrollX = true.<br/>
    DataTable 3 has scrollX omitted.<br/><br/>    
    Click the button to see the issue when the containers become visible. For DataTables 1 &amp; 2, click the column headings to see the other issue.
</div>
<div class="container hide">
    <h3>DataTable 1</h3>
    <table id="table-1" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
        
        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
            </tr>
            <tr>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2011/07/25</td>
                <td>$170,750</td>
            </tr>
            <tr>
                <td>Ashton Cox</td>
                <td>Junior Technical Author</td>
                <td>San Francisco</td>
                <td>66</td>
                <td>2009/01/12</td>
                <td>$86,000</td>
            </tr>
            <tr>
                <td>Cedric Kelly</td>
                <td>Senior Javascript Developer</td>
                <td>Edinburgh</td>
                <td>22</td>
               ...

CSS

.hide {
    display: none;
}

JavaScript

$(function() {
    $('#table-1').DataTable({
        scrollX:false
    });

    $('#table-2').DataTable({
        scrollX:true
    });

    $('#table-3').DataTable();
    
    $('button').click(function() {
        $('.container').toggle();
        
        var tables = $.fn.dataTable.tables(true);
        $( tables ).DataTable().columns.adjust();
    });
});