2 files changed, 38 insertions, 18 deletions
diff --git a/src/main/resources/js/files.js b/src/main/resources/js/files.js
index 55b8c7e..8b8bd87 100644
--- a/src/main/resources/js/files.js
+++ b/src/main/resources/js/files.js
@@ -131,3 +131,31 @@ function setListeners() {
 }
 
 setListeners();
+
+/**
+ * Set up sort features
+ */
+function sortTable(table, col, ascending) {
+    const tb = table.tBodies[0];
+    let tr = Array.prototype.slice.call(tb.rows, 0);
+
+    ascending = -((+ascending) || -1);
+    tr = tr.sort((a, b) => {
+        if (a.cells[col].getAttribute("data-size") !== null)
+            return ascending * (Number(a.cells[col].getAttribute("data-size")) > Number(b.cells[col].getAttribute("data-size")) ? 1 : -1);
+        else if (a.cells[col].getAttribute("data-date") !== null)
+            return ascending * (Number(a.cells[col].getAttribute("data-date")) > Number(b.cells[col].getAttribute("data-date")) ? 1 : -1);
+        else
+            return ascending * (a.cells[col].textContent.trim().localeCompare(b.cells[col].textContent.trim()))
+    });
+
+    for (let i = 0; i < tr.length; ++i) tb.appendChild(tr[i]);
+}
+
+document.querySelectorAll("thead tr > th").forEach((header, index) => {
+    header.addEventListener("click", () => {
+        const ascending = header.getAttribute("data-asc");
+        sortTable(document.querySelector("table"), index, (ascending === "true"));
+        header.setAttribute("data-asc", (ascending === "false").toString())
+    })
+});
diff --git a/src/main/resources/views/files.rocker.html b/src/main/resources/views/files.rocker.html
index 02f32af..bb01259 100644
--- a/src/main/resources/views/files.rocker.html
+++ b/src/main/resources/views/files.rocker.html
@@ -17,42 +17,34 @@
     <table id="table">
         <thead>
         <tr>
-            <th>Name</th>
-            <th>Size</th>
-            <th>Last modified</th>
-            <th>Delete</th>
+            <th data-asc="true">Name</th>
+            <th data-asc="true">Size</th>
+            <th data-asc="true">Last modified</th>
+            <th data-asc="true">Delete</th>
         </tr>
-        </thead>
-
-        <tbody>
         <tr data-href="../">
             <td>../</td>
             <td></td>
             <td></td>
             <td></td>
         </tr>
+        </thead>
 
+        <tbody>
         @for (String[] fileArray : files) {
         @if (fileArray[3] == "true") {
         <tr data-href="@fileArray[0]">
-            <td>@fileArray[0]</td>
-            <td>@fileArray[1]</td>
-            <td>@fileArray[2]</td>
-            <td>
-                <button class="delete"><i class="icon ion-md-trash"></i></button>
-            </td>
-        </tr>
-        } else {
+            } else {
         <tr data-path="@fileArray[0]">
+            }
             <td>@fileArray[0]</td>
-            <td>@fileArray[1]</td>
-            <td>@fileArray[2]</td>
+            <td data-size="@fileArray[4]">@fileArray[1]</td>
+            <td data-date="@fileArray[5]">@fileArray[2]</td>
             <td>
                 <button class="delete"><i class="icon ion-md-trash"></i></button>
             </td>
         </tr>
         }
-        }
         </tbody>
     </table>
 </div>