JSFiddle - React, Tailwind, and code Playground

by chimos

HTML

<link rel="stylesheet" href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css">
<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<script src="//cdn.datatables.net/colvis/1.1.2/js/dataTables.colVis.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/colvis/1.1.2/css/dataTables.colVis.css">
<div id="main_wrapper" style="text-align:center;">

    <table id="example" cellpadding="0" cellspacing="0" border="0">
        <thead>
            <tr>
                <th>Column 1</th>
                <th>Column 2</th>
                <th>Column 3</th>
                <th>Column 4 (hidden)</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Data 01</td>
                <td>TEST SEARCH</td>
                <td>Data 03</td>
                <td>Hidden 04</td>
            </tr>
            <tr>
                <td>Data 05</td>
                <td>TEST SEARCH</td>
                <td>Data 07</td>
                <td>Hidden 08</td>
            </tr>
            <tr>
                <td>Data 09</td>
                <td>Data 10</td>
                <td>Data 11</td>
                <td>Hidden 12</td>
            </tr>
            <tr>
                <td>Data 13</td>
                <td>Data 14</td>
                <td>TEST SEARCH</td>
                <td>Hidden 16</td>
            </tr>
            <tr>
                <td>Data 17</td>
                <td>Data 18</td>
                <td>TEST SEARCH</td>
                <td>Hidden 20</td>
            </tr>
            <tr>
                <td>Data 21</td>
                <td>Data 22</td>
                <td>TEST SEARCH</td>
                <td>Hidden 24</td>
            </tr>
            <tr>
                <td>Data 25</td>
                <td>Data 26</td>
                <td>TEST SEARCH</td>
                <td>Hidden 28</td>
            </tr>
            <tr>
                <td>Data 29</td>
                <td>Data 30</td>
            ...

JavaScript

$(document).ready(function() {
    
    // Init DataTable
    var oTable = $('#example').DataTable({
        'dom': 'rfti<"clear">p',
        'processing': true,
        'deferRender': true,        
        'bPaginate': true,
        'iDisplayLength': 5,
        'columnDefs': [
            {
                'targets': [ 3 ],
                'visible': false
            }]

    });
    
    // Init colVis plugin
    var colvis = new $.fn.dataTable.ColVis( oTable, {
        "showAll": "All",
        "buttonText": "Column visibility"         
    });    
    $(colvis.button()).prependTo('#main_wrapper');
    
    // Event handler to get data and generate new table
    $('button.print-bt').on('click', function() {
                
        var fvData = oTable.rows({ search:'applied', visible:true }).data(); //Shows hidden-columns data as well
        console.log( fvData );
        
    });


    
});