From 27eb7bd62a3d4a0417aadc97b8fe808a13b5ff3c Mon Sep 17 00:00:00 2001
From: zoranjovo <50138575+zoranjovo@users.noreply.github.com>
Date: Sat, 1 Nov 2025 22:29:03 +1100
Subject: [PATCH 1/2] feature: sort rows by column value

---
 views/scan.ejs | 89 +++++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 88 insertions(+), 1 deletion(-)

diff --git a/views/scan.ejs b/views/scan.ejs
index 89cf03d..eadf575 100644
--- a/views/scan.ejs
+++ b/views/scan.ejs
@@ -67,6 +67,29 @@
     .items-table td:first-child {
       background-color: white;
     }
+
+    .sortable-header {
+      cursor: pointer;
+      user-select: none;
+    }
+
+    .sort-arrows {
+      margin-left: 4px;
+    }
+
+    .sort-arrow {
+      opacity: 0.3;
+      transition: opacity 0.2s;
+      font-size: 16px;
+    }
+
+    .sort-arrow:hover {
+      opacity: 0.8;
+    }
+
+    .sort-arrow.active {
+      opacity: 1;
+    }
   </style>
   <%- include('partials/head-tail') %>
 </head>
@@ -403,7 +426,15 @@
     }
 
     function renderItems(data) {
-      $('#actions-row').append(data.uniqueKeys.map(key => '<th scope="col">' + key + '</th>'))
+      $('#actions-row').append(data.uniqueKeys.map(key => 
+        `<th scope="col" class="sortable-header" data-column="${key}" aria-sort="none">
+          ${key} 
+          <span class="sort-arrows">
+            <span class="sort-arrow sort-arrow-up" data-direction="asc" aria-label="Sort ascending" title="Sort ascending">🠥</span>
+            <span class="sort-arrow sort-arrow-down" data-direction="desc" aria-label="Sort descending" title="Sort descending">🠧</span>
+          </span>
+        </th>`
+      ))
 
       if (data.Items.length) {
         $('#items-container').append(data.Items.map(item => {
@@ -478,6 +509,62 @@
       $('#table-placeholder').addClass('d-none')
 
       updateFilterAutocomplete(data.uniqueKeys)
+
+      $('.sort-arrow').on('click', function(e) {
+        e.stopPropagation()
+        const column = $(this).closest('.sortable-header').data('column')
+        const direction = $(this).data('direction')
+        $('.sort-arrow').removeClass('active')
+        $(this).addClass('active')
+
+        sortTableByColumn(column, direction)
+      })
+    }
+
+    function sortTableByColumn(column, direction) {
+      const tbody = $('#items-container')
+      const rows = tbody.find('tr').toArray()
+
+      rows.sort(function(a, b) {
+        const aVal = getCellValue(a, column)
+        const bVal = getCellValue(b, column)
+
+        let result = 0
+
+        if (aVal < bVal) result = -1
+        if (aVal > bVal) result = 1
+
+        return direction === 'asc' ? result : -result
+      })
+
+      tbody.append(rows)
+    }
+
+    function getCellValue(row, column) {
+      const cells = $(row).find('td')
+      const actionsCell = cells[0]
+
+      const headers = $('#actions-row th')
+      let columnIndex = -1
+      headers.each(function(index) {
+        if ($(this).data('column') === column) {
+          columnIndex = index
+          return false
+        }
+      })
+
+      if (columnIndex === -1) return ''
+
+      const dataCell = cells[columnIndex]
+      if (!dataCell) return ''
+
+      const jsonFormatter = $(dataCell).find('.json-formatter-row-value')[0] || $(dataCell).find('.json-formatter-string')[0] || $(dataCell).find('.json-formatter-number')[0]
+
+      if (jsonFormatter) {
+        return $(jsonFormatter).text().trim()
+      }
+
+      return $(dataCell).text().trim()
     }
 
     window.addEventListener('load', () => {

From ae4169e21574fda70abb9a5f14564ddaf4218219 Mon Sep 17 00:00:00 2001
From: zoranjovo <50138575+zoranjovo@users.noreply.github.com>
Date: Mon, 3 Nov 2025 19:38:31 +1100
Subject: [PATCH 2/2] fix: use correct unicode arrows

---
 views/scan.ejs | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/views/scan.ejs b/views/scan.ejs
index eadf575..6e2fe22 100644
--- a/views/scan.ejs
+++ b/views/scan.ejs
@@ -71,6 +71,7 @@
     .sortable-header {
       cursor: pointer;
       user-select: none;
+      white-space: nowrap;
     }
 
     .sort-arrows {
@@ -428,10 +429,10 @@
     function renderItems(data) {
       $('#actions-row').append(data.uniqueKeys.map(key => 
         `<th scope="col" class="sortable-header" data-column="${key}" aria-sort="none">
-          ${key} 
+          ${key}
           <span class="sort-arrows">
-            <span class="sort-arrow sort-arrow-up" data-direction="asc" aria-label="Sort ascending" title="Sort ascending">🠥</span>
-            <span class="sort-arrow sort-arrow-down" data-direction="desc" aria-label="Sort descending" title="Sort descending">🠧</span>
+            <span class="sort-arrow sort-arrow-up" data-direction="asc" aria-label="Sort ascending" title="Sort ascending">↑</span>
+            <span class="sort-arrow sort-arrow-down" data-direction="desc" aria-label="Sort descending" title="Sort descending">↓</span>
           </span>
         </th>`
       ))