JSFiddle - React, Tailwind, and code Playground

by Sree K

HTML

<link rel="stylesheet" href="//cdn.datatables.net/1.10.4/css/jquery.dataTables.css">
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="//cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js"></script>
<script src="http://vitalets.github.io/x-editable/assets/mockjax/jquery.mockjax.js"></script>
<table id="example" class="display" width="100%" cellspacing="0">
    <thead>
        <tr>
            <th>Select</th>
            <th>Path</th>
            <th>Key</th>
            <th>Parent</th>
            <th>Name</th>
            <th>Value</th>
        </tr>
    </thead>
</table>

CSS

td.details-control {
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAABGdBTUEAANbY1E9YMgAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAMDSURBVHjarFXdS5NRGH/eufyK2ZZWvqKiyZQQpQ9hNKVIHZLzpq7Ey8SbQhG66R+IPqCuCqKLrsK8kbCMhcOwNdimglZ24WSVHyxzVjqZQ9+P0/Mcz1upE7vwjB/nnOfjt3Oej/NKkHqYEGmIA4h0saahITYQiljr2x2lFHszIgthQeQgDgpSEGQJRByxikgiVARLdSoiy0QcRVR2dHRc8fv9nmg0OqvrukagNclIRzbCNjPFwbiATlWAcPT39z9VFGWD7TJIRzZkK3y2kEriSvmyLJ+LRCIfySmpJZk3Nsiuf+pmLaGLrDnYxLonO9mr7wMsoSY4MdmSD/oeExySJBJAsSoOBoN3HQ5H07KyDI+/PoI3S0M8OGTEpM1I0VR7uA6ull6D3PQ8CAQCHqfTeQPFMxRXI5O2rq6uhvb29k4NNOlO+DYMx4bRH386gv0DXYeZ5AxE1iJw4Ug9FBcWl8VisYnR0dFZSpJJEB5qbW29JEmS6d2SD3wxH2gaUmsqqLoG3roh8NYO8T1mB1TUjf0Yg7f4p+TT1tZ2WdzSbBBml5eXn6SAeqKvQVWRTFdBUdFZVf9kjuRch4QKknu+ebi8oqKCfLMpjmZRtOlWqzWXlFPxKXRQ8LISBFyBLaXgq/fz2ek9y+fPq1/4bLFYrEYDmLfXD8WMTrazsv4OVVN5qtaVjc0ywWsbOrPRTvF4/JfNZsuTM2SYW53nKT01cJrP4y3j3NjYi7xDQU4Bl6PvT9FFmkn05Vo4HJ4gpSvfxeO2GS+VJ8AYioghnZDWjXIjl09PT38gDjIxCFd6enr6sCz05sJmqLJWcSIOdDzRV8nBsy5kdosdWorcVEp6b2/vc9HfSppxh1AoFHe73faSopKyM3k1EF4J49XnttSizvgOqm3VcKvmJsjZMoyMjAxibz9Bjph4LFK33mJykT2YfMgaXrrY8Wd2Voo4/6Ke3Xt/n0UT0e2tl2+03n49Dlm7vTg7nq+FhYV5g4jWez1f//vAZgj9+l4PrLTfn4DfAgwAXP8AAdHdgRsAAAAASUVORK5CYII=') no-repeat center left;
    cursor: pointer;
    background-origin:content-box;
}
tr.details td.details-control {
    background:...

JavaScript

$.mockjax({
  url: 'hierarchy.json',
  responseTime: 30,
  responseText: {  "data": [{"DT_RowId": "1","level": 0,"key": "1","parent": 0,"name": "Adam","value": 154},
					    {"DT_RowId": "2","level": 1,"key": "2","parent": 1,"name": "Nelenil Adam","value": 55},
					    {"DT_RowId": "3","level": 0,"key": "3","parent": 0,"name": "Ivan","value": 112},
						{"DT_RowId": "4","level": 1,"key": "4","parent": 1,"name": "Skakal Adam","value": 99},
						{"DT_RowId": "5","level": 1,"key": "5","parent": 3,"name": "Nelenil Ivan","value": 112},
						{"DT_RowId": "6","level": 0,"key": "6","parent": 0,"name": "Karol","value": 154},
						{"DT_RowId": "7","level": 1,"key": "7","parent": 6,"name": "Hufnagel Karol","value": 80},
						{"DT_RowId": "8","level": 1,"key": "8","parent": 6,"name": "Sipeky Karol","value": 74},
						{"DT_RowId": "9","level": 2,"key": "9","parent": 4,"name": "Skakal *st* Adam","value": 40},
						{"DT_RowId": "10","level": 2,"key": "10","parent": 4,"name": "Skakal *ml* Adam","value": 59}]}
});

function compareObjectDesc(a, b) {
    if (a.key !== b.key) {
        return ((a.value < b.value) ? 1 : ((a.value > b.value) ? -1 : 0));
    } else if (typeof a.child === 'undefined' && typeof b.child === 'undefined') {
        return ((a.value < b.value) ? 1 : ((a.value > b.value) ? -1 : 0));
    } else if (typeof a.child !== 'undefined' && typeof b.child !== 'undefined') {
        return compareObjectDesc(a.child, b.child);
    } else {
        return typeof a.child !== 'undefined' ? 1 : -1;
    }
}

function compareObjectAsc(a, b) {
    if (a.key !== b.key) {
        return ((a.value < b.value) ? -1 : ((a.value > b.value) ? 1 : 0));
    } else if (typeof a.child === 'undefined' && typeof b.child === 'undefined') {
        return ((a.value < b.value) ? -1 : ((a.value > b.value) ? 1 : 0));
    } else if (typeof a.child !== 'undefined' && typeof b.child !== 'undefined') {
        return compareObjectAsc(a.child, b.child);
    } else {
        return typeof...