JSFiddle - React, Tailwind, and code Playground

by supkat

HTML

<link rel="stylesheet" href="https://cdn.datatables.net/colreorder/1.3.2/css/colReorder.dataTables.min.css">
<link rel="stylesheet" href="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css">
<link rel="stylesheet" href="//cdn.jsdelivr.net/bootstrap/latest/css/bootstrap.css">
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
 

<table id="mytable" class="table display table-striped responsive-utilities jambo_table">
 

<thead>

        <tr>
            <th>
                Bank ID
            </th>

            <th>
                Bank Name
            </th>

            <th class="HideColumn">
                CreatedBy
            </th>

            <th class="HideColumn">
                DateCreated
            </th>

            <th class="HideColumn">
                UpdatedBy
            </th>

            <th class="HideColumn">
                DateUpdated
            </th>

            <th>Action</th>
        </tr>


    <tr class="filters">
        <th class="input-filter">
            Bank ID
        </th>

        <th class="input-filter">
            Bank Name
        </th>

        <th class="input-filter">
            CreatedBy
        </th>

        <th class="date-filter">
            DateCreated
        </th>

        <th class="input-filter">
            UpdatedBy
        </th>

        <th class="date-filter">
            DateUpdated
        </th>

        <th></th>
    </tr>
    </thead>
    <tbody>

            <tr>
                <td>
                    1
                </td>
                <td>
                    Bank of America
                </td>
                <td>
                    kpaul
                </td>
                <td>
                    
                </td>
                <td >
                    kpaul
                </td>
                <td>
                    08-May-2016 14:03:18
                </td>
                <td>

                    <div class="dropdown">
      ...

CSS

/*-- tables*/

#mytable{
display:none;
   
}
.dataTables_length {
	width: 10%;

}

.dataTables_info {
	width: 40%;
}


table.jambo_table thead tr:first-child{
	background: #186DA2;
	color: #ECF0F1;
}


table a{

	color:#1ABB9C;
}

table.display {

	width: 100% !important;
}    


tfoot input {
	 margin: 0; 

}
tfoot .form-control{
    font-size:13px;
}


table.jambo_table thead tr:last-child{
	background: white;
}


.dt-buttons{
    margin-right:15px;
}


.dataTables_filter input{
    font-weight:bold;
}

div.dataTables_filter input {
	margin-left: 0 !important;

}

  </style>

JavaScript

$(function () {
     


       $('#mytable thead tr.filters th').each(function () {
           var title = $(this).text();


           if ($(this).hasClass("input-filter")) {


               $(this).html('<input name ="' + $.trim(title).replace(/ /g, '') + '" type="text" class = "form-control" placeholder="Search ' + $.trim(title) + '" />');
           }
           else if ($(this).hasClass("date-filter")) {

               $(this).html('<div class="input-prepend input-group"><span class="add-on input-group-addon"><i class="glyphicon glyphicon-calendar fa fa-calendar"></i></span><input type="text" style="width: 200px" name="' + $.trim(title).replace(/ /g, '') + '"  placeholder="Search ' + $.trim(title) + '" class="form-control daterange"/></div>');

           }

       });

           

        // DataTable
        var table = $("#mytable").DataTable({
                     
            dom: "rBftlip",

            buttons: [
            {
                extend: 'collection',
                text: 'Export',
                buttons:
                    [
                               
                        {
                            extend: "copy",
                            exportOptions: { columns: ':visible:not(:last-child)' }, //last column has the action types detail/edit/delete
                            footer:true
                        },
                        {
                            extend: "csv",
                            exportOptions: { columns: ':visible:not(:last-child)' },
                            footer: true
                        },
                        {
                            extend: "excel",
                            exportOptions: { columns: ':visible:not(:last-child)' },
                            footer:true
                        },
                        {
                            extend: "pdf",
                            exportOptions: { columns: ':visible:not(:last-child)' },
                 ...