dashboard table data rows status actions dashboard table data rows status badges actions admin list data table for dashboard admin table with status badges
Dashboard Table
Fetch pattern JSON:
curl https://webspire.de/patterns/dashboard/table.json table.html
<div class="ws-dashboard rounded-xl border border-[var(--ws-dashboard-border)] bg-[var(--ws-dashboard-card-bg)] shadow-sm">
<div class="flex items-center justify-between border-b border-[var(--ws-dashboard-border)] px-6 py-4">
<h3 class="text-base font-semibold text-[var(--ws-dashboard-text)]">Users</h3>
<button type="button" class="rounded-lg bg-[var(--ws-dashboard-accent)] px-3.5 py-2 text-sm font-semibold text-white transition hover:opacity-90">Add user</button>
</div>
<div class="overflow-x-auto">
<table class="w-full min-w-[640px] text-left text-sm">
<caption class="sr-only">Team members and their roles</caption>
<thead class="border-b border-[var(--ws-dashboard-border)] text-xs uppercase text-[var(--ws-dashboard-text-muted)]">
<tr>
<th scope="col" class="px-6 py-3 font-medium">Name</th>
<th scope="col" class="px-6 py-3 font-medium">Status</th>
<th scope="col" class="px-6 py-3 font-medium">Role</th>
<th scope="col" class="px-6 py-3 font-medium">Email</th>
<th scope="col" class="px-6 py-3 font-medium"><span class="sr-only">Actions</span></th>
</tr>
</thead>
<tbody class="divide-y divide-[var(--ws-dashboard-border)]">
<tr>
<td class="px-6 py-4">
<div class="flex items-center gap-3">
<div class="h-8 w-8 rounded-full bg-black/10 flex items-center justify-center flex-shrink-0" aria-hidden="true">
<svg class="h-5 w-5 text-[var(--ws-dashboard-text-muted)]" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" /></svg>
</div>
<span class="font-medium text-[var(--ws-dashboard-text)]">Alex Rivera</span>
</div>
</td>
<td class="px-6 py-4"><span class="inline-flex items-center rounded-full bg-emerald-50 px-2 py-1 text-xs font-medium text-emerald-700">Active</span></td>
<td class="px-6 py-4 text-[var(--ws-dashboard-text-soft)]">Admin</td>
<td class="px-6 py-4 text-[var(--ws-dashboard-text-soft)]">alex@company.com</td>
<td class="px-6 py-4 text-right"><a href="#" class="text-sm font-medium text-[var(--ws-dashboard-accent)] hover:opacity-80">Edit</a></td>
</tr>
<tr>
<td class="px-6 py-4">
<div class="flex items-center gap-3">
<div class="h-8 w-8 rounded-full bg-black/10 flex items-center justify-center flex-shrink-0" aria-hidden="true">
<svg class="h-5 w-5 text-[var(--ws-dashboard-text-muted)]" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" /></svg>
</div>
<span class="font-medium text-[var(--ws-dashboard-text)]">Sarah Chen</span>
</div>
</td>
<td class="px-6 py-4"><span class="inline-flex items-center rounded-full bg-emerald-50 px-2 py-1 text-xs font-medium text-emerald-700">Active</span></td>
<td class="px-6 py-4 text-[var(--ws-dashboard-text-soft)]">Editor</td>
<td class="px-6 py-4 text-[var(--ws-dashboard-text-soft)]">sarah@company.com</td>
<td class="px-6 py-4 text-right"><a href="#" class="text-sm font-medium text-[var(--ws-dashboard-accent)] hover:opacity-80">Edit</a></td>
</tr>
<tr>
<td class="px-6 py-4">
<div class="flex items-center gap-3">
<div class="h-8 w-8 rounded-full bg-black/10 flex items-center justify-center flex-shrink-0" aria-hidden="true">
<svg class="h-5 w-5 text-[var(--ws-dashboard-text-muted)]" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" /></svg>
</div>
<span class="font-medium text-[var(--ws-dashboard-text)]">Marcus Johnson</span>
</div>
</td>
<td class="px-6 py-4"><span class="inline-flex items-center rounded-full bg-amber-50 px-2 py-1 text-xs font-medium text-amber-700">Pending</span></td>
<td class="px-6 py-4 text-[var(--ws-dashboard-text-soft)]">Viewer</td>
<td class="px-6 py-4 text-[var(--ws-dashboard-text-soft)]">marcus@company.com</td>
<td class="px-6 py-4 text-right"><a href="#" class="text-sm font-medium text-[var(--ws-dashboard-accent)] hover:opacity-80">Edit</a></td>
</tr>
<tr>
<td class="px-6 py-4">
<div class="flex items-center gap-3">
<div class="h-8 w-8 rounded-full bg-black/10 flex items-center justify-center flex-shrink-0" aria-hidden="true">
<svg class="h-5 w-5 text-[var(--ws-dashboard-text-muted)]" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" /></svg>
</div>
<span class="font-medium text-[var(--ws-dashboard-text)]">Emily Park</span>
</div>
</td>
<td class="px-6 py-4"><span class="inline-flex items-center rounded-full bg-slate-100 px-2 py-1 text-xs font-medium text-slate-600">Inactive</span></td>
<td class="px-6 py-4 text-[var(--ws-dashboard-text-soft)]">Editor</td>
<td class="px-6 py-4 text-[var(--ws-dashboard-text-soft)]">emily@company.com</td>
<td class="px-6 py-4 text-right"><a href="#" class="text-sm font-medium text-[var(--ws-dashboard-accent)] hover:opacity-80">Edit</a></td>
</tr>
</tbody>
</table>
</div>
</div>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
dashboardtabledatarowsstatusactions
Slots
| Name | Required | Description |
|---|---|---|
| header | Yes | Table title and optional action button. |
| table | Yes | Data table with column headers and rows. |
Dashboard data table with sortable column headers, user avatars, status badges (active/inactive/pending), role labels, and edit action links. Wrapped in a rounded card with title and “Add user” button. Responsive with horizontal scroll on mobile.