table compact admin dense utility table compact dense admin invoice utility compact admin table dense invoice or utility table
Data Table Compact
Fetch pattern JSON:
curl https://webspire.de/patterns/data-table/compact.json compact.html
<section class="ws-data-table ws-data-table-compact" 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-sm">
<div class="flex items-center justify-between border-b border-[var(--ws-data-table-border)] px-5 py-3.5">
<div>
<p class="text-sm font-semibold text-[var(--ws-data-table-text)]">Recent invoices</p>
<p class="text-xs text-[var(--ws-data-table-text-soft)]">Compact density for admin lists and internal tools.</p>
</div>
<button type="button" class="rounded-lg border border-[var(--ws-data-table-border)] px-3 py-1.5 text-xs font-medium text-[var(--ws-data-table-text)]">Export CSV</button>
</div>
<div class="overflow-x-auto">
<table class="w-full text-sm">
<caption class="sr-only">Compact invoice table</caption>
<thead class="bg-black/[0.02]">
<tr>
<th scope="col" class="px-5 py-2.5 text-left text-[11px] font-semibold uppercase tracking-[0.16em] text-[var(--ws-data-table-text-soft)]">Invoice</th>
<th scope="col" class="px-5 py-2.5 text-left text-[11px] font-semibold uppercase tracking-[0.16em] text-[var(--ws-data-table-text-soft)]">Customer</th>
<th scope="col" class="px-5 py-2.5 text-left text-[11px] font-semibold uppercase tracking-[0.16em] text-[var(--ws-data-table-text-soft)]">Status</th>
<th scope="col" class="px-5 py-2.5 text-right text-[11px] font-semibold uppercase tracking-[0.16em] text-[var(--ws-data-table-text-soft)]">Amount</th>
</tr>
</thead>
<tbody class="divide-y divide-[var(--ws-data-table-border)]">
<tr>
<td class="px-5 py-3 font-medium text-[var(--ws-data-table-text)]">INV-4821</td>
<td class="px-5 py-3 text-[var(--ws-data-table-text-soft)]">Northstar Labs</td>
<td class="px-5 py-3"><span class="rounded-full bg-emerald-100 px-2 py-0.5 text-[11px] font-medium text-emerald-700">Paid</span></td>
<td class="px-5 py-3 text-right font-medium text-[var(--ws-data-table-text)]">$4,200</td>
</tr>
<tr>
<td class="px-5 py-3 font-medium text-[var(--ws-data-table-text)]">INV-4813</td>
<td class="px-5 py-3 text-[var(--ws-data-table-text-soft)]">Signal Works</td>
<td class="px-5 py-3"><span class="rounded-full bg-amber-100 px-2 py-0.5 text-[11px] font-medium text-amber-700">Pending</span></td>
<td class="px-5 py-3 text-right font-medium text-[var(--ws-data-table-text)]">$1,180</td>
</tr>
<tr>
<td class="px-5 py-3 font-medium text-[var(--ws-data-table-text)]">INV-4809</td>
<td class="px-5 py-3 text-[var(--ws-data-table-text-soft)]">Field Office</td>
<td class="px-5 py-3"><span class="rounded-full bg-slate-100 px-2 py-0.5 text-[11px] font-medium text-slate-700">Draft</span></td>
<td class="px-5 py-3 text-right font-medium text-[var(--ws-data-table-text)]">$620</td>
</tr>
<tr>
<td class="px-5 py-3 font-medium text-[var(--ws-data-table-text)]">INV-4801</td>
<td class="px-5 py-3 text-[var(--ws-data-table-text-soft)]">Aster Health</td>
<td class="px-5 py-3"><span class="rounded-full bg-rose-100 px-2 py-0.5 text-[11px] font-medium text-rose-700">Overdue</span></td>
<td class="px-5 py-3 text-right font-medium text-[var(--ws-data-table-text)]">$2,960</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
tablecompactadmindenseutility
Slots
| Name | Required | Description |
|---|---|---|
| heading | No | Table title and small utility action. |
| content | Yes | Dense table rows with compact metadata and status labels. |
Compact data-table variant for utility-heavy screens. Reduces row padding and metadata weight so more records fit without switching to a plain spreadsheet look.