JSFiddle - React, Tailwind, and code Playground

by terby

HTML

SORT DIVTABLE
<div class="divTable blueTable sortable">
  <div class="divTableHeading">
    <div class="divTableRow">
      <div class="divTableHead">head1</div>
      <div class="divTableHead">head2</div>
      <div class="divTableHead">head3</div>
      <div class="divTableHead">head4</div>
    </div>
  </div>
  <div class="divTableBody">
    <div class="divTableRow">
      <div class="divTableCell">2.2</div>
      <div class="divTableCell">1</div>
      <div class="divTableCell">1</div>
      <div class="divTableCell">1</div>
    </div>
    <div class="divTableRow">
      <div class="divTableCell">4.0</div>
      <div class="divTableCell">22</div>
      <div class="divTableCell">22</div>
      <div class="divTableCell">22</div>
    </div>
    <div class="divTableRow">
      <div class="divTableCell">1.1</div>
      <div class="divTableCell">3</div>
      <div class="divTableCell">3</div>
      <div class="divTableCell">3</div>
    </div>
    <div class="divTableRow">
      <div class="divTableCell">6.6</div>
      <div class="divTableCell">4</div>
      <div class="divTableCell">4</div>
      <div class="divTableCell">4</div>
    </div>
  </div>
</div>
<div class="blueTable outerTableFooter">
  <div class="tableFootStyle">
    <div class="links"><a href="#">&laquo;</a> <a class="active" href="#">1</a> <a href="#">2</a> <a href="#">3</a> <a href="#">4</a> <a href="#">&raquo;</a></div>
  </div>
</div>

CSS

th {
  cursor: pointer;
  background-color: coral;
}

table,
th,
td {
  border: 1px solid black;
}

div.blueTable {
  border: 1px solid #1C6EA4;
  background-color: #EEEEEE;
  width: 100%;
  text-align: left;
  border-collapse: collapse;
}

.divTable.blueTable .divTableCell,
.divTable.blueTable .divTableHead {
  border: 1px solid #AAAAAA;
  padding: 3px 2px;
}

.divTable.blueTable .divTableBody .divTableCell {
  font-size: 13px;
}

.divTable.blueTable .divTableRow:nth-child(even) {
  background: #D0E4F5;
}

.divTable.blueTable .divTableHeading {
  background: #1C6EA4;
  background: -moz-linear-gradient(top, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
  background: -webkit-linear-gradient(top, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
  background: linear-gradient(to bottom, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
  border-bottom: 2px solid #444444;
}

.divTable.blueTable .divTableHeading .divTableHead {
  font-size: 15px;
  font-weight: bold;
  color: #FFFFFF;
  border-left: 2px solid #D0E4F5;
}

.divTable.blueTable .divTableHeading .divTableHead:first-child {
  border-left: none;
}

.blueTable .tableFootStyle {
  font-size: 14px;
  font-weight: bold;
  color: #FFFFFF;
  background: #D0E4F5;
  background: -moz-linear-gradient(top, #dcebf7 0%, #d4e6f6 66%, #D0E4F5 100%);
  background: -webkit-linear-gradient(top, #dcebf7 0%, #d4e6f6 66%, #D0E4F5 100%);
  background: linear-gradient(to bottom, #dcebf7 0%, #d4e6f6 66%, #D0E4F5 100%);
  border-top: 2px solid #444444;
}

.blueTable .tableFootStyle {
  font-size: 14px;
}

.blueTable .tableFootStyle .links {
  text-align: right;
}

.blueTable .tableFootStyle .links a {
  display: inline-block;
  background: #1C6EA4;
  color: #FFFFFF;
  padding: 2px 8px;
  border-radius: 5px;
}

.blueTable.outerTableFooter {
  border-top: none;
}

.blueTable.outerTableFooter .tableFootStyle {
  padding: 3px 5px;
}

/* DivTable.com */
.divTable {
  display: table;
}

.divTableRow {
  display: table-row;
}

.divTableHeading {
  display:...

JavaScript

$('.divTableHead').click(function() {
  var table = $(this).parents('.divTable').eq(0)
  var rows = table.find('.divTableRow:gt(0)').toArray().sort(comparer($(this).index()))
	
  this.asc = !this.asc
  if (!this.asc) {
    rows = rows.reverse()
  }
  for (var i = 0; i < rows.length; i++) {
    table.append(rows[i])
  }
})

function comparer(index) {
  return function(a, b) {
    var valA = getCellValue(a, index),
      valB = getCellValue(b, index)
			//alert(valA);
    return $.isNumeric(valA) && $.isNumeric(valB) ? valA - valB : valA.toString().localeCompare(valB)
  }
}

function getCellValue(row, index) {
  return $(row).children('.divTableCell').eq(index).text()
}