JSFiddle - React, Tailwind, and code Playground

by Lasith De Silva

HTML

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css">
<script src="//code.jquery.com/jquery-1.12.3.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/colreorder/1.3.2/js/dataTables.colReorder.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/colreorder/1.3.2/css/colReorder.dataTables.min.css">
<script src="https://cdn.datatables.net/fixedcolumns/3.2.3/js/dataTables.fixedColumns.min.js"></script>
<table id="example" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>								
                <th class="status">A</th>
                <th class="status">B</th>
                <th class="status">C</th>
                <th class="status">D</th>
                <th class="status">E</th>
                <th class="status">F</th>
								<th class="status">AA</th>
                <th class="status">BB</th>
            </tr>
        </thead>
        <tbody>
            <tr class="tr_Parentrow">
                <td>3xxdhs</td>
                <td>4f84</td>
                <td>4abb</td>
                <td>3uud</td>
                <td>3bfc</td>
                <td>5330s</td>
								<td>321</td>
                <td>124</td>
            </tr>
            <tr class="tr_childrow">
								<td>12</td>
                <td>14.2</td>
                <td>14.1</td>
                <td>18</td>
                <td>136.48</td>
               <td>16.21</td>
							 <td>321</td>
                <td>124</td>
            </tr>
            <tr class="tr_childrow">
                <td>12</td>
                <td>123</td>
                <td>543</td>
                <td>99</td>                
                <td>321</td>
                <td>124</td>
								<td>2321</td>
                <td>14</td>
            </tr>
						<tr class="tr_childrow">
                <td>3xxdhs</td>
                <td>4f84</td>
    ...

CSS

.console {
  background:#000;
  width:60%;
  padding:20px;
  height:200px; 
  color:#fff;
  overflow-x:scroll
}

JavaScript

var currRow = "";
var currOrd = "";

var table = $('#example').DataTable({
  colReorder: true,
	scrollY: "100px",
	scrollX: true,
  scrollCollapse: true,	
  paging:         false,
 // fixedColumns:   {  leftColumns: 1 }
});

table.on('click', 'td:first-of-type', function() {
  var values = [];
  var row = $(this).parent();
  var valPos = [];
  if (currRow != row.index()) { //if this row has not been sorted yet
    currOrd = "desc";
    currRow = row.index();
  }
  currOrd = (currOrd == "asc") ? "desc" : "asc"; //toggle sorting order
  log("Sort row# " + (currRow + 1) + " in " + currOrd + " order");
  row.children('td').each(function() {
    values.push(this.innerHTML);
    valPos.push(values.length - 1);
  });

  //remove logs :)
  // 	log("initial values: " + values);
  log("initial order: " + valPos);
  //	log("sorted values: " + sortWithIndeces(values));
  sortWithIndeces(values)
  log("new column order: " + values.sortIndices);

  var colOrder = values.sortIndices;
  table.colReorder.order(colOrder);

});

//get index after sort
//credit to:
//http://stackoverflow.com/questions/3730510/javascript-sort-array-and-return-an-array-of-indicies-that-indicates-the-positi
//and http://stackoverflow.com/questions/38076749/left-to-right-scrolling-on-datatable/38077921#38077921
function sortWithIndeces(toSort) {
  var firCol = toSort[0];
  for (var i = 1; i < toSort.length; i++) {
    toSort[i] = [toSort[i], i];
  }
  toSort.sort(function(a, b) {
    if ((a != firCol) && (b != firCol)) {
      if (currOrd == "asc") {
        if (($.isNumeric(a[0])) && ($.isNumeric(a[0]))) {
          return a[0] - b[0];
        } else {
          return ((a[0] > b[0]) ? 1 : ((a[0] < b[0]) ? -1 : 0));
        }
      } else //descending order
      {
        if (($.isNumeric(a[0])) && ($.isNumeric(a[0]))) {
          return b[0] - a[0];
        } else {
          return ((b[0] > a[0]) ? 1 : ((b[0] < a[0]) ? -1 : 0));
        }
      }
    } else
      return 0;
  });
  toSort.sortIndices...