Add table sorting

css/main.css

@@ -36,11 +36,20 @@ table#t01 {
 table#t01 tr:nth-child(even) {
     background-color: #eee;
 }
+
 table#t01 tr:nth-child(odd) {
     background-color: #fff;
 }
+
 table#t01 th {
     color: white;
-    background-color: black;
+    background-color: grey;
     padding: 15px;
+}
+
+.boxed {
+    border: 1px solid green;
+    width: 80%;
+    box-align: center;
+    text-align: center;
 }

index.html

@@ -30,6 +30,9 @@
 
     <h1>World Data Overview ...</h1>
 
+    <div class='boxed'>Text text text text text text text text text text text text text text text text
+        text text text text text text text text text text.</div>
+
     <table id="t01"></table>
     <script>
         handleFile()

main.js

@@ -1,6 +1,8 @@
 // Source: https://blog.mounirmesselmeni.de/2012/11/20/reading-csv-file-with-javascript-and-html5-file-api/
 // Source: https://www.js-tutorials.com/javascript-tutorial/reading-csv-file-using-javascript-html5/
 // Source: https://stackoverflow.com/questions/13329853/reading-server-file-with-javascript
+// Source: https://www.w3schools.com/howto/howto_js_sort_table.asp
+// Source: https://stackoverflow.com/questions/19105009/how-to-insert-variables-in-javascript-strings
 
 function handleFile() {
     // Check for the various File API support.
@@ -31,7 +33,7 @@ function processData(csv) {
     var data = allTextLines[0].split(",");
 
     for (var j = 0; j < data.length; j++) {
-        table += "<th>";
+        table += "<th onclick=\"sortTable(" + j + ")\">";
         table += data[j];
         table += "</th>";
     }
@@ -57,3 +59,65 @@ function processData(csv) {
 
     document.getElementById('t01').innerHTML = table;
 }
+
+function sortTable(n) {
+    var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
+    table = document.getElementById("t01");
+    switching = true;
+
+    // Set the sorting direction to ascending:
+    dir = "asc";
+
+    /* Make a loop that will continue until
+    no switching has been done: */
+    while (switching) {
+        // Start by saying: no switching is done:
+        switching = false;
+        rows = table.rows;
+
+        /* Loop through all table rows (except the
+        first, which contains table headers): */
+        for (i = 1; i < (rows.length - 1); i++) {
+            // Start by saying there should be no switching:
+            shouldSwitch = false;
+
+            /* Get the two elements you want to compare,
+            one from current row and one from the next: */
+            x = rows[i].getElementsByTagName("td")[n];
+            y = rows[i + 1].getElementsByTagName("td")[n];
+
+            /* Check if the two rows should switch place,
+            based on the direction, asc or desc: */
+            if (dir == "asc") {
+                if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
+                    // If so, mark as a switch and break the loop:
+                    shouldSwitch = true;
+                    break;
+                }
+            } else if (dir == "desc") {
+                if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
+                    // If so, mark as a switch and break the loop:
+                    shouldSwitch = true;
+                    break;
+                }
+            }
+        }
+
+        if (shouldSwitch) {
+            /* If a switch has been marked, make the switch
+            and mark that a switch has been done: */
+            rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
+            switching = true;
+
+            // Each time a switch is done, increase this count by 1:
+            switchcount++;
+        } else {
+            /* If no switching has been done AND the direction is "asc",
+            set the direction to "desc" and run the while loop again. */
+            if (switchcount == 0 && dir == "asc") {
+                dir = "desc";
+                switching = true;
+            }
+        }
+    }
+}