table selection bulk-actions admin members table selectable checkbox members bulk actions admin selectable admin table member management table with bulk actions
Data Table Selectable
Fetch pattern JSON:
curl https://webspire.de/patterns/data-table/selectable.json selectable.html
<section class="ws-data-table-selectable" 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-3 border-b border-[var(--ws-data-table-border)] px-6 py-4 sm:flex-row sm:items-center sm:justify-between">
<div>
<p class="text-sm font-semibold text-[var(--ws-data-table-text)]">Team access</p>
<p class="text-sm text-[var(--ws-data-table-text-soft)]">Select members to change role or suspend access.</p>
</div>
<div class="flex 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)]">Change role</button>
<button type="button" class="rounded-lg bg-[var(--ws-data-table-accent)] px-3 py-2 text-sm font-semibold text-white">Invite member</button>
</div>
</div>
<div class="overflow-x-auto">
<table class="w-full text-sm">
<caption class="sr-only">Selectable team member table</caption>
<thead>
<tr class="border-b border-[var(--ws-data-table-border)] bg-black/[0.02]">
<th scope="col" class="w-14 px-4 py-3 text-left">
<input type="checkbox" aria-label="Select all members" class="h-4 w-4 rounded border-[var(--ws-data-table-border)] text-[var(--ws-data-table-accent)] focus:ring-[var(--ws-data-table-accent)]" />
</th>
<th scope="col" class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-[var(--ws-data-table-text-soft)]">Member</th>
<th scope="col" class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-[var(--ws-data-table-text-soft)]">Role</th>
<th scope="col" class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-[var(--ws-data-table-text-soft)]">Status</th>
<th scope="col" class="px-4 py-3 text-right text-xs font-semibold uppercase tracking-wider text-[var(--ws-data-table-text-soft)]">Last active</th>
</tr>
</thead>
<tbody class="divide-y divide-[var(--ws-data-table-border)]">
<tr class="bg-[var(--ws-data-table-accent)]/5">
<td class="px-4 py-4">
<input type="checkbox" checked aria-label="Select Maya Chen" class="h-4 w-4 rounded border-[var(--ws-data-table-border)] text-[var(--ws-data-table-accent)] focus:ring-[var(--ws-data-table-accent)]" />
</td>
<td class="px-4 py-4">
<div class="flex items-center gap-3">
<div class="flex h-9 w-9 items-center justify-center rounded-full bg-sky-100 text-xs font-semibold text-sky-700">MC</div>
<div>
<p class="font-medium text-[var(--ws-data-table-text)]">Maya Chen</p>
<p class="text-[var(--ws-data-table-text-soft)]">maya@webspire.dev</p>
</div>
</div>
</td>
<td class="px-4 py-4 text-[var(--ws-data-table-text)]">Admin</td>
<td class="px-4 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="px-4 py-4 text-right text-[var(--ws-data-table-text-soft)]">2 min ago</td>
</tr>
<tr>
<td class="px-4 py-4">
<input type="checkbox" aria-label="Select Jonas Weber" class="h-4 w-4 rounded border-[var(--ws-data-table-border)] text-[var(--ws-data-table-accent)] focus:ring-[var(--ws-data-table-accent)]" />
</td>
<td class="px-4 py-4">
<div class="flex items-center gap-3">
<div class="flex h-9 w-9 items-center justify-center rounded-full bg-violet-100 text-xs font-semibold text-violet-700">JW</div>
<div>
<p class="font-medium text-[var(--ws-data-table-text)]">Jonas Weber</p>
<p class="text-[var(--ws-data-table-text-soft)]">jonas@webspire.dev</p>
</div>
</div>
</td>
<td class="px-4 py-4 text-[var(--ws-data-table-text)]">Editor</td>
<td class="px-4 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="px-4 py-4 text-right text-[var(--ws-data-table-text-soft)]">1 hour ago</td>
</tr>
<tr>
<td class="px-4 py-4">
<input type="checkbox" aria-label="Select Lina Bauer" class="h-4 w-4 rounded border-[var(--ws-data-table-border)] text-[var(--ws-data-table-accent)] focus:ring-[var(--ws-data-table-accent)]" />
</td>
<td class="px-4 py-4">
<div class="flex items-center gap-3">
<div class="flex h-9 w-9 items-center justify-center rounded-full bg-rose-100 text-xs font-semibold text-rose-700">LB</div>
<div>
<p class="font-medium text-[var(--ws-data-table-text)]">Lina Bauer</p>
<p class="text-[var(--ws-data-table-text-soft)]">lina@webspire.dev</p>
</div>
</div>
</td>
<td class="px-4 py-4 text-[var(--ws-data-table-text)]">Support</td>
<td class="px-4 py-4"><span class="rounded-full bg-slate-100 px-2.5 py-0.5 text-xs font-medium text-slate-700">Paused</span></td>
<td class="px-4 py-4 text-right text-[var(--ws-data-table-text-soft)]">Yesterday</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
tableselectionbulk-actionsadminmembers
Slots
| Name | Required | Description |
|---|---|---|
| controls | Yes | Bulk action bar with primary and secondary actions. |
| content | Yes | Selectable rows with checkbox column and member metadata. |
Selectable data table for admin and account-management flows. Uses a checkbox column, a compact action bar, and row metadata like avatar, role, status, and last activity.