Bootstrap 5 Search Filter Table | Employee Records with Dropdown Filters & JavaScript

Learn how to build a Bootstrap 5 search filter table with employee records, real time search, and dropdown filters using JavaScript.

Bootstrap 5 Search Filter Table | Employee Records with Dropdown Filters & JavaScript

Looking for a practical and beginner friendly JavaScript project, then this Bootstrap 5 Search Filter Table is perfect for you. This project helps you understand how to work with dynamic filtering, DOM manipulation, and Bootstrap 5 components in a real world scenario. Whether you are a student learning web development or a developer who wants to build interactive data tables, this project will give you hands on experience that you can proudly add to your portfolio.

Search Filter Table:

Search Filter Table is an interactive table that allows users to search and filter data in real time without reloading the page. In this project we create a fully functional also responisve Employee Records Table using HTML, CSS, Bootstrap 5 and JavaScript. In this project users just have to type in the search box to instantly filter employees by name or by other fields. Dropdown filters are also available to filter records by department, designation, or any other category. The table is design fully responsive so it works perfectly on all screen sizes.

Functionality of This Search Filter Table:

This Bootstrap 5 Search Filter Table is designed to manage and display employee records through a clean, responsive, and interactive data table interface. Users can type in the search input field and the table instantly filters matching results in real time. Dropdown filters allow users to narrow down records by specific categories like department or job role. All filters work together simultaneously so users can combine search and dropdown filters at the same time. The table is built with Bootstrap 5 grid and table classes which makes it fully responsive on mobile, tablet and desktop screens. JavaScript handles all the filtering logic without any page reload making the experience smooth and fast.

This employee management table demonstrates practical frontend development techniques such as live searching, dropdown filtering, DOM manipulation, event handling, and dynamic data rendering. The project showcases how modern web applications can provide fast, user-friendly data management experiences through responsive UI components, real-time filtering systems, and interactive table functionality.

Steps to Create a Bootstrap 5 Search Filter Table with Employee Records:

Follow these simple steps to build a Bootstrap 5 Search Filter Table using Bootstrap and JavaScript:

Then make the necessary files inside it. Create a file called index.html to serve as the main file and create a file called style.css for the custom styling.

First, create a folder with any name for xample, bootstrap-search-filter-table. Then make the necessary files inside it.
Create a file called index.html to serve as the main file.
create a file called style.css for the custom styling.
create a file called script.js for the JavaScript code.

Since we are using Bootstrap 5 in this project, make sure to add the Bootstrap 5 CDN link inside the <head> tag of your HTML file so that all Bootstrap classes and components work properly.

In the index.html file, this code includes essential HTML markup with semantic tags like <table>, <thead>, <tbody>, <tr>, <td>, <input>, and <select> which are used to build the employee records table, including a search input field, dropdown filters, live record counters, and a responsive Bootstrap 5 table layout.

Add employee data rows with fields such as Name, Email, Position, Department, and Status inside the table body.

                            
                                <!DOCTYPE html> 
<!-- TheProviders ----------------- youtube.com/@TheProvidersOfficial --> 
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Search & Filter Table using Bootstrap 5 & JavaScript</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
</head>

<body>  

        <div class="container">
            <div class="card rounded-4 overflow-hidden border-0">
                <div class="card-header p-4 text-white">
                    <h2>Employees Data</h2>
                    <p class="mb-0">Search and Filter employees records</p>
                </div>
                <div class="card-body">
                    <!-- statistics -->
                     <div class="row text-center g-0 mb-4 p-3 stats rounded">
                        <div class="col-md-4">
                            <div class="number fs-2 fw-bold" id="totalRecords">0</div>
                            <div class="label">TOTAL RECORDS</div>
                        </div>
                        <div class="col-md-4">
                            <div class="number fs-2 fw-bold" id="visibleRecords">0</div>
                            <div class="label">VISIBLE RECORDS</div>
                        </div>
                        <div class="col-md-4">
                            <div class="number fs-2 fw-bold" id="hiddenRecords">0</div>
                            <div class="label">HIDDEN RECORDS</div>
                        </div>
                     </div>
                </div>

                <!-- search & filter section  -->

                <div class="search-section rounded-3 p-4 mb-4">
                    <div class="row g-3">
                        <div class="col-md-5">
                            <label for="searchInput" class="form-label fw-bold">Search</label>
                            <input type="text"
                            class="form-control search-input rounded-3"
                            id="searchInput" placeholder="Search by name, email, or position">
                        </div>
                        <div class="col-md-3">
                            <label for="departmentFilter" class="form-label fw-bold">Departments</label>
                            <select id="departmentFilter" class="form-select filter-select rounded-3">
                                <option value="">All Departments</option>
                                <option value="Engineering">Engineering</option>
                                <option value="Marketing">Marketing</option>
                                <option value="Sales">Sales</option>
                                <option value="HR">HR</option>
                                <option value="Finance">Finance</option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label for="statusFilter" class="form-label fw-bold">Status</label>
                            <select  id="statusFilter" class="form-select filter-select rounded-3">
                                <option value="">All Status</option>
                                <option value="Active">Active</option>
                                <option value="Inactive">Inactive</option>
                            </select>
                        </div>
                        <div class="col-md-1 d-flex align-items-end">
                            <button id="clearBtn" title="Clear All Filters"
                            class="btn btn-danger btn-lg w-75 text-white fw-bold"
                            >X</button>
                        </div>
                    </div>
                </div>

                <!-- table  -->

                <div class="table-container table-responsive">
                    <table class="table table-striped table-bordered table-hover" id="dataTable">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>Name</th>
                                <th>Email</th>
                                <th>Position</th>
                                <th>Department</th>
                                <th>Status</th>
                            </tr>
                        </thead>
                        <tbody id="tableBody">
                            <!-- data will be inserted here form JS  -->
                        </tbody>

                    </table>

                    
                        <div id="noResults" class="no-results text-center py-5" style="display: none;">
                            <div class="display-4 mb-2">🔍</div>
                            <div class="fw-bold">No Results Found</div>
                            <small>Try adjusting your search or filters</small>
                        </div>

                </div>



            </div>
        </div>













        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>

<script src="script.js"></script>
</body>

</html>

In your style.css file, add the CSS code to design your Bootstrap 5 Search Filter Table with a clean, modern, and responsive layout. Style the search box, dropdown filters, record counters, and employee table to create a professional user interface with proper spacing, colors, and mobile responsiveness.

                            
                                body{
    background: linear-gradient(135deg, #7f96fa 0%, #915dc4 100%);
    min-height: 100vh;
    padding: 40px 0;
}
.card{
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}
.card-header{
    background: linear-gradient(135deg, #2349fa 0%, #764ba2 100%);
}
.search-section{
    background: #f8f9fa;
}
.search-input, .filter-select{
    border: 2px solid #e0e0e0;
    padding: 12px 20px;
    transition: all 0.3s;
}
.search-input:focus, .filter-select:focus{
    border-color: #667eea;
    box-shadow: 0 0 0 0.2rem rgba(102,126,234,0.25);
    outline: none;
}
.table thead{
    background: linear-gradient(135deg, #667eea, #764ba2 100%);
    color: white;
}
.table thead th{
    padding: 15px;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
}
.table tbody tr:hover{
    background-color: #f8f9fa;
}

.stats{
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.number{
    color: #667eea;
}
.label{
    color: #6c757d;
    font-size: 0.8rem;
}

In your script.js file, file handles all the real time search and dropdown filter functionality using JavaScript methods like getElementById, addEventListener, querySelectorAll, forEach, toLowerCase, includes, and style.display to filter and show or hide table rows based on user input. Add this JavaScript code to enable real-time search and dropdown filtering for the employee records table. Implement functionality to filter data by Name, Email, Position, Department, and Status, and dynamically update Total Records, Visible Records, and Hidden Records counters without page reload.

                            
                                // Sample data
       const employees = [
            { id: 1, name: 'John Doe', email: 'john.doe@company.com', position: 'Software Engineer', department: 'Engineering', status: 'Active' },
            { id: 2, name: 'Jane Smith', email: 'jane.smith@company.com', position: 'Marketing Manager', department: 'Marketing', status: 'Active' },
            { id: 3, name: 'Mike Johnson', email: 'mike.johnson@company.com', position: 'Sales Representative', department: 'Sales', status: 'Active' },
            { id: 4, name: 'Sarah Williams', email: 'sarah.williams@company.com', position: 'HR Specialist', department: 'HR', status: 'Inactive' },
            { id: 5, name: 'David Brown', email: 'david.brown@company.com', position: 'Financial Analyst', department: 'Finance', status: 'Active' },
            { id: 6, name: 'Emily Davis', email: 'emily.davis@company.com', position: 'Senior Developer', department: 'Engineering', status: 'Active' },
            { id: 7, name: 'Robert Wilson', email: 'robert.wilson@company.com', position: 'Content Writer', department: 'Marketing', status: 'Active' },
            { id: 8, name: 'Lisa Anderson', email: 'lisa.anderson@company.com', position: 'Sales Manager', department: 'Sales', status: 'Active' },
            { id: 9, name: 'James Taylor', email: 'james.taylor@company.com', position: 'Recruiter', department: 'HR', status: 'Active' },
            { id: 10, name: 'Maria Garcia', email: 'maria.garcia@company.com', position: 'Accountant', department: 'Finance', status: 'Inactive' },
            { id: 11, name: 'Christopher Lee', email: 'chris.lee@company.com', position: 'DevOps Engineer', department: 'Engineering', status: 'Active' },
            { id: 12, name: 'Jessica Martinez', email: 'jessica.martinez@company.com', position: 'SEO Specialist', department: 'Marketing', status: 'Active' },
            { id: 13, name: 'Daniel Rodriguez', email: 'daniel.rodriguez@company.com', position: 'Business Developer', department: 'Sales', status: 'Active' },
            { id: 14, name: 'Amanda Thomas', email: 'amanda.thomas@company.com', position: 'Training Coordinator', department: 'HR', status: 'Active' },
            { id: 15, name: 'Matthew Hernandez', email: 'matthew.hernandez@company.com', position: 'CFO', department: 'Finance', status: 'Active' }
        ];


        const searchInput = document.getElementById('searchInput');
        const departmentFilter = document.getElementById('departmentFilter');
        const statusFilter= document.getElementById("statusFilter")
        const clearBtn = document.getElementById('clearBtn')
        const tableBody = document.getElementById('tableBody')
        const noResults  = document.getElementById('noResults')
        const totalRecords= document.getElementById('totalRecords')
        const visibleRecords= document.getElementById('visibleRecords')
        const hiddenRecords= document.getElementById('hiddenRecords')

    // functions to render table 
    function renderTable(data){
        tableBody.innerHTML = "";

        if(data.length === 0){
            noResults.style.display = 'block';
            // update stats calling 
            updateStats(0);
            return 
        }
        noResults.style.display = 'none';

        data.forEach((employee) => {
            const row = document.createElement('tr');
            const statusClass = employee.status === "Active" ? "bg-success" : "bg-secondary";

            row.innerHTML = `
                <td><strong>#${employee.id}</strong></td>
                <td>${employee.name}</td>
                <td>${employee.email}</td>
                <td>${employee.position}</td>
                <td>${employee.department}</td>
                <td><span class='badge rounded-5 py-2 px-3  ${statusClass}'>${employee.status}</span></td>
            `;

            tableBody.appendChild(row);
        })

        // update stats call 
        updateStats(data.length)

    }
    
    // function to update statistics 

    function updateStats(visible){
        const total = employees.length;
        const hidden = total - visible;

        totalRecords.textContent = total;
        visibleRecords.textContent = visible;
        hiddenRecords.textContent = hidden;
    }

    // function to filter data 

    function filterData(){

        const searchTerm = searchInput.value.toLowerCase().trim();
        const departmentValue = departmentFilter.value;
        const statusValue = statusFilter.value;

        const filterData = employees.filter((employee) => {
            // search filter 
            const matchesSearch = 
            employee.name.toLocaleLowerCase().includes(searchTerm) || 
            employee.email.toLocaleLowerCase().includes(searchTerm) || 
            employee.position.toLocaleLowerCase().includes(searchTerm);
            
            // department filter 
            const matchesDepartment = 
            departmentValue === "" || employee.department === departmentValue;

            // status filter 
            const matchesStatus = statusValue === "" || employee.status === statusValue;

            return matchesSearch && matchesDepartment && matchesStatus;
        });

        renderTable(filterData)


    }

    // function to clear all filter 

    function clearFilters(){
        searchInput.value = ""
        departmentFilter.value = ""
        statusFilter.value = ""
        renderTable(employees) 
    }

    // event listener filerdata 
    searchInput.addEventListener('input',filterData);
    departmentFilter.addEventListener('change',filterData)
    statusFilter.addEventListener('change',filterData);
    clearBtn.addEventListener('click',clearFilters)

    // intially calll 
    renderTable(employees);

Download Code Files