JSFiddle - React, Tailwind, and code Playground

by bmarsh123

HTML

<table width="200" border="1" cellspacing="0" cellpadding="0" style="width:400px;">
    <thead>
  <tr>
    <th>Name</th>
    <th>Age</th>
    <th>Date of birth</th>
    <th>ID</th>
  </tr>
    </thead>
    <tbody>
  <tr>
    <td>A</td>
    <td>20</td>
    <td>20/2/1995</td>
    <td>4</td>
  </tr>
  <tr>
    <td>F</td>
    <td>12</td>
    <td>12/4/2000</td>
    <td>11</td>
  </tr>
  <tr>
    <td>V</td>
    <td>43</td>
    <td>11/02/1977</td>
    <td>34</td>
  </tr>
  <tr>
    <td>H</td>
    <td>25</td>
    <td>30/01/1980</td>
    <td>78</td>
  </tr>
    </tbody>
</table>

CSS

.highlighted { background-color: #E5E8EA; }
.edittext { display: none; }
.rightborder { border-right: 2px solid #EEEEEE; }
.sortable {
    color: #666;
    cursor: pointer;
    text-decoration: underline;
}
.sortable:hover { color: black; }
.sorted-asc, .sorted-desc  { color: black; }

JavaScript

$('thead th').each(function(column) {
    $(this).addClass('sortable').click(function() {
        var findSortKey = function($cell) { return $cell.find('.sort-key').text().toUpperCase() + ' ' + $cell.text().toUpperCase(); };
        var sortDirection = $(this).is('.sorted-asc') ? -1 : 1;
        // Get rows with data for sorting
        var $rows = $(this).parent().parent().parent().find('tbody tr').get();
        // Loop through rows
        $.each($rows, function(index, row) { row.sortKey = findSortKey($(row).children('td').eq(column)); });
        // Sort rows alphabetically
        $rows.sort(function(a, b) {
            if (a.sortKey < b.sortKey) return -sortDirection;
            if (a.sortKey > b.sortKey) return sortDirection;
            return 0;
        });
        // Add rows in correct order to bottom of table
        $.each($rows, function(index, row) {
            $('tbody').append(row);
            row.sortKey = null;
        });
        // Identify column sort order
        $('th').removeClass('sorted-asc sorted-desc');
        var $sortHead = $('th').filter(':nth-child(' + (column + 1) + ')');
        sortDirection == 1 ? $sortHead.addClass('sorted-asc') : $sortHead.addClass('sorted-desc');
        // Identify column to be sorted
        $('td').removeClass('sorted').filter(':nth-child(' + (column + 1) + ')').addClass('sorted');
    });
});