Bootstrap 5 Responsive Table with Search Filter
asifmughal
Created Nov 01, 2025
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Table with Search</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
body {
background-color: #f8f9fa;
padding: 20px 0;
}
.table-card {
background: white;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
overflow: hidden;
}
.search-box {
position: relative;
}
.search-box i {
position: absolute;
left: 15px;
top: 50%;
transform: translateY(-50%);
color: #6c757d;
}
.search-box input {
padding-left: 45px;
}
.badge-status {
padding: 6px 12px;
font-size: 0.75rem;
}
.no-results {
display: none;
text-align: center;
padding: 40px;
color: #6c757d;
}
.table-actions button {
padding: 4px 8px;
font-size: 0.875rem;
}
tbody tr {
transition: background-color 0.2s;
}
tbody tr:hover {
background-color: #f8f9fa;
}
.table-stats {
font-size: 0.875rem;
color: #6c757d;
}
</style>
</head>
<body>
<div class="container">
<div class="table-card">
<!-- Header -->
<div class="p-4 border-bottom">
<div class="row align-items-center mb-3">
<div class="col-md-6">
<h3 class="mb-0"><i class="fas fa-users me-2 text-primary"></i>Employee Management</h3>
</div>
<div class="col-md-6 text-md-end mt-3 mt-md-0">
<button class="btn btn-primary">
<i class="fas fa-plus me-2"></i>Add Employee
</button>
</div>
</div>
<!-- Search and Filter -->
<div class="row g-3">
<div class="col-md-6">
<div class="search-box">
<i class="fas fa-search"></i>
<input type="text" id="searchInput" class="form-control" placeholder="Search by name, email, department, or position...">
</div>
</div>
<div class="col-md-3">
<select id="statusFilter" class="form-select">
<option value="">All Status</option>
<option value="Active">Active</option>
<option value="Inactive">Inactive</option>
<option value="On Leave">On Leave</option>
</select>
</div>
<div class="col-md-3">
<select id="departmentFilter" class="form-select">
<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>
<!-- Table Stats -->
<div class="table-stats mt-3">
Showing <span id="visibleRows">0</span> of <span id="totalRows">0</span> employees
</div>
</div>
<!-- Table -->
<div class="table-responsive">
<table class="table table-hover mb-0" id="employeeTable">
<thead class="table-light">
<tr>
<th>
<input type="checkbox" class="form-check-input" id="selectAll">
</th>
<th>ID</th>
<th>Name</th>
<th>Email</th>
<th>Department</th>
<th>Position</th>
<th>Status</th>
<th>Actions</th>
</tr>
</thead>
<tbody id="tableBody">
<tr data-status="Active" data-department="Engineering">
<td><input type="checkbox" class="form-check-input row-checkbox"></td>
<td>#001</td>
<td><strong>John Doe</strong></td>
<td>john.doe@company.com</td>
<td>Engineering</td>
<td>Senior Developer</td>
<td><span class="badge bg-success badge-status">Active</span></td>
<td class="table-actions">
<button class="btn btn-sm btn-outline-primary" title="Edit">
<i class="fas fa-edit"></i>
</button>
<button class="btn btn-sm btn-outline-danger" title="Delete">
<i class="fas fa-trash"></i>
</button>
</td>
</tr>
<tr data-status="Active" data-department="Marketing">
<td><input type="checkbox" class="form-check-input row-checkbox"></td>
<td>#002</td>
<td><strong>Jane Smith</strong></td>
<td>jane.smith@company.com</td>
<td>Marketing</td>
<td>Marketing Manager</td>
<td><span class="badge bg-success badge-status">Active</span></td>
<td class="table-actions">
<button class="btn btn-sm btn-outline-primary" title="Edit">
<i class="fas fa-edit"></i>
</button>
<button class="btn btn-sm btn-outline-danger" title="Delete">
<i class="fas fa-trash"></i>
</button>
</td>
</tr>
<tr data-status="On Leave" data-department="Sales">
<td><input type="checkbox" class="form-check-input row-checkbox"></td>
<td>#003</td>
<td><strong>Mike Johnson</strong></td>
<td>mike.johnson@company.com</td>
<td>Sales</td>
<td>Sales Representative</td>
<td><span class="badge bg-warning text-dark badge-status">On Leave</span></td>
<td class="table-actions">
<button class="btn btn-sm btn-outline-primary" title="Edit">
<i class="fas fa-edit"></i>
</button>
<button class="btn btn-sm btn-outline-danger" title="Delete">
<i class="fas fa-trash"></i>
</button>
</td>
</tr>
<tr data-status="Active" data-department="HR">
<td><input type="checkbox" class="form-check-input row-checkbox"></td>
<td>#004</td>
<td><strong>Sarah Williams</strong></td>
<td>sarah.williams@company.com</td>
<td>HR</td>
<td>HR Specialist</td>
<td><span class="badge bg-success badge-status">Active</span></td>
<td class="table-actions">
<button class="btn btn-sm btn-outline-primary" title="Edit">
<i class="fas fa-edit"></i>
</button>
<button class="btn btn-sm btn-outline-danger" title="Delete">
<i class="fas fa-trash"></i>
</button>
</td>
</tr>
<tr data-status="Inactive" data-department="Finance">
<td><input type="checkbox" class="form-check-input row-checkbox"></td>
<td>#005</td>
<td><strong>David Brown</strong></td>
<td>david.brown@company.com</td>
<td>Finance</td>
<td>Accountant</td>
<td><span class="badge bg-secondary badge-status">Inactive</span></td>
<td class="table-actions">
<button class="btn btn-sm btn-outline-primary" title="Edit">
<i class="fas fa-edit"></i>
</button>
<button class="btn btn-sm btn-outline-danger" title="Delete">
<i class="fas fa-trash"></i>
</button>
</td>
</tr>
<tr data-status="Active" data-department="Engineering">
<td><input type="checkbox" class="form-check-input row-checkbox"></td>
<td>#006</td>
<td><strong>Emily Davis</strong></td>
<td>emily.davis@company.com</td>
<td>Engineering</td>
<td>UI/UX Designer</td>
<td><span class="badge bg-success badge-status">Active</span></td>
<td class="table-actions">
<button class="btn btn-sm btn-outline-primary" title="Edit">
<i class="fas fa-edit"></i>
</button>
<button class="btn btn-sm btn-outline-danger" title="Delete">
<i class="fas fa-trash"></i>
</button>
</td>
</tr>
<tr data-status="Active" data-department="Marketing">
<td><input type="checkbox" class="form-check-input row-checkbox"></td>
<td>#007</td>
<td><strong>Robert Wilson</strong></td>
<td>robert.wilson@company.com</td>
<td>Marketing</td>
<td>Content Writer</td>
<td><span class="badge bg-success badge-status">Active</span></td>
<td class="table-actions">
<button class="btn btn-sm btn-outline-primary" title="Edit">
<i class="fas fa-edit"></i>
</button>
<button class="btn btn-sm btn-outline-danger" title="Delete">
<i class="fas fa-trash"></i>
</button>
</td>
</tr>
<tr data-status="Active" data-department="Sales">
<td><input type="checkbox" class="form-check-input row-checkbox"></td>
<td>#008</td>
<td><strong>Lisa Anderson</strong></td>
<td>lisa.anderson@company.com</td>
<td>Sales</td>
<td>Sales Manager</td>
<td><span class="badge bg-success badge-status">Active</span></td>
<td class="table-actions">
<button class="btn btn-sm btn-outline-primary" title="Edit">
<i class="fas fa-edit"></i>
</button>
<button class="btn btn-sm btn-outline-danger" title="Delete">
<i class="fas fa-trash"></i>
</button>
</td>
</tr>
</tbody>
</table>
<!-- No Results Message -->
<div class="no-results" id="noResults">
<i class="fas fa-search fa-3x mb-3"></i>
<h5>No results found</h5>
<p>Try adjusting your search or filter criteria</p>
</div>
</div>
<!-- Footer -->
<div class="p-3 border-top bg-light">
<div class="row align-items-center">
<div class="col-md-6">
<button class="btn btn-sm btn-outline-danger" id="deleteSelected" disabled>
<i class="fas fa-trash me-1"></i>Delete Selected
</button>
</div>
<div class="col-md-6">
<nav aria-label="Table pagination">
<ul class="pagination pagination-sm mb-0 justify-content-md-end justify-content-center mt-3 mt-md-0">
<li class="page-item disabled">
<a class="page-link" href="#">Previous</a>
</li>
<li class="page-item active"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#">Next</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
const searchInput = document.getElementById('searchInput');
const statusFilter = document.getElementById('statusFilter');
const departmentFilter = document.getElementById('departmentFilter');
const tableBody = document.getElementById('tableBody');
const noResults = document.getElementById('noResults');
const visibleRowsSpan = document.getElementById('visibleRows');
const totalRowsSpan = document.getElementById('totalRows');
const selectAll = document.getElementById('selectAll');
const deleteSelectedBtn = document.getElementById('deleteSelected');
// Initialize row counts
updateRowCounts();
// Search and filter function
function filterTable() {
const searchTerm = searchInput.value.toLowerCase();
const statusValue = statusFilter.value;
const departmentValue = departmentFilter.value;
const rows = tableBody.getElementsByTagName('tr');
let visibleCount = 0;
for (let row of rows) {
const text = row.textContent.toLowerCase();
const status = row.getAttribute('data-status');
const department = row.getAttribute('data-department');
const matchesSearch = text.includes(searchTerm);
const matchesStatus = !statusValue || status === statusValue;
const matchesDepartment = !departmentValue || department === departmentValue;
if (matchesSearch && matchesStatus && matchesDepartment) {
row.style.display = '';
visibleCount++;
} else {
row.style.display = 'none';
}
}
// Show/hide no results message
if (visibleCount === 0) {
noResults.style.display = 'block';
} else {
noResults.style.display = 'none';
}
visibleRowsSpan.textContent = visibleCount;
}
// Update row counts
function updateRowCounts() {
const totalRows = tableBody.getElementsByTagName('tr').length;
totalRowsSpan.textContent = totalRows;
visibleRowsSpan.textContent = totalRows;
}
// Event listeners for search and filters
searchInput.addEventListener('keyup', filterTable);
statusFilter.addEventListener('change', filterTable);
departmentFilter.addEventListener('change', filterTable);
// Select all checkbox
selectAll.addEventListener('change', function() {
const checkboxes = document.querySelectorAll('.row-checkbox');
checkboxes.forEach(cb => {
if (cb.closest('tr').style.display !== 'none') {
cb.checked = this.checked;
}
});
updateDeleteButton();
});
// Individual checkbox handling
document.addEventListener('change', function(e) {
if (e.target.classList.contains('row-checkbox')) {
updateDeleteButton();
}
});
// Update delete button state
function updateDeleteButton() {
const checkedBoxes = document.querySelectorAll('.row-checkbox:checked');
deleteSelectedBtn.disabled = checkedBoxes.length === 0;
}
// Delete selected rows
deleteSelectedBtn.addEventListener('click', function() {
if (confirm('Are you sure you want to delete the selected employees?')) {
const checkedBoxes = document.querySelectorAll('.row-checkbox:checked');
checkedBoxes.forEach(cb => {
cb.closest('tr').remove();
});
selectAll.checked = false;
updateDeleteButton();
updateRowCounts();
filterTable();
}
});
</script>
</body>
</html>
Comments (0)
Login to leave a comment
Login
No comments yet. Be the first!