JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//cdn.datatables.net/1.10.3/css/jquery.dataTables.css">
<link rel="stylesheet" href="//cdn.datatables.net/responsive/1.0.2/css/dataTables.responsive.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.3/js/jquery.dataTables.min.js"></script>
<script src="//cdn.datatables.net/responsive/1.0.2/js/dataTables.responsive.js"></script>
<table id="example" class="display" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>0</th>
            <th>1</th>
            <th>2</th>
            <th>3</th>
            <th>4</th>
            <th>5</th>
            <th>6</th>
            <th>7</th>
            <th>8</th>
            <th>9</th>
            <th>10</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>A0</td>
            <td>A1</td>
            <td>A2</td>
            <td>A3</td>
            <td>A4</td>
            <td>A5</td>
            <td>A6</td>
            <td>A7</td>
            <td>A8</td>
            <td>A9</td>
            <td>A10</td>
        </tr>
        <tr>
            <td>B0</td>
            <td>B1</td>
            <td>B2</td>
            <td>B3</td>
            <td>B4</td>
            <td>B5</td>
            <td>B6</td>
            <td>B7</td>
            <td>B8</td>
            <td>B9</td>
            <td>B10</td>
        </tr>
        <tr>
            <td>C0</td>
            <td>C1</td>
            <td>C2</td>
            <td>C3</td>
            <td>C4</td>
            <td>C5</td>
            <td>C6</td>
            <td>C7</td>
            <td>C8</td>
            <td>C9</td>
            <td>C10</td>
        </tr>
    </tbody>
</table>
<hr>
<p>Adjust the width of the portal to see the strange behaviour.</p>
<p>1. Make the portal about 300px wide and click run</p>
<p>2. You will see cols 0,1,2 and 3 are hidden</p>
<p>3. Now make the portal about 250px wide and you will see cols 0,1,2 and 3 are visible</p>

JavaScript

$(document).ready(function () {
    var table = $('#example').DataTable({
        responsive: true
    });

    //http://datatables.net/reference/api/columns().visible()
    table.columns([0, 1, 2]).visible(false, false);
    table.columns.adjust().draw(false);

});