JSFiddle - React, Tailwind, and code Playground

by irwanto82

HTML

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.24/css/jquery.dataTables.min.css">
	<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.7.0/css/buttons.dataTables.min.css">
  
  <script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
	<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
	<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/1.7.0/js/dataTables.buttons.min.js"></script>
	<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/1.7.0/js/buttons.html5.min.js"></script>
	<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/1.7.0/js/buttons.colVis.min.js"></script>

<table id='example' class="display" style="width:100%">
  <thead>
    <tr>
      <th>city</th>
      <th>island</th>
      <th>country</th>
      <th>population</th>
      <th class='no-print'>action</th>
    </tr>
  </thead>
 <tbody>
   <tr>
      <td>1aaaaa</td>
      <td>1bbbbb</td>
      <td>1ccccc</td>
      <td>1ddddd</td>
      <td class='no-print'>1eeeee</td>     
   </tr>
   <tr>
      <td>2aaaaa</td>
      <td>2bbbbb</td>
      <td>2ccccc</td>
      <td>2ddddd</td>
      <td class='no-print'>2eeeee</td>     
   </tr>
   <tr>
      <td>3aaaaa</td>
      <td>3bbbbb</td>
      <td>3ccccc</td>
      <td>3ddddd</td>
      <td class='no-print'>3eeeee</td>     
   </tr>
   <tr>
      <td>4aaaaa</td>
      <td>4bbbbb</td>
      <td>4ccccc</td>
      <td>4ddddd</td>
      <td class='no-print'>4eeeee</td>     
   </tr>
   
 </tbody>
  
</table>

JavaScript

$(document).ready(function() {
    $('#example').DataTable( {
        dom: 'Bfrtip',
        "columnDefs": [
        	{ "visible": false, "targets": 1 }
      	],
        buttons: [
            {
                extend: 'copyHtml5',
                exportOptions: {
                    columns: ':not(.no-print):visible',
                    format: {
                      body: function(data, row, column, node) {
                        console.log('body ' + row +':' + column);
												return data;
                      },
                      header: function ( data, column, row ) {
                        console.log('header column :' + column);
                        return data;
                      },
                      footer: function(data, column) {
                        console.log('footer ' + column + ' => ' + data);
                        return data;
                      }
                    }                    
                },                
            },
            'colvis'
        ]
    } );
} );