devsnips
Search docs, APIs, guides…

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

What it does

Capabilities

  • Multi-filter
  • Dropdown filters
  • Reset button
  • Task icons
  • Priority badges

Preview

Live component

Interactive preview
Open preview
9:41 100%
devsnips.site/library/tailwind/components/tables/filterable-table/
fluid · no fixed width 100%
No dependencies Production-ready

Install

Add to your project

terminal
npx devsnips add Tailwind/Components/Tables/filterable-table
registry path: Tailwind/Components/Tables/filterable-table

Source

Implementation

code.html 
<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>
212 lines UTF-8 · LF · Spaces: 2
DevSnips AI ready Claude · Cursor · Windsurf

Agent skill & Model Context Protocol

Pass this component straight into your AI workflow. DevSnips exposes each resource as a structured, addressable registry entry, so your agent installs the real files instead of approximating them.

devsnips://components/tables/filterable-table
Prompt instruction 
I want to use this DevSnips resource in production:

Page:
https://devsnips.site/library/tailwind/components/tables/filterable-table/

Install: npx devsnips add
Tailwind/Components/Tables/filterable-table

This is the Filterable Table — Task management table with multi-filter dropdowns. Filter by status, priority, and category with reset functionality. Ideal for project management dashboards.

Use this DevSnips resource as the starting point for my project.
Adapt it to my project's stack and conventions, fix any issues,
and make it production-ready while preserving its intended design
and behavior.

Paste into ChatGPT, Claude or your agent — it already carries the page URL and the exact install path.

Resource URI
devsnips://components/tables/filterable-table