adiciona tabela com sort para os registros

internal/server/static/app.css

@@ -27,3 +27,26 @@ body {
 .btn-list form {
   margin: 0;
 }
+
+.table-sort {
+  align-items: center;
+  background: transparent;
+  border: 0;
+  color: inherit;
+  cursor: pointer;
+  display: inline-flex;
+  font: inherit;
+  gap: 0.25rem;
+  padding: 0;
+  text-transform: inherit;
+}
+
+.table-sort:hover,
+.table-sort:focus {
+  color: var(--tblr-primary);
+}
+
+.sort-indicator {
+  display: inline-block;
+  min-width: 1ch;
+}

internal/server/static/app.js

@@ -0,0 +1,87 @@
+(function () {
+  function sortableValue(row, index, type) {
+    var cell = row.children[index];
+    if (!cell) {
+      return "";
+    }
+    var value = cell.dataset.sortValue || cell.textContent || "";
+    value = value.trim();
+    if (type === "number") {
+      var parsed = Number.parseInt(value, 10);
+      return Number.isNaN(parsed) ? 0 : parsed;
+    }
+    return value.toLocaleLowerCase("pt-BR");
+  }
+
+  function compareRows(index, type, direction) {
+    return function (left, right) {
+      var leftValue = sortableValue(left, index, type);
+      var rightValue = sortableValue(right, index, type);
+      var result;
+      if (type === "number") {
+        result = leftValue - rightValue;
+      } else {
+        result = leftValue.localeCompare(rightValue, "pt-BR", {
+          numeric: true,
+          sensitivity: "base",
+        });
+      }
+      return direction === "desc" ? -result : result;
+    };
+  }
+
+  function updateIndicators(table, activeButton, direction) {
+    table.querySelectorAll(".table-sort").forEach(function (button) {
+      var header = button.closest("th");
+      var indicator = button.querySelector(".sort-indicator");
+      if (header) {
+        header.removeAttribute("aria-sort");
+      }
+      if (indicator) {
+        indicator.textContent = "";
+      }
+    });
+
+    var activeHeader = activeButton.closest("th");
+    if (activeHeader) {
+      activeHeader.setAttribute("aria-sort", direction === "desc" ? "descending" : "ascending");
+    }
+    var activeIndicator = activeButton.querySelector(".sort-indicator");
+    if (activeIndicator) {
+      activeIndicator.textContent = direction === "desc" ? "↓" : "↑";
+    }
+  }
+
+  function sortTable(table, button) {
+    var tbody = table.tBodies[0];
+    if (!tbody) {
+      return;
+    }
+
+    var index = Number.parseInt(button.dataset.sortIndex || "0", 10);
+    var type = button.dataset.sortType || "text";
+    var currentIndex = table.dataset.sortIndex;
+    var currentDirection = table.dataset.sortDirection || "asc";
+    var direction = currentIndex === String(index) && currentDirection === "asc" ? "desc" : "asc";
+
+    Array.from(tbody.rows)
+      .sort(compareRows(index, type, direction))
+      .forEach(function (row) {
+        tbody.appendChild(row);
+      });
+
+    table.dataset.sortIndex = String(index);
+    table.dataset.sortDirection = direction;
+    updateIndicators(table, button, direction);
+  }
+
+  document.addEventListener("DOMContentLoaded", function () {
+    document.querySelectorAll("[data-sortable-table]").forEach(function (table) {
+      table.querySelectorAll(".table-sort").forEach(function (button) {
+        button.addEventListener("click", function () {
+          sortTable(table, button);
+        });
+      });
+    });
+  });
+})();

internal/server/templates/base.html

@@ -69,6 +69,7 @@
     </div>
   </div>
   <script src="/static/vendor/tabler.min.js"></script>
+  <script src="/static/app.js"></script>
 </body>
 </html>
 {{ end }}

internal/server/templates/zone.html

@@ -21,13 +21,29 @@
   </div>
   {{ if .Zone.RRSets }}
     <div class="table-responsive">
-      <table class="table table-vcenter card-table">
+      <table class="table table-vcenter card-table" data-sortable-table>
         <thead>
           <tr>
-            <th>Nome</th>
-            <th>Tipo</th>
-            <th>TTL</th>
-            <th>Registros</th>
+            <th scope="col">
+              <button class="table-sort" type="button" data-sort-index="0" data-sort-type="text">
+                Nome <span class="sort-indicator" aria-hidden="true"></span>
+              </button>
+            </th>
+            <th scope="col">
+              <button class="table-sort" type="button" data-sort-index="1" data-sort-type="text">
+                Tipo <span class="sort-indicator" aria-hidden="true"></span>
+              </button>
+            </th>
+            <th scope="col">
+              <button class="table-sort" type="button" data-sort-index="2" data-sort-type="number">
+                TTL <span class="sort-indicator" aria-hidden="true"></span>
+              </button>
+            </th>
+            <th scope="col">
+              <button class="table-sort" type="button" data-sort-index="3" data-sort-type="text">
+                Registros <span class="sort-indicator" aria-hidden="true"></span>
+              </button>
+            </th>
             <th class="w-1"></th>
           </tr>
         </thead>
@@ -35,12 +51,12 @@
         {{ range .Zone.RRSets }}
           {{ $dynamic := dynamicRRSet $.Dynamic . }}
           <tr {{ if $dynamic }}class="table-info"{{ end }}>
-            <td class="text-nowrap">{{ .Name }}</td>
-            <td>
+            <td class="text-nowrap" data-sort-value="{{ .Name }}">{{ .Name }}</td>
+            <td data-sort-value="{{ .Type }}">
               <span class="badge bg-azure-lt">{{ .Type }}</span>
               {{ if $dynamic }}<span class="badge bg-green-lt">DNS dinamico</span>{{ end }}
             </td>
-            <td>{{ .TTL }}</td>
+            <td data-sort-value="{{ .TTL }}">{{ .TTL }}</td>
             <td>
               <div class="record-values">
             {{ range .Records }}