table data grid sortable badges dashboard table data sortable rows columns badges status data table with sortable columns transaction table with status badges
Data Table
Fetch pattern JSON:
curl https://webspire.de/patterns/data-table/base.json base.html
<section class="ws-data-table" 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">
<div class="overflow-x-auto">
<table class="w-full text-sm">
<caption class="sr-only">Transaction data with name, status, amount, and date</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)]">
<span class="inline-flex cursor-pointer items-center gap-1">
Name
<svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M7 11l5-5m0 0l5 5m-5-5v12"/></svg>
</span>
</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)]">
<span class="inline-flex cursor-pointer items-center gap-1">
Status
<svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M7 16V4m0 0L2 9m5-5l5 5m5 0v12m0 0l5-5m-5 5l-5-5"/></svg>
</span>
</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)]">
<span class="inline-flex cursor-pointer items-center gap-1">
Amount
<svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M7 16V4m0 0L2 9m5-5l5 5m5 0v12m0 0l5-5m-5 5l-5-5"/></svg>
</span>
</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)]">
<span class="inline-flex cursor-pointer items-center gap-1">
Date
<svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M7 16V4m0 0L2 9m5-5l5 5m5 0v12m0 0l5-5m-5 5l-5-5"/></svg>
</span>
</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
tabledatagridsortablebadgesdashboard
Slots
| Name | Required | Description |
|---|---|---|
| content | Yes | Table with header row and data rows. |
A clean data table with header row and 5 data rows. Columns include Name, Status (colored badge), Amount, and Date. Alternating row backgrounds for readability. Sort chevron icons in column headers indicate sortability.