Update index.html

index.html

@@ -114,6 +114,8 @@
         <select id="metricFilter">
             <option value="">All</option>
         </select>
+        <h2>Filter Table by Name</h2>
+        <input type="text" id="searchInput" placeholder="Search for names..." style="margin-bottom: 10px; padding: 8px; width: 100%;">
     </div>
     <div class="table-container">
         <table id="csvTable">
@@ -179,6 +181,21 @@
         const tableBody = table.querySelector('tbody');
         const overlay = document.getElementById('overlay');
         const modal = document.getElementById('modal');
+
+        document.getElementById('searchInput').addEventListener('input', function () {
+            const filter = this.value.trim().toLowerCase(); // Normalize input
+            const table = document.getElementById('csvTable');
+            const rows = table.querySelectorAll('tbody tr');
+        
+            rows.forEach(row => {
+              const nameCell = row.cells[1];
+              if (nameCell) {
+                const name = nameCell.textContent.trim().toLowerCase();
+                row.style.display = name.includes(filter) ? '' : 'none';
+              }
+            });
+          });
+      
         function makeResizable() {
             const thElements = document.querySelectorAll('th');
             thElements.forEach(th => {