JSFiddle - React, Tailwind, and code Playground

by chridam

HTML

<link rel="stylesheet" href="//datatables.net/download/build/nightly/jquery.dataTables.css">
<script src="//datatables.net/download/build/nightly/jquery.dataTables.js"></script>
<div class="container">
    <table id="example" class="display" width="100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
        
        <tfoot>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </tfoot>
        
        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>25/04/2011</td>
                <td>$3,120</td>
            </tr>
            <tr>
                <td>Garrett Winters</td>
                <td>Director</td>
                <td>Edinburgh</td>
                <td>63</td>
                <td>25/07/2011</td>
                <td>$5,300</td>
            </tr>
            <tr>
                <td>Ashton Cox</td>
                <td>Technical Author</td>
                <td>San Francisco</td>
                <td>66</td>
                <td>12/01/2009</td>
                <td>$4,800</td>
            </tr>
            <tr>
                <td>Cedric Kelly</td>
                <td>Javascript Developer</td>
                <td>Edinburgh</td>
                <td>22</td>
                <td>29/03/2012</td>
                <td>$3,600</td>
            </tr>
            <tr>
                <td>Jenna Elliott</td>
                <td>Financial Controller</td>
                <td>Edinburgh</td>
                <td>33</td>
                <td>28/11/2008</td>
...

CSS

body {
	font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
	margin: 0;
	padding: 0;
	color: #333;
	background-color: #fff;
}


div.container {
	min-width: 980px;
	margin: 0 auto;
}

JavaScript

$(document).ready( function () {
	 $('#example').dataTable( {
        "aoColumns": [
            null,
            null,
            null,
            null,
            null,
            { "sType": "date-uk" }  
        ]
    });
    
} );

jQuery.extend( jQuery.fn.dataTableExt.oSort, {
"date-uk-pre": function ( a ) {
  console.log(a);
    var ukDatea = a.split('/');
  console.log(ukDatea);  
  return (ukDatea[0] + ukDatea[1] + ukDatea[2]) * 1;
},

"date-uk-asc": function ( a, b ) {
    return ((a < b) ? -1 : ((a > b) ? 1 : 0));
},

"date-uk-desc": function ( a, b ) {
    return ((a < b) ? 1 : ((a > b) ? -1 : 0));
}
} );

function trim(str) {
    str = str.replace(/^\s+/, '');
    for (var i = str.length - 1; i >= 0; i--) {
        if (/\S/.test(str.charAt(i))) {
            str = str.substring(0, i + 1);
            break;
        }
    }
    return str;
}