table data filter search dropdown dashboard table filter search dropdown status query data table with search and filter filterable table with status dropdown
Data Table With Filter
Fetch pattern JSON:
curl https://webspire.de/patterns/data-table/with-filter.json with-filter.html
<section class="ws-data-table-filter" style="--ws-data-table-bg: var(--ws-color-surface); --ws-data-table-text: var(--ws-color-text); --ws-data-table-text-soft: var(--ws-color-text-muted); --ws-data-table-border: var(--ws-color-border); --ws-data-table-accent: var(--ws-color-primary);">
<div class="mx-auto max-w-5xl px-4 py-10 sm:px-6 lg:px-8">
<div class="overflow-hidden rounded-2xl border border-[var(--ws-data-table-border)] bg-[var(--ws-data-table-bg)] shadow-md">
<!-- Filter bar -->
<div class="flex flex-col gap-3 border-b border-[var(--ws-data-table-border)] px-6 py-4 sm:flex-row sm:items-center sm:justify-between">
<div class="relative">
<svg class="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-[var(--ws-data-table-text-soft)]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
<input type="search" placeholder="Search transactions..." aria-label="Search transactions" class="w-full rounded-lg border border-[var(--ws-data-table-border)] bg-[var(--ws-data-table-bg)] py-2 pl-10 pr-4 text-sm text-[var(--ws-data-table-text)] placeholder-[var(--ws-data-table-text-soft)] focus:border-[var(--ws-data-table-accent)] focus:outline-none focus:ring-2 focus:ring-[var(--ws-data-table-accent)]/20 sm:w-72" />
</div>
<div>
<label for="status-filter" class="sr-only">Filter by status</label>
<div class="relative">
<select id="status-filter" class="w-full appearance-none rounded-lg border border-[var(--ws-data-table-border)] bg-[var(--ws-data-table-bg)] px-3 pr-10 py-2 text-sm text-[var(--ws-data-table-text)] focus:border-[var(--ws-data-table-accent)] focus:outline-none focus:ring-1 focus:ring-[var(--ws-data-table-accent)]">
<option>All</option>
<option>Active</option>
<option>Pending</option>
<option>Cancelled</option>
</select>
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
<svg class="h-4 w-4 text-[var(--ws-data-table-text-soft)]" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"/></svg>
</div>
</div>
</div>
</div>
<!-- Table -->
<div class="overflow-x-auto">
<table class="w-full text-sm">
<caption class="sr-only">Filterable transaction data</caption>
<thead>
<tr class="border-b border-[var(--ws-data-table-border)] bg-black/[0.02]">
<th scope="col" class="px-6 py-3.5 text-left text-xs font-semibold uppercase tracking-wider text-[var(--ws-data-table-text-soft)]">Name</th>
<th scope="col" class="px-6 py-3.5 text-left text-xs font-semibold uppercase tracking-wider text-[var(--ws-data-table-text-soft)]">Status</th>
<th scope="col" class="px-6 py-3.5 text-right text-xs font-semibold uppercase tracking-wider text-[var(--ws-data-table-text-soft)]">Amount</th>
<th scope="col" class="px-6 py-3.5 text-right text-xs font-semibold uppercase tracking-wider text-[var(--ws-data-table-text-soft)]">Date</th>
</tr>
</thead>
<tbody class="divide-y divide-[var(--ws-data-table-border)]">
<tr class="bg-[var(--ws-data-table-bg)]">
<td class="whitespace-nowrap px-6 py-4 font-medium text-[var(--ws-data-table-text)]">Sarah Kim</td>
<td class="whitespace-nowrap px-6 py-4"><span class="rounded-full bg-emerald-100 px-2.5 py-0.5 text-xs font-medium text-emerald-700">Active</span></td>
<td class="whitespace-nowrap px-6 py-4 text-right font-medium text-[var(--ws-data-table-text)]">$2,500.00</td>
<td class="whitespace-nowrap px-6 py-4 text-right text-[var(--ws-data-table-text-soft)]">Mar 20, 2026</td>
</tr>
<tr class="bg-black/[0.02]">
<td class="whitespace-nowrap px-6 py-4 font-medium text-[var(--ws-data-table-text)]">Marco Rossi</td>
<td class="whitespace-nowrap px-6 py-4"><span class="rounded-full bg-amber-100 px-2.5 py-0.5 text-xs font-medium text-amber-700">Pending</span></td>
<td class="whitespace-nowrap px-6 py-4 text-right font-medium text-[var(--ws-data-table-text)]">$1,250.00</td>
<td class="whitespace-nowrap px-6 py-4 text-right text-[var(--ws-data-table-text-soft)]">Mar 19, 2026</td>
</tr>
<tr class="bg-[var(--ws-data-table-bg)]">
<td class="whitespace-nowrap px-6 py-4 font-medium text-[var(--ws-data-table-text)]">Aisha Johnson</td>
<td class="whitespace-nowrap px-6 py-4"><span class="rounded-full bg-emerald-100 px-2.5 py-0.5 text-xs font-medium text-emerald-700">Active</span></td>
<td class="whitespace-nowrap px-6 py-4 text-right font-medium text-[var(--ws-data-table-text)]">$4,300.00</td>
<td class="whitespace-nowrap px-6 py-4 text-right text-[var(--ws-data-table-text-soft)]">Mar 18, 2026</td>
</tr>
<tr class="bg-black/[0.02]">
<td class="whitespace-nowrap px-6 py-4 font-medium text-[var(--ws-data-table-text)]">David Lee</td>
<td class="whitespace-nowrap px-6 py-4"><span class="rounded-full bg-rose-100 px-2.5 py-0.5 text-xs font-medium text-rose-700">Cancelled</span></td>
<td class="whitespace-nowrap px-6 py-4 text-right font-medium text-[var(--ws-data-table-text)]">$890.00</td>
<td class="whitespace-nowrap px-6 py-4 text-right text-[var(--ws-data-table-text-soft)]">Mar 17, 2026</td>
</tr>
<tr class="bg-[var(--ws-data-table-bg)]">
<td class="whitespace-nowrap px-6 py-4 font-medium text-[var(--ws-data-table-text)]">Elena Fischer</td>
<td class="whitespace-nowrap px-6 py-4"><span class="rounded-full bg-emerald-100 px-2.5 py-0.5 text-xs font-medium text-emerald-700">Active</span></td>
<td class="whitespace-nowrap px-6 py-4 text-right font-medium text-[var(--ws-data-table-text)]">$3,150.00</td>
<td class="whitespace-nowrap px-6 py-4 text-right text-[var(--ws-data-table-text-soft)]">Mar 16, 2026</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
tabledatafiltersearchdropdowndashboard
Slots
| Name | Required | Description |
|---|---|---|
| filterBar | Yes | Search input and status dropdown filter. |
| content | Yes | Table with header row and data rows. |
Extends the base data table with a filter bar above: a search input with magnifying glass icon on the left, and a status dropdown filter (All, Active, Pending, Cancelled) on the right. Stacks vertically on mobile.