Filterable Table

<!DOCTYPE html>
<title>My Example</title>

<div class="search-container">
    <label for="tableSearchInput">Search Inventory:</label>
    <input type="text" id="tableSearchInput" placeholder="Type to filter items...">
</div>

<table class="filterable-table" id="myFilterableTable">
    <thead>
        <tr>
            <th scope="col">Item Name</th>
            <th scope="col">Category</th>
            <th scope="col">SKU</th>
            <th scope="col">Stock</th>
        </tr>
    </thead>
    <tbody>
        <tr><td>Classic T-Shirt</td><td>Apparel</td><td>AP-TS-001</td><td>150</td></tr>
        <tr><td>Denim Jeans</td><td>Apparel</td><td>AP-JN-004</td><td>80</td></tr>
        <tr><td>Leather Belt</td><td>Accessories</td><td>AC-BL-010</td><td>200</td></tr>
        <tr><td>Running Shoes</td><td>Footwear</td><td>FW-RN-025</td><td>120</td></tr>
        <tr><td>Baseball Cap</td><td>Accessories</td><td>AC-HT-005</td><td>300</td></tr>
        <tr><td>Ankle Socks (3-Pack)</td><td>Apparel</td><td>AP-SK-012</td><td>500</td></tr>
        <tr><td>Leather Boots</td><td>Footwear</td><td>FW-BT-002</td><td>60</td></tr>
    </tbody>
</table>

// Loop through all table rows, and hide those who don't match the search query
        for (let i = 1; i < rows.length; i++) { // Start at 1 to skip the header row
            const row = rows[i];
            const rowText = row.textContent || row.innerText;
            
            if (rowText.toLowerCase().indexOf(query) > -1) {
                row.style.display = "";
            } else {
                row.style.display = "none";
            }
        }
    });
}

// Initialize the filterable table
const searchInput = document.getElementById('tableSearchInput');
const dataTable = document.getElementById('myFilterableTable');
if(searchInput && dataTable) {
    enableTableFilter(searchInput, dataTable);
}

</script>