It gives more flexibility to the user by allowing them to hide and show those columns which they don’t want to see on the list.
You can do this with jQuery by toggling the specific columns according to the selection.
In the demonstration, I am creating a table layout for listing the employee details and use check boxes to hide and show the table columns using jQuery.

1. Table structure

I am using employee table to list the records in the <table >.

CREATE TABLE `employee` (
  `id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,
  `emp_name` varchar(100) NOT NULL,
  'salary' varchar(20) NOT NULL,
  'gender' varchar(10) NOT NULL,
  'city' varchar(80) NOT NULL,
  'email' varchar(100) NOT NULL,
  `timestamp` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

2. Configuration

Create a new config.php file for the database connection.

<?php

$host = "localhost"; /* Host name */
$user = "root"; /* User */
$password = ""; /* Password */
$dbname = "tutorial"; /* Database name */
$con = mysqli_connect($host, $user, $password,$dbname);

// Check connection
if (!$con) {
 die("Connection failed: " . mysqli_connect_error());
}

3. HTML and PHP

I am using PHP only to fetch records from the database table and using that data to create new rows in the <table>.
With <table > also creating 6 check boxes for each table columns – S.no, Name, Salary, Gender, City, and Email. According to check uncheck state on the checkbox toggle the columns using jQuery.
I have created check boxes id like – col_1, col_2, col_3, etc. according to the position of the table columns.

<?php
    include("config.php");
?>

<div class="container">
    <div>
        <strong>Checked the Checkbox for Hide column</strong>
        <input type="checkbox" class="hidecol" value="name" id="col_2" />&nbsp;Name&nbsp;
        <input type="checkbox" class="hidecol" value="salary" id="col_3" />&nbsp;Salary
        <input type="checkbox" class="hidecol" value="gender" id="col_4" />&nbsp;Gender
        <input type="checkbox" class="hidecol" value="city" id="col_5" />&nbsp;City
        <input type="checkbox" class="hidecol" value="email" id="col_6" />&nbsp;Email
    </div>
    <table width="100%" id="emp_table" border="0">
        <tr class="tr_header">
            <th>S.no</th>
            <th>Name</th>
            <th>Salary</th>
            <th>Gender</th>
            <th>City</th>
            <th>Email</th>
        </tr>
        <?php

        // selecting rows
        $sql = "SELECT * FROM employee ORDER BY ID ASC";
        $result = mysqli_query($con,$sql);
        $sno = 1;

        while($fetch = mysqli_fetch_array($result)){
            $name = $fetch['emp_name'];
            $salary = $fetch['salary'];
            $gender = $fetch['gender'];
            $city = $fetch['city'];
            $email = $fetch['email'];
            ?>
            <tr>
                <td align='center'><?php echo $sno; ?></td>
                <td align='center'><?php echo $name; ?></td>
                <td align='center'><?php echo $salary; ?></td>
                <td align='center'><?php echo $gender; ?></td>
                <td align='center'><?php echo $city; ?></td>
                <td align='center'><?php echo $email; ?></td>
            </tr>
            <?php
            $sno ++;
        }
        ?>
    </table>

</div>

4. jQuery

When checkbox element gets clicked then split the element id and get the column number.
Check that element is checked or not if checked then select the table column using nth-child() method where to pass the column number and call the hide() method.
Perform its opposite if the element is not checked.
Completed Code

$(document).ready(function(){

    // Checkbox click
    $(".hidecol").click(function(){

        var id = this.id;
        var splitid = id.split("_");
        var colno = splitid[1];
        var checked = true;
         
        // Checking Checkbox state
        if($(this).is(":checked")){
            checked = true;
        }else{
            checked = false;
        }
        setTimeout(function(){
            if(checked){
                $('#emp_table td:nth-child('+colno+')').hide();
                $('#emp_table th:nth-child('+colno+')').hide();
            } else{
                $('#emp_table td:nth-child('+colno+')').show();
                $('#emp_table th:nth-child('+colno+')').show();
            }

        }, 1500);

    });
});

5. Conclusion

To show and hide the table column on check box check uncheck I used nth-child() function for selecting the column and calling a required method e.g. hide() or show().
If you found this tutorial helpful then don't forget to share.