JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.10/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="table-content table-responsive">
    <table id="examples" class="display tvalues" cellspacing="0" width="100%" name="tabel">
        <thead>
            <tr>
                <!--th>ID</th-->
                <th>User Id</th>
                <th>User Name</th>
                <th>Project Name</th>
                <th>Work Description</th>
                <!--<th>Reported On</th>-->
            </tr>
        </thead>
        <tfoot>
            <tr>
                <!--th>ID</th-->
                <th>User Id</th>
                <th>User Name</th>
                <th>Project Name</th>
                <th>Work Description</th>
                <!-- <th>Reported On</th>-->
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <td>9cbc6e5a99bf96a61e5fa0445315286f</td>
                <td>arjun</td>
                <td>today's day report</td>
                <td>
                    <p>this my first day report employeee 2222</p>
                </td>
            </tr>
            <tr>
                <td>9cbc6e5a99bf96a61e5fa0445315286f</td>
                <td>arjun</td>
                <td>today's day report</td>
                <td>
                    <p>this my first day report employeee 33333</p>
                </td>
            </tr>
            <tr>
                <td>9cbc6e5a99bf96a61e5fa0445315286f</td>
                <td>arjun</td>
                <td>today's day report</td>
                <td>
                    <p>this my first day report employeee 44444</p>
                </td>
            </tr>

            <tr>
               ...

JavaScript

$(document).ready(function () {
        var table = $('#examples').DataTable();
        $('a.toggle-vis').on('click', function (e) {
            e.preventDefault();

            var column = table.column($(this).attr('data-column'));
            column.visible(!column.visible());
        });

        $('#examples tfoot th').each(function () {
            var title = $('#examples thead th').eq($(this).index()).text();
            $(this).html('<input tyepe="text" placeholder="Search ' + title + '"/>');
        });
        table.columns().eq(0).each(function (colIdx) {
            $('input', table.column(colIdx).footer()).on('keyup change', function () {
                table
                        .column(colIdx)
                        .search(this.value)
                        .draw();
            });
        });
    });