Filterable/Searchable Table Template

Help users find information instantly with this dynamic, filterable table.

This template includes a search input field that filters table rows in real-time as the user types, dramatically speeding up data discovery.

Screenshot of a table with a search box above it, where some rows are hidden based on the search term.

Get Source Code → Preview →

About this Filterable Table

When dealing with many rows of data, scrolling and scanning is inefficient. A search or filter input can be a welcome addition to improve user experience. This template provides a complete, self-contained solution using vanilla JavaScript.

The functionality is straightforward:

An HTML input element is placed above the table.
A JavaScript event listener waits for the user to type into the input field.
With each keystroke, the script loops through every row in the tbody.
It checks if the text content of the row contains the search term (in a case-insensitive manner).
If the row's content matches, it is shown (display = ""); otherwise, it is hidden (display = "none").

Key Features:

Live Filtering: Filters results instantly as the user types, providing immediate feedback.
Case-Insensitive: The search matches text regardless of its case (e.g., "Apple" matches "apple").
Simple Integration: The HTML and JavaScript are clearly structured and easy to adapt.
Dependency-Free: The solution uses only vanilla JavaScript with no external libraries.

Implementation Notes:

This client-side filtering method is excellent for tables with up to a few hundred rows. For very large datasets (thousands of rows or more), performance in the browser can degrade. In such cases, a server-side search solution (where the search query is sent to a database) is the recommended approach.

Code

Here's the full code, including the HTML input field, CSS, and JavaScript required for the filterable table:

<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>

View Output