JSFiddle - React, Tailwind, and code Playground

by Amir Sharifian

HTML

<p><input type="checkbox" name="first_name" checked="checked" /> First Name</p>
<p><input type="checkbox" name="last_name" /> Last Name</p>
<p><input type="checkbox" name="email" checked="checked" /> Email</p>

<table id="report">
<thead>
<tr>
 <th class="first_name">First Name</th>
 <th class="last_name">Last Name</th>
 <th class="email">Email</th>
</tr>
</thead>
<tbody>
<tr>
 <td class="first_name">Larry</td>
 <td class="last_name">Hughes</td>
 <td class="email">[email protected]</td>
</tr>
<tr>
 <td class="first_name">Mike</td>
 <td class="last_name">Tyson</td>
 <td class="email">[email protected]</td>
</tr>
</tbody>

CSS

td, th {
    padding: 6px;
    border: 1px solid black;
}

th {
    background-color: #f0eae2;
    font-weight: bold;
}

table {
    border: 1px solid black;
}

JavaScript

$("input:checkbox:not(:checked)").each(function() {
    var column = "table ." + $(this).attr("name");
    $(column).hide();
});

$("input:checkbox").click(function(){
    var column = "table ." + $(this).attr("name");
    $(column).toggle();
});