JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE HTML>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Colvis</title>
    <meta name="description" content="">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	
  
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4-4.1.1/jq-3.3.1/dt-1.10.23/b-1.6.5/b-colvis-1.6.5/datatables.min.css"/>
 
<script type="text/javascript" src="https://cdn.datatables.net/v/bs4-4.1.1/jq-3.3.1/dt-1.10.23/b-1.6.5/b-colvis-1.6.5/datatables.min.js"></script>


</head>
<body>

	<br>
	<br>
	<br>

<!-- TABLE -->
<div class="container">
  <a href="#demo" class="" data-toggle="collapse">Table</a>
  <div id="demo" class="collapse">
  
	<table id="example" class="table table-bordered nowrap" style="width:100%">
		<thead>
			<tr>
				<th class="all">Name</th>
				<th class="none">Position</th>
				<th class="none">Office</th>
				<th class="none">Age</th>
				<th class="none">Start date</th>
				<th class="none">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>
		</tbody>
	</table>
  </div>
</div>

<br>
<br>
<br>

<!-- COLVIS -->
<div id="idColumns" class="container w-100">
</div>


</body>


	

	<script>
	$(document).ready(function (){
  
    var table = $('#example').DataTable();
		
	function addButtons() {
		// Colvis
		var buttonsColvis = new $.fn.dataTable.Buttons(table, {
			 buttons: [ 
			 {
				extend: 'colvis',
				text : 'colvis',
				className: 'btn btn-outline-primary'
			 }
			]
		}).container().appendTo($('#idColumns'));;
	}
	
	addButtons();	
});

	</script>
	
</html>