JSFiddle - React, Tailwind, and code Playground

by VaAlina

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container">        
  <table class="table">
    <thead>
      <tr>
        <th id="id">Id</th>
        <th id="name">Name</th>
        <th id="price">Price</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>cake</td>
        <td>23</td>
      </tr>
    </tbody>
  </table>
</div>

CSS

thead{
  font-weight: bold !important;
  color: white;
  background-color: #DC143C;
}

JavaScript

var list = {
    data: [[1, "cake", 23], [2, "coffee", 12], [3, "book", 678]],
    test:[],
    sortByName: function(){
        list.test = list.data.sort(function(a, b){return a[1]-b[1]}).reverse();
    },
    sortByPrice: function(){
        list.test = list.data.sort(function(a, b){return a[2]-b[2]});
    },
    sortById: function(){
         list.test = list.data.sort(function(a, b){return a[0]-b[0]});
    },
    removeAllElements: function(){
        var tbody = document.getElementsByTagName("TBODY")[0];
        while(tbody.firstChild){
            tbody.removeChild(tbody.firstChild);
        }        
    },
    addAllElements: function() {
        var tbody = document.getElementsByTagName("TBODY")[0],
        fragment = document.createDocumentFragment();
        for (var k = 0; k < list.test.length; k++) {
            var tr = document.createElement("TR");
            for (var i = 0; i < 3; i++) {
                var td = document.createElement("TD"),
                text = document.createTextNode(list.test[k][i]);
                td.appendChild(text);
                tr.appendChild(td);
            }
            fragment.appendChild(tr);
       }
     tbody.appendChild(fragment);
     },
     updateList: function(){
         list.removeAllElements();
         list.addAllElements();
     },
     addListeners: function(){
     /*Adding event listners.*/
     document.getElementById("id").addEventListener("click", function(){
        list.sortById();
        list.updateList();
     });
     document.getElementById("name").addEventListener("click", function(){
        list.sortByName();
        list.updateList();
     });
     document.getElementById("price").addEventListener("click", function(){
        list.sortByPrice();
        list.updateList();
     });
   }
};

list.addListeners();