Component
Filterable Table
Task management table with multi-filter dropdowns. Filter by status, priority, and category with reset functionality. Ideal for project management dashboards.
- Component
- Tailwind
- HTML
- MIT
Preview
Live component
9:41 100%
devsnips.dev/library/tailwind/components/tables/filterable-table/ fluid · no fixed width 100%
Install
Add to your project
npx devsnips add Tailwind/Components/Tables/filterable-table Tailwind/Components/Tables/filterable-table <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
<div class="p-4 border-b border-gray-200 bg-gray-50">
<div class="flex flex-wrap gap-3">
<select id="statusFilter" onchange="filterTable()" class="px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-cyan-500 bg-white">
<option value="">All Status</option>
<option value="active">Active</option>
<option value="pending">Pending</option>
<option value="completed">Completed</option>
<option value="cancelled">Cancelled</option>
</select>
<select id="priorityFilter" onchange="filterTable()" class="px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-cyan-500 bg-white">
<option value="">All Priority</option>
<option value="critical">Critical</option>
<option value="high">High</option>
<option value="medium">Medium</option>
<option value="low">Low</option>
</select>
<select id="categoryFilter" onchange="filterTable()" class="px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-cyan-500 bg-white">
<option value="">All Categories</option>
<option value="bug">Bug</option>
<option value="feature">Feature</option>
<option value="enhancement">Enhancement</option>
<option value="documentation">Documentation</option>
</select>
<button onclick="resetFilters()" class="px-3 py-2 text-sm text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded-lg transition-colors">
Reset Filters
</button>
</div>
</div>
<table class="w-full" id="taskTable">
<thead>
<tr class="bg-gray-50 border-b border-gray-200">
<th class="px-5 py-3.5 text-left text-xs font-bold text-gray-600 uppercase tracking-wider">Task</th>
<th class="px-5 py-3.5 text-left text-xs font-bold text-gray-600 uppercase tracking-wider">Priority</th>
<th class="px-5 py-3.5 text-left text-xs font-bold text-gray-600 uppercase tracking-wider">Category</th>
<th class="px-5 py-3.5 text-left text-xs font-bold text-gray-600 uppercase tracking-wider">Assignee</th>
<th class="px-5 py-3.5 text-left text-xs font-bold text-gray-600 uppercase tracking-wider">Due Date</th>
<th class="px-5 py-3.5 text-left text-xs font-bold text-gray-600 uppercase tracking-wider">Status</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-100" id="tableBody">
<tr class="task-row hover:bg-gray-50 transition-colors" data-status="active" data-priority="critical" data-category="bug">
<td class="px-5 py-4">
<div class="flex items-center gap-3">
<div class="w-8 h-8 rounded-lg bg-red-100 flex items-center justify-center flex-shrink-0">
<svg class="w-4 h-4 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
</svg>
</div>
<div>
<p class="text-sm font-medium text-gray-900 task-title">Fix authentication bypass in API gateway</p>
<p class="text-xs text-gray-500">SEC-2026-042</p>
</div>
</div>
</td>
<td class="px-5 py-4">
<span class="px-2.5 py-1 bg-red-100 text-red-700 text-xs font-semibold rounded-full">Critical</span>
</td>
<td class="px-5 py-4">
<span class="px-2.5 py-1 bg-gray-100 text-gray-700 text-xs font-medium rounded-full">Bug</span>
</td>
<td class="px-5 py-4">
<img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=40&h=40&fit=crop" alt="James" class="w-8 h-8 rounded-full object-cover">
</td>
<td class="px-5 py-4 text-sm text-gray-600">Mar 14, 2026</td>
<td class="px-5 py-4">
<span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-green-100 text-green-700">Active</span>
</td>
</tr>
<tr class="task-row hover:bg-gray-50 transition-colors" data-status="pending" data-priority="high" data-category="feature">
<td class="px-5 py-4">
<div class="flex items-center gap-3">
<div class="w-8 h-8 rounded-lg bg-blue-100 flex items-center justify-center flex-shrink-0">
<svg class="w-4 h-4 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
</svg>
</div>
<div>
<p class="text-sm font-medium text-gray-900 task-title">Implement dark mode toggle</p>
<p class="text-xs text-gray-500">FEAT-2026-089</p>
</div>
</div>
</td>
<td class="px-5 py-4">
<span class="px-2.5 py-1 bg-orange-100 text-orange-700 text-xs font-semibold rounded-full">High</span>
</td>
<td class="px-5 py-4">
<span class="px-2.5 py-1 bg-blue-100 text-blue-700 text-xs font-medium rounded-full">Feature</span>
</td>
<td class="px-5 py-4">
<img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=40&h=40&fit=crop" alt="Sarah" class="w-8 h-8 rounded-full object-cover">
</td>
<td class="px-5 py-4 text-sm text-gray-600">Mar 20, 2026</td>
<td class="px-5 py-4">
<span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-amber-100 text-amber-700">Pending</span>
</td>
</tr>
<tr class="task-row hover:bg-gray-50 transition-colors" data-status="completed" data-priority="medium" data-category="enhancement">
<td class="px-5 py-4">
<div class="flex items-center gap-3">
<div class="w-8 h-8 rounded-lg bg-purple-100 flex items-center justify-center flex-shrink-0">
<svg class="w-4 h-4 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
</svg>
</div>
<div>
<p class="text-sm font-medium text-gray-900 task-title">Optimize database queries for reports</p>
<p class="text-xs text-gray-500">ENH-2026-056</p>
</div>
</div>
</td>
<td class="px-5 py-4">
<span class="px-2.5 py-1 bg-yellow-100 text-yellow-700 text-xs font-semibold rounded-full">Medium</span>
</td>
<td class="px-5 py-4">
<span class="px-2.5 py-1 bg-purple-100 text-purple-700 text-xs font-medium rounded-full">Enhancement</span>
</td>
<td class="px-5 py-4">
<img src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=40&h=40&fit=crop" alt="Michael" class="w-8 h-8 rounded-full object-cover">
</td>
<td class="px-5 py-4 text-sm text-gray-600">Mar 8, 2026</td>
<td class="px-5 py-4">
<span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-emerald-100 text-emerald-700">Completed</span>
</td>
</tr>
<tr class="task-row hover:bg-gray-50 transition-colors" data-status="active" data-priority="high" data-category="feature">
<td class="px-5 py-4">
<div class="flex items-center gap-3">
<div class="w-8 h-8 rounded-lg bg-blue-100 flex items-center justify-center flex-shrink-0">
<svg class="w-4 h-4 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
</svg>
</div>
<div>
<p class="text-sm font-medium text-gray-900 task-title">Add export to PDF functionality</p>
<p class="text-xs text-gray-500">FEAT-2026-102</p>
</div>
</div>
</td>
<td class="px-5 py-4">
<span class="px-2.5 py-1 bg-orange-100 text-orange-700 text-xs font-semibold rounded-full">High</span>
</td>
<td class="px-5 py-4">
<span class="px-2.5 py-1 bg-blue-100 text-blue-700 text-xs font-medium rounded-full">Feature</span>
</td>
<td class="px-5 py-4">
<img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=40&h=40&fit=crop" alt="Emma" class="w-8 h-8 rounded-full object-cover">
</td>
<td class="px-5 py-4 text-sm text-gray-600">Mar 25, 2026</td>
<td class="px-5 py-4">
<span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-green-100 text-green-700">Active</span>
</td>
</tr>
<tr class="task-row hover:bg-gray-50 transition-colors" data-status="cancelled" data-priority="low" data-category="documentation">
<td class="px-5 py-4">
<div class="flex items-center gap-3">
<div class="w-8 h-8 rounded-lg bg-gray-100 flex items-center justify-center flex-shrink-0">
<svg class="w-4 h-4 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
</svg>
</div>
<div>
<p class="text-sm font-medium text-gray-900 task-title">Update API documentation</p>
<p class="text-xs text-gray-500">DOC-2026-023</p>
</div>
</div>
</td>
<td class="px-5 py-4">
<span class="px-2.5 py-1 bg-gray-100 text-gray-600 text-xs font-semibold rounded-full">Low</span>
</td>
<td class="px-5 py-4">
<span class="px-2.5 py-1 bg-teal-100 text-teal-700 text-xs font-medium rounded-full">Documentation</span>
</td>
<td class="px-5 py-4">
<img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=40&h=40&fit=crop" alt="David" class="w-8 h-8 rounded-full object-cover">
</td>
<td class="px-5 py-4 text-sm text-gray-600">Mar 5, 2026</td>
<td class="px-5 py-4">
<span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-gray-100 text-gray-600">Cancelled</span>
</td>
</tr>
</tbody>
</table>
</div>
<script>
function filterTable() {
const status = document.getElementById('statusFilter').value;
const priority = document.getElementById('priorityFilter').value;
const category = document.getElementById('categoryFilter').value;
const rows = document.querySelectorAll('.task-row');
rows.forEach(row => {
const rowStatus = row.dataset.status;
const rowPriority = row.dataset.priority;
const rowCategory = row.dataset.category;
const statusMatch = !status || rowStatus === status;
const priorityMatch = !priority || rowPriority === priority;
const categoryMatch = !category || rowCategory === category;
row.style.display = (statusMatch && priorityMatch && categoryMatch) ? '' : 'none';
});
}
function resetFilters() {
document.getElementById('statusFilter').value = '';
document.getElementById('priorityFilter').value = '';
document.getElementById('categoryFilter').value = '';
filterTable();
}
</script># Filterable Table
Table with filtering UI.
## Usage
```bash
npx devsnips add Tailwind/Components/Tables/filterable-table
```
Copy from `code.html`.
## File Structure
`code.html` · `preview.html` · `metadata.json` · `README.md` 212 lines UTF-8 · LF · Spaces: 2
Continue browsing