add sorting on complete key code dialog's table

index.html

@@ -49,7 +49,7 @@ <h2>It works <u>only</u> with the Physical Keyboard ⌨️</h2>
 				<div class="note">
 					<h2>
 						Focus anywhere and use any Keys on your Physical Keyboard ⌨️
-					</h2>						
+					</h2>
 				</div>
 
 				<div class="note key" id="key-id"></div>
@@ -91,12 +91,12 @@ <h3>The table below lists all possible keys with code and other details.</h3>
 			<div class="dialog-content">
 				<table id="key-code-table">
 					<thead>
-						<tr>
-							<th>Key Name</th>
+						<tr class="dialog-table-header">
+							<th class="order">Key Name</th>
 							<th>event.which</th>
-							<th>event.key</th>
-							<th>event.code</th>
-							<th>Notes</th>
+							<th class="order">event.key</th>
+							<th class="order">event.code</th>
+							<th class="order">Notes</th>
 						</tr>
 					</thead>
 					<tbody id="key-code-table-body">

scripts/index.js

@@ -8,7 +8,7 @@ $(document).ready(function(e) {
   $.getJSON( "../keycode.json" , function( result ){
     keyCodeList = result;
     console.log({keyCodeList});
-    
+
     for (let counter = 0; counter <= keyCodeList.length - 1; counter++) {
       //const curIndx = document.getElementById("key-code-table-body").rows.length;
       const row = document.getElementById("key-code-table-body").insertRow();
@@ -170,6 +170,58 @@ function exportJSONToCSV(objArray) {
   element.click();
 }
 
+function table_sort() {
+	const styleSheet=document.createElement('style')
+	styleSheet.innerHTML=`
+        .order-inactive span {
+            visibility:hidden;
+        }
+        .order-inactive:hover span {
+            visibility:visible;
+        }
+        .order-active span {
+            visibility: visible;
+        }
+    `
+	document.head.appendChild(styleSheet)
+
+	document.querySelectorAll('th.order').forEach(th_elem => {
+		let asc=true
+		const span_elem=document.createElement('span')
+		span_elem.style="font-size:0.8rem; margin-left:0.5rem"
+		span_elem.innerHTML="▼"
+		th_elem.appendChild(span_elem)
+		th_elem.classList.add('order-inactive')
+
+		const index=Array.from(th_elem.parentNode.children).indexOf(th_elem)
+		th_elem.addEventListener('click', (e) => {
+			document.querySelectorAll('th.order').forEach(elem => {
+				elem.classList.remove('order-active')
+				elem.classList.add('order-inactive')
+			})
+			th_elem.classList.remove('order-inactive')
+			th_elem.classList.add('order-active')
+
+			if (!asc) {
+				th_elem.querySelector('span').innerHTML='▲'
+			} else {
+				th_elem.querySelector('span').innerHTML='▼'
+			}
+			const arr=Array.from(th_elem.closest("table").querySelectorAll('tbody tr'))
+			arr.sort((a, b) => {
+				const a_val=a.children[index].innerText
+				const b_val=b.children[index].innerText
+				return (asc)? a_val.localeCompare(b_val):b_val.localeCompare(a_val)
+			})
+			arr.forEach(elem => {
+				th_elem.closest("table").querySelector("tbody").appendChild(elem)
+			})
+			asc=!asc
+		})
+	})
+}
+
+table_sort()
 const scrollTopBtn = document.querySelector("#scroll-top-wrapper");
 
 window.addEventListener("scroll", () => {

style.css

@@ -163,6 +163,13 @@ button.close {
   border: 1px solid #ff006f;
 }
 
+
+.dialog-table-header {
+	border-bottom: 1px solid #cdd1ce;
+	position: sticky;
+	top: 0;
+	background: white;
+}
 #scroll-top-wrapper {
   position: fixed;
   bottom: 20px;