JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" type="text/css" href="/media/css/site-examples.css?_=19472395a2969da78c8a4c707e72123a">
	<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
	<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.5.2/css/buttons.dataTables.min.css">
	<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
	<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
	<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/1.5.2/js/dataTables.buttons.min.js"></script>
	<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.colVis.min.js"></script>
  
  <!-- Main Table Structure -->
<table id="mytable">
 <thead>
  <tr>
   <th style="border:1px solid black">Main Header</th>
   <th colspan="2" style="border:1px solid black">Main Header 1</th>
   <th colspan="5" style="border:1px solid black">Main Header 2</th>
  </tr>
  <tr>
   <td style="border:1px solid black">Sub Header</td>
   <td style="border:1px solid black">Sub Header 1</td>
   <td style="border:1px solid black">Sub Header 2</td>
   <td style="border:1px solid black">Sub Header 3</td>
   <td style="border:1px solid black">Sub Header 4</td>
   <td style="border:1px solid black">Sub Header 5</td>
   <td style="border:1px solid black">Sub Header 6</td>
  </tr>
</thead>
<tr>
  <td style="border:1px solid black">Sample Data</td>
   <td style="border:1px solid black">Sample Data</td>
    <td style="border:1px solid black">Sample Data</td>
     <td style="border:1px solid black">Sample Data</td>
      <td style="border:1px solid black">Sample Data</td>
       <td style="border:1px solid black">Sample Data</td>
        <td style="border:1px solid black">Sample Data</td>
</tr>
<!-- DATA FOR TABLE GOES HERE...

JavaScript

$(document).ready(function() {
    $('#mytable').DataTable( {
        dom: 'Bfrtip',
        buttons: [
            'colvis'
        ]
    } );
} );