JSFiddle - React, Tailwind, and code Playground

HTML

<table class="table table-striped" id="table" border="0">
    <thead>
        <tr>
            <th><a id="sort-id" href="#">id</a></th>
            <th><a id="sort-date"  href="#">date</a></th>
            <th><a id="sort-notify"  href="#">notify</a></th>
            
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>31-03-2013 06:12:57 PM</td>
            <td>gold</td>
        </tr>
        <tr>
            <td>2</td>
            <td>31-03-2013 06:14:57 PM</td>
            <td>diamond</td>
        </tr>
        <tr>
            <td>3</td>
            <td>31-03-2013 06:10:57 PM</td>
            <td>silver</td>
        </tr>
        <tr>
            <td>4</td>
            <td>31-03-2013 06:11:57 PM</td>
            <td>bronze</td>
        </tr>
    </tbody>
</table>

CSS

.table {
  width: 100%;
  margin-bottom: 20px;
}

.table th,
.table td {
  padding: 8px;
  line-height: 20px;
  text-align: left;
  vertical-align: top;
  border-top: 1px solid #dddddd;
}

.table th {
  font-weight: bold;
}

.table thead th {
  vertical-align: bottom;
}

.table caption + thead tr:first-child th,
.table caption + thead tr:first-child td,
.table colgroup + thead tr:first-child th,
.table colgroup + thead tr:first-child td,
.table thead:first-child tr:first-child th,
.table thead:first-child tr:first-child td {
  border-top: 0;
}

.table tbody + tbody {
  border-top: 2px solid #dddddd;
}

.table .table {
  background-color: #ffffff;
}

.table-condensed th,
.table-condensed td {
  padding: 4px 5px;
}

.table-bordered {
  border: 1px solid #dddddd;
  border-collapse: separate;
  *border-collapse: collapse;
  border-left: 0;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
}

.table-bordered th,
.table-bordered td {
  border-left: 1px solid #dddddd;
}

.table-bordered caption + thead tr:first-child th,
.table-bordered caption + tbody tr:first-child th,
.table-bordered caption + tbody tr:first-child td,
.table-bordered colgroup + thead tr:first-child th,
.table-bordered colgroup + tbody tr:first-child th,
.table-bordered colgroup + tbody tr:first-child td,
.table-bordered thead:first-child tr:first-child th,
.table-bordered tbody:first-child tr:first-child th,
.table-bordered tbody:first-child tr:first-child td {
  border-top: 0;
}

.table-bordered thead:first-child tr:first-child > th:first-child,
.table-bordered tbody:first-child tr:first-child > td:first-child,
.table-bordered tbody:first-child tr:first-child > th:first-child {
  -webkit-border-top-left-radius: 4px;
          border-top-left-radius: 4px;
  -moz-border-radius-topleft: 4px;
}

.table-bordered thead:first-child tr:first-child > th:last-child,
.table-bordered tbody:first-child tr:first-child > td:last-child,
.table-bordered tbody:first-child...

JavaScript

var $ = function( id ) {  return document.getElementById( id ); },
    $$ = function( query , base ) { 
        return ( base||document).querySelectorAll( query ); 
    },
    table = $('table'),
    rows = table.rows;

function getDate( str ) {

    var ar =  /(\d{2})-(\d{2})-(\d{4}) (\d{2}):(\d{2}):(\d{2}) ([AM|PM]+)/ 
         .exec( str ) 
      
    return new Date(
        (+ar[3]),
        (+ar[2])-1, // Careful, month starts at 0!
        (+ar[1]),
        (+ar[4])+ ( ar[7]=='PM'? 12 :0 ),
        (+ar[5]),
        (+ar[6])
    );
}

function updateRows( rows) {
    var tbody = $$('tbody')[0];
    while (tbody.hasChildNodes()) {
        tbody.removeChild(tbody.lastChild);
    }
    console.log( rows );
    for ( var i =0; i< rows.length ;i++ ){
          tbody.appendChild( rows[i] );  
    }
}

function getSortable(){
    
    var trows = $('table').rows ,
        rows =[];    
    
    for( var i =1; i< trows.length; i++ ){
        rows.push( trows[i] );
    }
    
    return rows;
}

function sortByNotify( el ){
    el.sort = ! el.sort;
    var rows = getSortable();    
    [].sort.call( rows, function( a, b ){
        var aVal =  $$('td', a )[2].innerHTML ,
            bVal = $$('td', b )[2].innerHTML;
        return el.sort? aVal < bVal : aVal > bVal;  
    });    
    updateRows( rows ); 
}


function sortByDate( el ){
    el.sort = ! el.sort;
    var rows = getSortable();    
    [].sort.call( rows, function( a, b ){
        var aVal =  getDate( $$('td', a )[1].innerHTML ) ,
            bVal = getDate(  $$('td', b )[1].innerHTML );
        return el.sort? aVal < bVal : aVal > bVal;  
    });    
    updateRows( rows );
}

function sortById( el ){
    el.sort = ! el.sort;
    var rows = getSortable();    
    [].sort.call( rows, function( a, b ){
        var aVal =  +$$('td', a )[0].innerHTML ,
            bVal = +$$('td', b )[0].innerHTML;
        return el.sort? aVal < bVal : aVal > bVal;  
    });    
    updateRows( rows...