diff --git a/views/scan.ejs b/views/scan.ejs
index 89cf03d..6e2fe22 100644
--- a/views/scan.ejs
+++ b/views/scan.ejs
@@ -67,6 +67,30 @@
.items-table td:first-child {
background-color: white;
}
+
+ .sortable-header {
+ cursor: pointer;
+ user-select: none;
+ white-space: nowrap;
+ }
+
+ .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;
+ }
<%- include('partials/head-tail') %>
@@ -403,7 +427,15 @@
}
function renderItems(data) {
- $('#actions-row').append(data.uniqueKeys.map(key => '
' + key + ' | '))
+ $('#actions-row').append(data.uniqueKeys.map(key =>
+ ``
+ ))
if (data.Items.length) {
$('#items-container').append(data.Items.map(item => {
@@ -478,6 +510,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', () => {