From 51511904bdd790d34679195b5003f654ae6bd027 Mon Sep 17 00:00:00 2001
From: Mohankumar Muthusamy <akpmohan07@gmail.com>
Date: Mon, 27 Apr 2026 23:14:42 +0100
Subject: [PATCH 1/4] search feature added

---
 templates/assets/table-filter.js | 51 +++++++++++++++++++++++++++++++-
 1 file changed, 50 insertions(+), 1 deletion(-)

diff --git a/templates/assets/table-filter.js b/templates/assets/table-filter.js
index 5d243f7..d938482 100644
--- a/templates/assets/table-filter.js
+++ b/templates/assets/table-filter.js
@@ -29,6 +29,8 @@ const TableFilter = (function() {
             filterState[col.id] = 'all';
         });
 
+        filterState['search'] = '';
+
         // Build the filter UI
         buildFilterUI();
         
@@ -53,6 +55,17 @@ const TableFilter = (function() {
         }
 
         let html = '<div class="filter-controls">';
+
+        config.columns.forEach(col => {
+            html += `
+                <div class="filter-group">
+                    <label for="${col.id}-filter">${col.label}:</label>
+                    <select id="${col.id}-filter" class="filter-dropdown">
+                        <option value="all">All</option>
+                    </select>
+                </div>
+            `;
+        });
         
         // Create a dropdown for each configured column
         config.columns.forEach(col => {
@@ -67,6 +80,15 @@ const TableFilter = (function() {
         });
 
         // Add clear filters button and row counter
+
+        // Search Button
+        html += `
+            <div class="filter-group">
+                <label for="search-input">Search:</label>
+                <input type="text" id="search-input" placeholder="Search descriptions..." />
+            </div>
+        `;
+
         html += `
             <div class="filter-group">
                 <button id="clear-filters" class="clear-filters-btn">Clear Filters</button>
@@ -136,6 +158,24 @@ const TableFilter = (function() {
             }
         });
 
+        const searchInput = document.getElementById('search-input');
+        if (searchInput) {
+            searchInput.addEventListener('input', (e) => {
+                filterState['search'] = e.target.value.toLowerCase().trim();
+                applyFilters();
+            });
+        }
+
+        window.addEventListener('pageshow', (e) => {
+            if (e.persisted) {
+                const searchInput = document.getElementById('search-input');
+                if (searchInput) {
+                    filterState['search'] = searchInput.value.toLowerCase().trim();
+                }
+                applyFilters();
+            }
+        });
+
         // Attach click listener to clear button
         const clearBtn = document.getElementById('clear-filters');
         if (clearBtn) {
@@ -163,7 +203,12 @@ const TableFilter = (function() {
                 return rowValue === filterValue;
             });
 
-            if (matches) {
+            const searchTerm = filterState['search'];
+            const searchableTerm = row.cells[0].textContent.toLowerCase() + row.cells[1].textContent.toLowerCase();
+            const matchesSearch = !searchTerm || searchableTerm.includes(searchTerm);
+
+
+            if (matches && matchesSearch) {
                 row.classList.remove('filtered-out');
                 visibleCount++;
             } else {
@@ -187,6 +232,10 @@ const TableFilter = (function() {
             filterState[col.id] = 'all';
         });
 
+        const searchInput = document.getElementById('search-input');
+        if (searchInput) searchInput.value = '';
+        filterState['search'] = '';
+
         // Remove all filtered-out classes
         const table = document.querySelector(config.tableSelector);
         if (table) {

From dc81029f7418df85b03105c741868104c14cfa9a Mon Sep 17 00:00:00 2001
From: Mohankumar Muthusamy <akpmohan07@gmail.com>
Date: Mon, 27 Apr 2026 23:20:07 +0100
Subject: [PATCH 2/4] + placeholder update and cleanup

---
 templates/assets/table-filter.js | 12 +-----------
 1 file changed, 1 insertion(+), 11 deletions(-)

diff --git a/templates/assets/table-filter.js b/templates/assets/table-filter.js
index d938482..9223d0c 100644
--- a/templates/assets/table-filter.js
+++ b/templates/assets/table-filter.js
@@ -85,7 +85,7 @@ const TableFilter = (function() {
         html += `
             <div class="filter-group">
                 <label for="search-input">Search:</label>
-                <input type="text" id="search-input" placeholder="Search descriptions..." />
+                <input type="text" id="search-input" placeholder="Search by ID or description..." />
             </div>
         `;
 
@@ -166,16 +166,6 @@ const TableFilter = (function() {
             });
         }
 
-        window.addEventListener('pageshow', (e) => {
-            if (e.persisted) {
-                const searchInput = document.getElementById('search-input');
-                if (searchInput) {
-                    filterState['search'] = searchInput.value.toLowerCase().trim();
-                }
-                applyFilters();
-            }
-        });
-
         // Attach click listener to clear button
         const clearBtn = document.getElementById('clear-filters');
         if (clearBtn) {

From ed1a2257f5027e33fef62a6f7d355c833d3affde Mon Sep 17 00:00:00 2001
From: Mohankumar Muthusamy <akpmohan07@gmail.com>
Date: Mon, 27 Apr 2026 23:36:07 +0100
Subject: [PATCH 3/4] + cleaned

---
 templates/assets/table-filter.js | 11 -----------
 1 file changed, 11 deletions(-)

diff --git a/templates/assets/table-filter.js b/templates/assets/table-filter.js
index 9223d0c..7d632a9 100644
--- a/templates/assets/table-filter.js
+++ b/templates/assets/table-filter.js
@@ -55,17 +55,6 @@ const TableFilter = (function() {
         }
 
         let html = '<div class="filter-controls">';
-
-        config.columns.forEach(col => {
-            html += `
-                <div class="filter-group">
-                    <label for="${col.id}-filter">${col.label}:</label>
-                    <select id="${col.id}-filter" class="filter-dropdown">
-                        <option value="all">All</option>
-                    </select>
-                </div>
-            `;
-        });
         
         // Create a dropdown for each configured column
         config.columns.forEach(col => {

From a3aac620a7e747d071da08b7ce23198449d1345b Mon Sep 17 00:00:00 2001
From: Mohankumar Muthusamy <akpmohan07@gmail.com>
Date: Mon, 27 Apr 2026 23:42:30 +0100
Subject: [PATCH 4/4] + added commets

---
 templates/assets/table-filter.js | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/templates/assets/table-filter.js b/templates/assets/table-filter.js
index 7d632a9..b20d74c 100644
--- a/templates/assets/table-filter.js
+++ b/templates/assets/table-filter.js
@@ -68,16 +68,15 @@ const TableFilter = (function() {
             `;
         });
 
-        // Add clear filters button and row counter
-
         // Search Button
         html += `
-            <div class="filter-group">
-                <label for="search-input">Search:</label>
-                <input type="text" id="search-input" placeholder="Search by ID or description..." />
-            </div>
-        `;
+        <div class="filter-group">
+            <label for="search-input">Search:</label>
+            <input type="text" id="search-input" placeholder="Search by ID or description..." />
+        </div>`
+        ;
 
+        // Add clear filters button and row counter
         html += `
             <div class="filter-group">
                 <button id="clear-filters" class="clear-filters-btn">Clear Filters</button>
@@ -147,6 +146,7 @@ const TableFilter = (function() {
             }
         });
 
+        // Attach change listeners for the search box
         const searchInput = document.getElementById('search-input');
         if (searchInput) {
             searchInput.addEventListener('input', (e) => {
@@ -182,6 +182,7 @@ const TableFilter = (function() {
                 return rowValue === filterValue;
             });
 
+            // Check if description or Id matchesthe searchTerm
             const searchTerm = filterState['search'];
             const searchableTerm = row.cells[0].textContent.toLowerCase() + row.cells[1].textContent.toLowerCase();
             const matchesSearch = !searchTerm || searchableTerm.includes(searchTerm);
@@ -211,6 +212,7 @@ const TableFilter = (function() {
             filterState[col.id] = 'all';
         });
 
+        // Reset search box to empty
         const searchInput = document.getElementById('search-input');
         if (searchInput) searchInput.value = '';
         filterState['search'] = '';