JSFiddle - React, Tailwind, and code Playground

by qunzorez

HTML

<link rel="stylesheet" href="//cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css">
<script src="//cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/searchpanes/1.0.1/css/searchPanes.dataTables.min.css">
<script src="https://cdn.datatables.net/searchpanes/1.0.1/js/dataTables.searchPanes.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/select/1.3.0/css/select.dataTables.min.css">
<script src="https://cdn.datatables.net/select/1.3.0/js/dataTables.select.min.js"></script>
   <div>
     <em class="fa fa-filter fa-3x float-right" id="fil-sys"></em>
     <em class="fa fa-eye-slash pointer fa-3x float-right fa-invisibles"></em>
     <em class="fa fa-eye pointer fa-3x float-right hide fa-visibles"></em>
     <div class="filtering-system">
       <h2 class="head-of-editor">Filtering settings:</h2>
       <div class="checkBoxes"></div>
       <br />
       <a class="btn btn-primary" id="createFilter" href="#">Apply</a><br><br>
     </div>
   </div>

   <table id="example" class="display" style="width:100%">
     <thead>
       <tr>
         <td>Status</td>
         <th>Name</th>
         <th>Position</th>
         <th>Office</th>
         <th>Age</th>
         <th>Start date</th>
         <th>Salary</th>
       </tr>
     </thead>
     <tbody>
       <tr>
         <td> <em class="fa fa-close pointer fa-inactive" data-title="@Localizer[" Inactive"]"></em></td>
         <td>Tiger Nixon</td>
         <td>System Architect</td>
         <td>Edinburgh</td>
         <td>61</td>
         <td>2011/04/25</td>
         <td>$320,800</td>
       </tr>
       <tr>
         <td><em class="fa fa-check pointer fa-active" data-title="@Localizer[" Active"]"></em></td>
         <td>Garrett Winters</td>
         <td>Accountant</td>
         <td>Tokyo</td>
         <td>63</td>
      ...

CSS

.float-right {
float: right;
}

.hide {
  display: none;
}

JavaScript

let tableId = "example";
$('.filtering-system').hide();
$('.button-container').hide();

 addSpliting('');

function showAllVaues() {
    $('#' + tableId + '').dataTable().api().page.len(-1).draw();
}

function addSpliting(val, length) {
    if (val != '') {
        $('#' + tableId + '').DataTable({
            destroy: true,
            searchPanes: {
                layout: 'columns-' + length + ''
            },
            columnDefs: [{
                searchPanes: {
                    show: true
                },
                targets: '_all'
            }],

            dom: 'Pfrtip'
        });
        $('.dtsp-searchPanes').children().each(function (i, obj) {
            if (!val.includes(i)) $(this).hide();
            else $(this).show();
        });
    } else {
        $('#' + tableId + '').DataTable({
            destroy: true
        });
    }
}

function setFilters() {
    $("table thead tr th").each(function (index) {
        var boxes = `<label>
                <input type="checkbox" class="custom-checkbox" id="${index}"/>
                ${$(this).text()}
                </label>`;
        if ($(this).text() != "" && $(this).hasClass('checkbox-mark') === false) $(".checkBoxes").append(boxes);
    });
}

setFilters();

$("#createFilter").on("click", function () {
    var columFilters = [];

    $('.custom-checkbox:checked').each(function () {
        columFilters.push(parseInt($(this).attr('id')));
    });

    addSpliting(columFilters, columFilters.length);
});

$("#fil-sys").on("click", function () {
    $('.filtering-system').slideToggle('slow');
});

function drawTable(table, className, lenth) {
    $.fn.dataTable.ext.search.push(
        function (settings, data, dataIndex) {
            return $(table.row(dataIndex).node()).find(className).length == lenth;
        }
    );
    table.draw();
}

$(document).ready(function () {
    var table = $('#' + tableId + '').DataTable();
    if ($(".fa").hasClass("fa-eye")) {
       ...