JSFiddle - React, Tailwind, and code Playground

by carcleo1999

HTML

<link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
    
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>    

<a class="toggle-vis btn" data-columns="0">ID</a>
<a class="toggle-vis btn" data-columns="1,2,3">Persons</a>	
<table class="dataTables">
        <thead>
           <tr>
               <th>ID</th>
               <th colspan="3">Persons</th>
            </tr>
           <tr>
               <th></th>
               <th>Name</th>
               <th>Nickname</th>
               <th>Age</th>
            </tr>
        </thead>
        <tbody>
           <tr>
              <td>1</td>
              <td>Charles</td>
              <td>Albert</td>
              <td>50</td>
             </tr>
           <tr>
              <td>2</td>
              <td>Cleo</td>
              <td>Pires</td>
              <td>47</td>
             </tr>
        </tbody>
       </table>

CSS

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

.white-space {
	white-space: nowrap;
}
.text-center {
  text-align: center;
}

.btn {
 display: inline-block;
 margin: 10px auto;
 padding: 10px auto;
 width: 100px;
 height: 20px;
 cursor: pointer;
 border: .1px solid #ccc;
 text-align: center;
}
.btn:hover {
  background: #ccc;
  color: #000;
}

JavaScript

$(document).ready( function () {    
    
    var table = $('.dataTables')
    
    var tabela = table.DataTable({
      autoWidth: false,
      language : {
        emptyTable:     "Nenhum registro encontrado",
        info:           "Mostrando de _START_ até _END_ de _TOTAL_ registro(s)",
        infoEmpty:      "Mostrando de 0 até 0 de 0 registro(s)",
        infoFiltered:   "(filtrado de _MAX_ regitros no total)",
        infoPostFix:    "",
        thousands:      ",",
        lengthMenu:     "Mostrar _MENU_ registros",
        loadingRecords: "Carregando...",
        processing:     "Processando...",
        search:         "Buscar:",
        zeroRecords:    "Nenhum registro correspondente encontrado",
        paginate: {
            first:      "Primeiro",
            last:       "Último",
            next:       "Próximo",
            previous:   "Anterior"
        },
        aria: {
            sortAscending :  ": activate to sort column ascending",
            sortDescending : ": activate to sort column descending"
        }
      },
      columnDefs: [
        {orderable: false, targets: -1}
      ]
    });    

    $('a.toggle-vis').on( 'click', function (e) {
      e.preventDefault();
      var collumns_str = $(this).attr('data-columns')
      var collumns = collumns_str.split(",")
      collumns.forEach(function(collumn) {
        var column = tabela.column( collumn );  
        column.visible( !column.visible() );
      })
    });  
  
});