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

Family
data-table
Tier
enhanced
Kind
section
Extends
data-table/base
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.