table toolbar filters admin utility table toolbar filters utility admin segmented records utility rich admin table toolbar heavy customer or records table
Data Table Toolbar Heavy
Fetch pattern JSON:
curl https://webspire.de/patterns/data-table/toolbar-heavy.json toolbar-heavy.html
<section class="ws-data-table ws-data-table-toolbar-heavy" 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-6xl 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-sm">
<div class="flex flex-col gap-4 border-b border-[var(--ws-data-table-border)] px-6 py-4">
<div class="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
<div>
<h2 class="text-lg font-semibold text-[var(--ws-data-table-text)]">Customer pipeline</h2>
<p class="mt-1 text-sm text-[var(--ws-data-table-text-soft)]">Toolbar-heavy list with filtering, segmented views, and utility actions.</p>
</div>
<div class="flex flex-wrap items-center gap-2">
<button type="button" class="rounded-lg border border-[var(--ws-data-table-border)] px-3 py-2 text-sm font-medium text-[var(--ws-data-table-text)]">Export</button>
<button type="button" class="rounded-lg border border-[var(--ws-data-table-border)] px-3 py-2 text-sm font-medium text-[var(--ws-data-table-text)]">Assign owner</button>
<button type="button" class="rounded-lg bg-[var(--ws-data-table-accent)] px-3 py-2 text-sm font-semibold text-white">New account</button>
</div>
</div>
<div class="grid gap-3 xl:grid-cols-[1.1fr_repeat(2,minmax(0,180px))_auto]">
<div class="relative">
<svg class="pointer-events-none 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" aria-label="Search accounts" placeholder="Search accounts, owners, stages..." class="w-full rounded-xl border border-[var(--ws-data-table-border)] py-2.5 pl-10 pr-4 text-sm text-[var(--ws-data-table-text)] focus:border-[var(--ws-data-table-accent)] focus:outline-none focus:ring-2 focus:ring-[var(--ws-data-table-accent)]/15" />
</div>
<div class="relative">
<select class="w-full appearance-none rounded-xl border border-[var(--ws-data-table-border)] bg-[var(--ws-data-table-bg)] px-3 pr-10 py-2.5 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>Any stage</option>
<option>Discovery</option>
<option>Proposal</option>
<option>Negotiation</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 class="relative">
<select class="w-full appearance-none rounded-xl border border-[var(--ws-data-table-border)] bg-[var(--ws-data-table-bg)] px-3 pr-10 py-2.5 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>Any owner</option>
<option>Maya</option>
<option>Jonas</option>
<option>Lina</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 class="inline-flex rounded-xl border border-[var(--ws-data-table-border)] p-1 text-sm">
<button type="button" class="rounded-lg bg-[var(--ws-data-table-accent)] px-3 py-1.5 font-medium text-white">Open</button>
<button type="button" class="rounded-lg px-3 py-1.5 font-medium text-[var(--ws-data-table-text-soft)]">Won</button>
<button type="button" class="rounded-lg px-3 py-1.5 font-medium text-[var(--ws-data-table-text-soft)]">Lost</button>
</div>
</div>
</div>
<div class="overflow-x-auto">
<table class="w-full text-sm">
<caption class="sr-only">Customer pipeline table</caption>
<thead class="bg-black/[0.02]">
<tr>
<th scope="col" class="px-6 py-3 text-left text-xs font-semibold uppercase tracking-[0.16em] text-[var(--ws-data-table-text-soft)]">Account</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-semibold uppercase tracking-[0.16em] text-[var(--ws-data-table-text-soft)]">Owner</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-semibold uppercase tracking-[0.16em] text-[var(--ws-data-table-text-soft)]">Stage</th>
<th scope="col" class="px-6 py-3 text-right text-xs font-semibold uppercase tracking-[0.16em] text-[var(--ws-data-table-text-soft)]">MRR</th>
</tr>
</thead>
<tbody class="divide-y divide-[var(--ws-data-table-border)]">
<tr>
<td class="px-6 py-4 font-medium text-[var(--ws-data-table-text)]">Northstar Labs</td>
<td class="px-6 py-4 text-[var(--ws-data-table-text-soft)]">Maya Chen</td>
<td class="px-6 py-4"><span class="rounded-full bg-blue-100 px-2.5 py-0.5 text-xs font-medium text-blue-700">Proposal</span></td>
<td class="px-6 py-4 text-right font-medium text-[var(--ws-data-table-text)]">$4,200</td>
</tr>
<tr>
<td class="px-6 py-4 font-medium text-[var(--ws-data-table-text)]">Aster Health</td>
<td class="px-6 py-4 text-[var(--ws-data-table-text-soft)]">Jonas Weber</td>
<td class="px-6 py-4"><span class="rounded-full bg-amber-100 px-2.5 py-0.5 text-xs font-medium text-amber-700">Negotiation</span></td>
<td class="px-6 py-4 text-right font-medium text-[var(--ws-data-table-text)]">$2,960</td>
</tr>
<tr>
<td class="px-6 py-4 font-medium text-[var(--ws-data-table-text)]">Field Office</td>
<td class="px-6 py-4 text-[var(--ws-data-table-text-soft)]">Lina Bauer</td>
<td class="px-6 py-4"><span class="rounded-full bg-emerald-100 px-2.5 py-0.5 text-xs font-medium text-emerald-700">Discovery</span></td>
<td class="px-6 py-4 text-right font-medium text-[var(--ws-data-table-text)]">$620</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
tabletoolbarfiltersadminutility
Slots
| Name | Required | Description |
|---|---|---|
| toolbar | Yes | Search, filters, segmented view switch, and primary actions. |
| content | Yes | Data table rows tied to the toolbar state. |
Full utility-table variant for app surfaces where the table is the primary working area and the controls around it are part of the workflow.