JSFiddle - React, Tailwind, and code Playground

by SuiteProG

HTML

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/colreorder/1.5.1/js/dataTables.colReorder.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/colreorder/1.5.1/css/colReorder.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.5.2/css/buttons.dataTables.min.css">
<script src="https://cdn.datatables.net/buttons/1.5.4/js/buttons.colVis.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.4/js/dataTables.buttons.min.js"></script>
<script src="https://datatables.net/release-datatables/extensions/Responsive/js/dataTables.responsive.js"></script>
<link rel="stylesheet" href="https://datatables.net/release-datatables/extensions/Responsive/css/responsive.dataTables.css">
<table id="example" class="display nowrap" style="width:100%"> 
<thead> 
<tr>
    <th>column 0</th> 
  <th>column 1</th> 
   <th>column 2</th> 
   <th>column 3</th> 
   <th>column 4</th> 
   <th>column 5</th> 
   <th>column 6</th> 
   <th>column 7</th> 
    <th>column 8</th> 
   <th>column 9</th> 
   <th>column 10</th> 
   <th>column 11</th> 
   <th>column 12</th> 
   <th>column 13</th> 
   <th>column 14</th> 
   <th>column 15</th> 
   <th>column 16</th> 
   <th>column 17</th> 
</tr> 
</thead>
<tbody> 
<tr> 
  <td>Tiger</td>
  <td>Nixon</td>
  <td>System Architect</td>
  <td>Edinburgh</td>
  <td>61</td>
  <td>2011/04/25</td>
  <td>$320,800</td>
  <td>5421</td>
  <td>[email protected]</td>
    <td>Hello</td>
    <td>Hello</td>
    <td>Hello</td>
    <td>Hello</td>
    <td>Hello</td>
    <td>Hello</td>
        <td>Hello</td>
    <td>Hello</td>
    <td>Hello</td>

</tr>
</tbody>
</table>

JavaScript

$(document).ready(function() {
    var table = $('#example').DataTable( {
        buttons: ["colvis"],
     
       responsive: true,
        colReorder: {
       	 enabled: true,
            order: [0, 1, 2, 3, 4, 5, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 6, 17]
        }
    } );
} );