Table search

src/scripts/table.js

@@ -3,6 +3,9 @@ import { sendLoadEvent } from './utils.js';
 
 window.addEventListener('DOMContentLoaded', async () => {
   const data = await getCountryData();
+  const searchInput = document.getElementById('table-search-input');
+
+  let searchTerm = (searchInput.value || '').trim().toLowerCase();
 
   populateTable(data);
   sendLoadEvent(() => {
@@ -20,6 +23,9 @@ window.addEventListener('DOMContentLoaded', async () => {
     }, 600);
   });
 
+  searchInput.addEventListener('keyup', searchTable);
+  searchInput.addEventListener('search', searchTable);
+
   function populateTable(data) {
     const tableBodyElement = document.getElementById('table-body');
     tableBodyElement.innerHTML = '';
@@ -52,6 +58,7 @@ window.addEventListener('DOMContentLoaded', async () => {
       proviceElement.textContent = stat.province || 'All';
       proviceElement.classList.add('province');
 
+      rowElement.setAttribute('visible', true);
       rowElement.appendChild(rankElement);
       rowElement.appendChild(countryElement);
       rowElement.appendChild(proviceElement);
@@ -60,4 +67,31 @@ window.addEventListener('DOMContentLoaded', async () => {
       tableBodyElement.appendChild(rowElement);
     }
   }
+
+  function searchTable(e) {
+    const value = (e.target.value || '').trim().toLowerCase();
+
+    if (searchTerm !== value) {
+      searchTerm = value;
+
+      const tableBodyElement = document.getElementById('table-body');
+      const rowElements = tableBodyElement.querySelectorAll('tr');
+
+      for (const rowElement of rowElements) {
+        if (searchTerm.length > 0) {
+          const countryelement = rowElement.querySelector('.country');
+          const countryName = countryelement.textContent.trim().toLowerCase();
+
+          if (countryName.includes(searchTerm) || searchTerm.includes(countryName)) {
+            rowElement.setAttribute('visible', true);
+          } else {
+            rowElement.setAttribute('visible', false);
+          }
+        }
+        else {
+          rowElement.setAttribute('visible', true);
+        }
+      }
+    }
+  }
 });

src/styles/table.css

@@ -24,6 +24,18 @@
   white-space: nowrap;
 }
 
+.table tbody tr {
+  animation-duration: 0.3s;
+  animation-name: slide-in;
+  animation-direction: normal;
+  animation-fill-mode: forwards;
+  animation-timing-function: ease-out;
+}
+
+.table tbody tr[visible="false"] {
+  display: none;
+}
+
 .table tbody td {
   text-transform: capitalize;
 }
@@ -67,4 +79,16 @@
 
 .card.card-cust.card-cust--table .card-head .card-title {
   margin-bottom: 0;
+}
+
+@keyframes slide-in {
+  from {
+    opacity: 0;
+    transform: translateX(-10px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
 }