JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.datatables.net/v/bs-3.3.7/jq-3.3.1/dt-1.10.18/af-2.3.2/b-1.5.4/b-colvis-1.5.4/cr-1.5.0/fc-3.2.5/fh-3.1.4/kt-2.5.0/r-2.2.2/rg-1.1.0/rr-1.2.4/sc-1.5.0/sl-1.2.6/datatables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/v/bs-3.3.7/jq-3.3.1/dt-1.10.18/af-2.3.2/b-1.5.4/b-colvis-1.5.4/cr-1.5.0/fc-3.2.5/fh-3.1.4/kt-2.5.0/r-2.2.2/rg-1.1.0/rr-1.2.4/sc-1.5.0/sl-1.2.6/datatables.min.css">
<body>
	<table id="example" class="table display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
            </tr>
        </thead>
 
        <tfoot>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
            </tr>
        </tfoot>
 
        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
            </tr>
            <tr>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
            </tr>
            <tr>
                <td>Ashton Cox</td>
                <td>Junior Technical Author</td>
                <td>San Francisco</td>
            </tr>
        </tbody>
    </table>
</body>

JavaScript

$(document).ready(function() {
	var table = $('#example').DataTable({
  	dom: 'B',
    columnDefs: [
      {targets: 0, className: 'noColVis'},
      {targets: 0, visible: false}
    ],
    buttons: [{
      extend: 'colvis',
      autoClose: false,
      fade: 0,
      columns: ':not(.noColVis)',
      colVis: {showAll: "Show all"}
    }],
    colReorder: true
	});
});