JSFiddle - React, Tailwind, and code Playground

by locrian1288

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/js/jquery.dataTables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables-colvis/1.1.2/js/dataTables.colVis.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables-buttons/2.4.2/js/dataTables.buttons.min.js"></script>
<!DOCTYPE html>
<html>
  <head>
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>

    <link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
    <script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.colVis.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.5.2/css/buttons.dataTables.min.css">
    <meta charset=utf-8 />
    <title>DataTables - JS Bin</title>
  </head>
  <body>
    <div class="container">
      <table id="example" class="display nowrap" width="100%">
        <thead>
        </thead>

        <tbody>
        </tbody>
      </table>
    </div>
    <div id="infoBlock">
      HI
    </div>
  </body>
</html>

CSS

body {
  font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  color: #333;
  background-color: #fff;
}

JavaScript

const dataSet = [];
var table = ""
function initializeTable()
{

    table = $('#example').DataTable( {
        orderCellsTop: true,
        fixedHeader: true,
        dom: 'Bfrtip',
         columns: [
    { "title": "1" },
    { "title": "2" },
    { "title": "3" },
    { "title": "4" },
    { "title": "5" },
    { "title": "6" }
        
    		],
        data: dataSet,
        buttons: [
            'colvis',
            {
              text: 'Clear Filters',
              action: function ( e, dt, node, config ) {
              table.search("").columns().search("").draw();
              $("thead select").val("");
            }
          }
        ]
    } );
}

$(document).ready( function () {
    
		initializeTable()


		$("#example thead tr")
    	.clone(true)
      .addClass("filters")
      .appendTo("#example thead")

    $('#example').on( 'column-visibility.dt', function ( e, settings, column, state ) {
      //var idx = $(table.column(column).header()).index();
      //$('#example thead tr:eq('+idx+') td:eq(1) select').val('');
      table.columns(column).search('').draw();
      isVis = table.column(column).visible();
      console.log({isVis})
      if(isVis)
      $("#example thead tr:eq(1) th").eq(column).show()
      else
      $("#example thead tr:eq(1) th").eq(column).hide()
    } );

} );