JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//cdn.datatables.net/1.10.4/css/jquery.dataTables.css">
<script src="//cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js"></script>
<script src="http://momentjs.com/downloads/moment.js"></script>
<div class="group">
    <input class="table-search" type="text" />
<table class="history table data-tables text-center first-left" width="100%">
					<thead>
						<tr>
							<th>Date &amp; Time</th>
							<th>Time</th>
							<th>Duration</th>
							<th>Temp</th>
							<th>Position</th>
							<th>Location</th>
							<th>Rate</th>
							<th>Manual</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td data-sort="12 Nov, 2014 Wednesday"><label><input type="checkbox" /> 12 Nov, 2014 Wednesday</label></td>
							<td>12:00</td>
							<td>3:15 h</td>
							<td data-order="1" data-search="temperature"><i class="ico ico-check"></i></td>
							<td data-order="0"></td>
							<td data-order="1" data-search="location"><i class="ico ico-check"></i></td>
							<td data-order="1" data-search="rate"><i class="ico ico-check"></i></td>
							<td data-order="1" data-search="manual"><i class="ico ico-check"></i></td>
							
						</tr>
						<tr>
							<td data-sort="20 Jan, 2014 Monday"><label><input type="checkbox" /> 20 Jan, 2014 Monday</label></td>
							<td>12:00</td>
							<td>3:15 h</td>
							<td data-order="0"></td>
							<td data-order="0"></td>
							<td data-order="1" data-search="location"><i class="ico ico-check"></i></td>
							<td data-order="1" data-search="rate"><i class="ico ico-check"></i></td>
							<td data-order="1" data-search="manual"><i class="ico ico-check"></i></td>
							
						</tr>
						<tr>
							<td data-sort="12 Oct, 2014 Sunday"><label><input type="checkbox" /> 12 Oct, 2014 Sunday</label></td>
							<td>18:56</td>
							<td>3:15 h</td>
							<td data-order="1" data-search="temperature"><i class="ico ico-check"></i></td>
							<td data-order="1" data-search="position"><i class="ico...

CSS

.ico {position:relative;top:1px;display:inline-block;text-align:center;font-style:normal;font-weight:300;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;speak:none;}
.ico-check:before {content:"\e013";}
.text-center {text-align:center;}

JavaScript

var dataTables = {
        init: function () {
            $('.data-tables').DataTable({
                responsive: true,
                dom: 'tlip',
                aaSorting: [], // Disable sort on load
                aoColumnDefs: [{
                    bSortable: false,
                    aTargets: [ "no-sort" ]
                }, {
                    bSearchable: false,
                    aTargets: [ "no-search" ]
                }]
            });
        },
        search: function () {
            $group = $('.group:has(.data-tables)');
            $group.each(function() {
                var $table = $(this).find('.data-tables');
                $(this).find('.table-search').on('keyup', function() {
                    $table.DataTable().search($(this).val()).draw();
                })
            });
        },
        sort: function (format, locale) {
            var types = $.fn.dataTable.ext.type;

            // Add type detection
            types.detect.unshift( function ( d ) {
                return moment( d, format, locale, true ).isValid() ?
                'moment-'+format :
                    null;
            } );

            // Add sorting method - use an integer for the sorting
            types.order[ 'moment-'+format+'-pre' ] = function ( d ) {
                return moment( d, format, locale, true ).unix();
            };
        }
    }

dataTables.sort('D MMM, YYYY dddd');
dataTables.init();
dataTables.search();