JSFiddle - React, Tailwind, and code Playground

by khSam

HTML

<div class="TabContainer TabContent">

        <div class="legend">All Resellers</div>

        <table id="agents" style="margin-bottom: 10px">
            <thead>
                <tr>
                    <th>Id</th>
                    <th>Join Date</th>
                    <th>First Name </th>
                    <th>Last Name</th>
                    <th>Website</th>               
                </tr>
            </thead>
            <tfoot>
            <tr>
                <th>Id</th>
                    <th>Join Date</th>
                    <th>First Name </th>
                    <th>Last Name</th>
                    <th>Website</th>
                    
            </tr>
        </tfoot>
            <tbody>


            </tbody>
        </table>

    </div>

CSS

input[type='text'] {
        height: 28px;
    }

    table tbody td {
        min-width: 130px;
        width: 100px;
        /*max-width: 150px;*/
        text-align: center;
    }

    .disabled {
    background-color: blue;
    color: #fff;
     font-size: 14px; 
}

    .idcolwidth {
        min-width: 30px;
        width: 40px;
        max-width: 40px;
    }

    .emailcolwidth {
        min-width: 230px;
        width: 250px;
        max-width: 250px;
    }

    tfoot {
    display: table-header-group;
}

    tfoot input {
        width: 100%;
        padding: 3px;
        box-sizing: border-box;
    }

JavaScript

$(document).ready(function () {


            $('#agents tfoot th').each(function () {
                var title = $(this).text();
                $(this).html('<input type="text" placeholder="Search ' + title + '" />');
            });



  var tableInstance  =  $('#agents').DataTable({
                "bServerSide": true,
                "sAjaxSource": "@Url.Action("NewPromotersQuery", "Admin")",
                "bProcessing": true,
                "type": "POST",
                "pagingType": "full_numbers",
                "sServerMethod" : "POST",
      //"info": "true",
               "searchable":"true",
                "sScrollX": "100%",
                "bAutoWidth": false, // Disable the auto width calculation 
                "aoColumns": [
                       { "sName": "Id" },
                       { "sName": "Join Date" },
                       { "sName": "First Name" },
                       { "sName": "Last Name" },
                       { "sName": "Website" },
                      
                ]
                });



            tableInstance.columns().every(function () {
                var that = this;

                $('input', this.footer()).on('keyup change', function () {
                    if (that.search() !== this.value) {
                        that
                            .search(this.value)
                            .draw();
                    }
                });
            });