restore github

public/table_sort.js

@@ -0,0 +1,48 @@
+document.addEventListener('DOMContentLoaded', function() {
+    const table = document.getElementById('ddnsTable');
+    if (!table) return;
+
+    const headers = table.querySelectorAll('th.sortable');
+    const tbody = table.querySelector('tbody');
+
+    headers.forEach((header, index) => {
+        header.addEventListener('click', () => {
+            const type = header.dataset.type || 'string';
+            const isAscending = header.classList.contains('asc');
+            
+            // Reset all headers
+            headers.forEach(h => h.classList.remove('asc', 'desc'));
+            
+            // Toggle sort order
+            if (!isAscending) {
+                header.classList.add('asc');
+            } else {
+                header.classList.add('desc');
+            }
+
+            const rows = Array.from(tbody.querySelectorAll('tr'));
+            
+            const sortedRows = rows.sort((a, b) => {
+                // Find the cell corresponding to the header index
+                // Note: We need to account for the fact that headers might not match columns 1:1 if there are colspans, 
+                // but here it seems straightforward. However, we should find the index of the header among all ths in the thead
+                // to match the td index.
+                const allHeaders = Array.from(header.parentElement.children);
+                const colIndex = allHeaders.indexOf(header);
+
+                const aText = a.children[colIndex].textContent.trim();
+                const bText = b.children[colIndex].textContent.trim();
+
+                if (type === 'number') {
+                    return isAscending ? bText - aText : aText - bText;
+                } else {
+                    return isAscending ? bText.localeCompare(aText) : aText.localeCompare(bText);
+                }
+            });
+
+            // Re-append rows
+            tbody.innerHTML = '';
+            sortedRows.forEach(row => tbody.appendChild(row));
+        });
+    });
+});