title: sorting the table when user click on the column
body: <p>I have the html table which populated the dynamic values from json(written in the javascript code).
  When user click on any column header in the table, the table should sort accordingly. Any suggestions would be helpful.</p>
  
  <p>When user click on the column the table should sort ascending and then descending if user clicks for the second time on the same column.</p>
  
  <p>Demo <a href="https://jsfiddle.net/o2ram4tu/" rel="nofollow noreferrer">https://jsfiddle.net/o2ram4tu/</a></p>
  
  <p>Sample code below:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function CreateTableFromJSON() {
          var myBooks = [
              {
                  "Book ID": "1",
                  "Book Name": "Computer Architecture",
                  "Category": "Computers",
                  "Price": "125.60"
              },
              {
                  "Book ID": "2",
                  "Book Name": "Asp.Net 4 Blue Book",
                  "Category": "Programming",
                  "Price": "56.00"
              },
              {
                  "Book ID": "3",
                  "Book Name": "Popular Science",
                  "Category": "Science",
                  "Price": "210.40"
              }
          ]
  
          // EXTRACT VALUE FOR HTML HEADER. 
          // ('Book ID', 'Book Name', 'Category' and 'Price')
          var col = [];
          for (var i = 0; i &lt; myBooks.length; i++) {
              for (var key in myBooks[i]) {
                  if (col.indexOf(key) === -1) {
                      col.push(key);
                  }
              }
          }
          var table = document.getElementById("resulttable");
   var tr = table.insertRow(1);   
  
          // ADD JSON DATA TO THE TABLE AS ROWS.
          for (var i = 0; i &lt; myBooks.length; i++) {
  
              tr = table.insertRow(-1);
  
              for (var j = 0; j &lt; col.length; j++) {
                  var tabCell = tr.insertCell(-1);
                  tabCell.innerHTML = myBooks[i][col[j]];
              }
          }
  
          // FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER.
          var divContainer = document.getElementById("showData");
          divContainer.innerHTML = "";
          divContainer.appendChild(table);
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"&gt;&lt;/script&gt;
      &lt;title&gt;Convert JSON Data to HTML Table&lt;/title&gt;
      &lt;style&gt;
          th, td, p, input {
              font:14px Verdana;
          }
          table, th, td 
          {
              border: solid 1px #DDD;
              border-collapse: collapse;
              padding: 2px 3px;
              text-align: center;
          }
          th {
              font-weight:bold;
          }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body onload="CreateTableFromJSON()" &gt; 
  &lt;table class="fdt-datatable" id="resulttable" name="resulttable"&gt;
              &lt;tbody&gt;
              &lt;tr&gt;
                  &lt;th name = "bookID"&gt; Book ID&lt;/th&gt;
                  &lt;th name = "bookName"&gt; Book Name&lt;/th&gt;
                  &lt;th name = "category"&gt; Category&lt;/th&gt;
                  &lt;th name = "price"&gt; Price&lt;/th&gt;
                  &lt;/tr&gt;
                  &lt;/tbody&gt;
                  &lt;/table&gt;
      &lt;p id="showData"&gt;&lt;/p&gt;
  &lt;/body&gt;
   
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>