table data striped checkbox selection avatar actions dashboard table striped checkbox select avatar role edit delete actions striped table with row selection data table with checkboxes and action buttons
Data Table Striped
Fetch pattern JSON:
curl https://webspire.de/patterns/data-table/striped.json striped.html
<section class="ws-data-table-striped" 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">Team members with selection checkboxes</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">
<input type="checkbox" aria-label="Select all rows" 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-6 py-3.5 text-left text-xs font-semibold uppercase tracking-wider text-[var(--ws-data-table-text-soft)]">Name</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)]">Email</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)]">Role</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)]">Actions</th>
</tr>
</thead>
<tbody class="divide-y divide-[var(--ws-data-table-border)]">
<!-- Row 1 (odd) -->
<tr class="bg-[var(--ws-data-table-bg)]">
<td class="px-6 py-4">
<input type="checkbox" aria-label="Select Sarah Kim" 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="whitespace-nowrap px-6 py-4">
<div class="flex items-center gap-3">
<div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-violet-100 text-xs font-bold text-violet-700">SK</div>
<span class="font-medium text-[var(--ws-data-table-text)]">Sarah Kim</span>
</div>
</td>
<td class="whitespace-nowrap px-6 py-4 text-[var(--ws-data-table-text-soft)]">sarah@example.com</td>
<td class="whitespace-nowrap px-6 py-4"><span class="rounded-full bg-indigo-100 px-2.5 py-0.5 text-xs font-medium text-indigo-700">Admin</span></td>
<td class="whitespace-nowrap px-6 py-4 text-right">
<div class="flex items-center justify-end gap-2">
<button type="button" class="rounded-lg p-1.5 text-[var(--ws-data-table-text-soft)] hover:bg-black/5 focus:outline-none focus:ring-2 focus:ring-[var(--ws-data-table-accent)]" aria-label="Edit Sarah Kim">
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg>
</button>
<button type="button" class="rounded-lg p-1.5 text-rose-500 hover:bg-rose-50 focus:outline-none focus:ring-2 focus:ring-rose-500" aria-label="Delete Sarah Kim">
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
</button>
</div>
</td>
</tr>
<!-- Row 2 (even — striped) -->
<tr class="bg-black/[0.02]">
<td class="px-6 py-4">
<input type="checkbox" aria-label="Select Marco Rossi" 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="whitespace-nowrap px-6 py-4">
<div class="flex items-center gap-3">
<div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-blue-100 text-xs font-bold text-blue-700">MR</div>
<span class="font-medium text-[var(--ws-data-table-text)]">Marco Rossi</span>
</div>
</td>
<td class="whitespace-nowrap px-6 py-4 text-[var(--ws-data-table-text-soft)]">marco@example.com</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">Editor</span></td>
<td class="whitespace-nowrap px-6 py-4 text-right">
<div class="flex items-center justify-end gap-2">
<button type="button" class="rounded-lg p-1.5 text-[var(--ws-data-table-text-soft)] hover:bg-black/5 focus:outline-none focus:ring-2 focus:ring-[var(--ws-data-table-accent)]" aria-label="Edit Marco Rossi">
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg>
</button>
<button type="button" class="rounded-lg p-1.5 text-rose-500 hover:bg-rose-50 focus:outline-none focus:ring-2 focus:ring-rose-500" aria-label="Delete Marco Rossi">
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
</button>
</div>
</td>
</tr>
<!-- Row 3 (odd) -->
<tr class="bg-[var(--ws-data-table-bg)]">
<td class="px-6 py-4">
<input type="checkbox" aria-label="Select Aisha Johnson" 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="whitespace-nowrap px-6 py-4">
<div class="flex items-center gap-3">
<div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-amber-100 text-xs font-bold text-amber-700">AJ</div>
<span class="font-medium text-[var(--ws-data-table-text)]">Aisha Johnson</span>
</div>
</td>
<td class="whitespace-nowrap px-6 py-4 text-[var(--ws-data-table-text-soft)]">aisha@example.com</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">Viewer</span></td>
<td class="whitespace-nowrap px-6 py-4 text-right">
<div class="flex items-center justify-end gap-2">
<button type="button" class="rounded-lg p-1.5 text-[var(--ws-data-table-text-soft)] hover:bg-black/5 focus:outline-none focus:ring-2 focus:ring-[var(--ws-data-table-accent)]" aria-label="Edit Aisha Johnson">
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg>
</button>
<button type="button" class="rounded-lg p-1.5 text-rose-500 hover:bg-rose-50 focus:outline-none focus:ring-2 focus:ring-rose-500" aria-label="Delete Aisha Johnson">
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
</button>
</div>
</td>
</tr>
<!-- Row 4 (even — striped) -->
<tr class="bg-black/[0.02]">
<td class="px-6 py-4">
<input type="checkbox" aria-label="Select David Lee" 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="whitespace-nowrap px-6 py-4">
<div class="flex items-center gap-3">
<div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-emerald-100 text-xs font-bold text-emerald-700">DL</div>
<span class="font-medium text-[var(--ws-data-table-text)]">David Lee</span>
</div>
</td>
<td class="whitespace-nowrap px-6 py-4 text-[var(--ws-data-table-text-soft)]">david@example.com</td>
<td class="whitespace-nowrap px-6 py-4"><span class="rounded-full bg-indigo-100 px-2.5 py-0.5 text-xs font-medium text-indigo-700">Admin</span></td>
<td class="whitespace-nowrap px-6 py-4 text-right">
<div class="flex items-center justify-end gap-2">
<button type="button" class="rounded-lg p-1.5 text-[var(--ws-data-table-text-soft)] hover:bg-black/5 focus:outline-none focus:ring-2 focus:ring-[var(--ws-data-table-accent)]" aria-label="Edit David Lee">
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg>
</button>
<button type="button" class="rounded-lg p-1.5 text-rose-500 hover:bg-rose-50 focus:outline-none focus:ring-2 focus:ring-rose-500" aria-label="Delete David Lee">
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
</button>
</div>
</td>
</tr>
<!-- Row 5 (odd) -->
<tr class="bg-[var(--ws-data-table-bg)]">
<td class="px-6 py-4">
<input type="checkbox" aria-label="Select Elena Fischer" 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="whitespace-nowrap px-6 py-4">
<div class="flex items-center gap-3">
<div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-rose-100 text-xs font-bold text-rose-700">EF</div>
<span class="font-medium text-[var(--ws-data-table-text)]">Elena Fischer</span>
</div>
</td>
<td class="whitespace-nowrap px-6 py-4 text-[var(--ws-data-table-text-soft)]">elena@example.com</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">Editor</span></td>
<td class="whitespace-nowrap px-6 py-4 text-right">
<div class="flex items-center justify-end gap-2">
<button type="button" class="rounded-lg p-1.5 text-[var(--ws-data-table-text-soft)] hover:bg-black/5 focus:outline-none focus:ring-2 focus:ring-[var(--ws-data-table-accent)]" aria-label="Edit Elena Fischer">
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg>
</button>
<button type="button" class="rounded-lg p-1.5 text-rose-500 hover:bg-rose-50 focus:outline-none focus:ring-2 focus:ring-rose-500" aria-label="Delete Elena Fischer">
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
tabledatastripedcheckboxselectionavataractionsdashboard
Slots
| Name | Required | Description |
|---|---|---|
| content | Yes | Striped table with checkbox column, name with avatar, email, role badge, and action buttons. |
Striped table variant with checkbox column for row selection (header checkbox for select-all). Each row shows name with avatar initials, email, role badge, and edit/delete icon buttons. Even rows have a subtle background stripe for readability.