feat: support tri-state column sorting

core/ui/modules/grid-actions.js

@@ -42,11 +42,17 @@ export function goToPage(pageIndex) {
 }
 
 export function onColumnSort(columnName) {
-    if (state.sortedColumn === columnName) {
-        state.sortAscending = !state.sortAscending;
-    } else {
+    // Cycle through three states on repeated clicks of the same column:
+    // none (original order) -> ascending -> descending -> none ...
+    if (state.sortedColumn !== columnName) {
         state.sortedColumn = columnName;
         state.sortAscending = true;
+    } else if (state.sortAscending) {
+        state.sortAscending = false;
+    } else {
+        // Back to the original, unsorted order.
+        state.sortedColumn = null;
+        state.sortAscending = true;
     }
     loadTableData();
     persistState();

core/ui/modules/grid-render.js

@@ -66,7 +66,7 @@ function createTableHeader(rowNumWidth, orderedColumns, pinnedColumnOffsets) {
         th.innerHTML = `
             <div class="header-content">
                 <div class="header-top">
-                    ${keyIcon}<span class="header-text">${safeColName}${sortIndicator}</span>
+                    ${keyIcon}<span class="header-text">${safeColName}</span>${sortIndicator}
                     <span class="select-column-icon codicon codicon-selection" title="Select entire column"></span>
                     <span class="pin-icon codicon codicon-pin ${pinClass}" title="${pinTitle}"></span>
                 </div>

core/ui/viewer.css

@@ -408,11 +408,12 @@ body {
     min-width: 0;
 }
 
-/* Sort indicator - displayed inline next to column name */
+/* Sort indicator - sits next to the column name as its own flex item so it is
+   never clipped by the name's text-overflow ellipsis on narrow columns */
 .sort-indicator {
     font-size: 10px;
-    margin-left: 4px;
     color: var(--text-secondary);
+    flex-shrink: 0;
 }
 
 /* Primary key indicator - displayed before column name */