JSFiddle - React, Tailwind, and code Playground

by seefeld

HTML

<script src="http://datatables.net/download/build/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css">
<table id="table">
    <thead>
        <tr>
            <th>Name</th>
            <th class="uk-date-column">Date</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Ira N. Ramirez</td>
            <td>10/09/2012</td>
        </tr>
        <tr>
            <td>Ann T. Berg</td>
            <td>20/01/2013</td>
        </tr>
        <tr>
            <td>Hiroko D. Walter</td>
            <td>23/12/2011</td>
        </tr>
        <tr>
            <td>Flavia N. Ware</td>
            <td>08/08/2013</td>
        </tr>
        <tr>
            <td>Erich T. Sawyer</td>
            <td>28/10/2012</td>
        </tr>
        <tr>
            <td>Aiko J. Humphrey</td>
            <td>14/11/2012</td>
        </tr>
        <tr>
            <td>Fuller O. Hendrix</td>
            <td>16/11/2012</td>
        </tr>
        <tr>
            <td>India B. Valenzuela</td>
            <td>01/08/2013</td>
        </tr>
        <tr>
            <td>Blaze F. Decker</td>
            <td>25/09/2013</td>
        </tr>
    </tbody>
</table>

CSS

body {padding:  20px;}
.filterMatches
{
    background-color: #BFFF00;
}

/*
 * Table wrapper
 */
table {width: 100%;}

.dataTables_wrapper {
    position: relative;
    clear: both;
    *zoom: 1;
}


/*
 * Page length menu
 */
.dataTables_length {
    float: left;
}


/*
 * Filter
 */
.dataTables_filter {
    float: right;
    text-align: right;
}


/*
 * Table information
 */
.dataTables_info {
    clear: both;
    float: left;
}


/*
 * Pagination
 */
.dataTables_paginate {
    float: right;
    text-align: right;
}

JavaScript

// UK Date Sorting
jQuery.fn.dataTableExt.oSort['uk_date-asc']  = function(a,b) {
    var ukDatea = a.split('/');
    var ukDateb = b.split('/');
    
    var x = (ukDatea[2] + ukDatea[1] + ukDatea[0]) * 1;
    var y = (ukDateb[2] + ukDateb[1] + ukDateb[0]) * 1;
    
    return ((x < y) ? -1 : ((x > y) ?  1 : 0));
};

jQuery.fn.dataTableExt.oSort['uk_date-desc'] = function(a,b) {
    var ukDatea = a.split('/');
    var ukDateb = b.split('/');
    
    var x = (ukDatea[2] + ukDatea[1] + ukDatea[0]) * 1;
    var y = (ukDateb[2] + ukDateb[1] + ukDateb[0]) * 1;
    
    return ((x < y) ? 1 : ((x > y) ?  -1 : 0));
}
     
$(document).ready(function() { 
     
    $('#table').dataTable( { 
        "bPaginate": true, 
        "bLengthChange": true, 
        "bFilter": true, 
        "aoColumnDefs" : [ 
               { "aTargets" : ["uk-date-column"] , "sType" : "uk_date"} 
        ] 
    }); 
     
});