table data pagination pages navigation dashboard table pagination pages prev next results navigation data table with pagination controls paginated table with page numbers
Data Table With Pagination
Fetch pattern JSON:
curl https://webspire.de/patterns/data-table/with-pagination.json with-pagination.html
<section class="ws-data-table-pagination" 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">
<!-- Table -->
<div class="overflow-x-auto">
<table class="w-full text-sm">
<caption class="sr-only">Paginated transaction data</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)]">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)]">Status</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)]">Amount</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)]">Date</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>
<!-- Pagination bar -->
<div class="flex flex-col items-center justify-between gap-3 border-t border-[var(--ws-data-table-border)] px-6 py-4 sm:flex-row">
<p class="text-sm text-[var(--ws-data-table-text-soft)]">Showing <span class="font-medium text-[var(--ws-data-table-text)]">1–10</span> of <span class="font-medium text-[var(--ws-data-table-text)]">50</span> results</p>
<nav aria-label="Pagination">
<ul class="flex items-center gap-1">
<li>
<a href="#" class="inline-flex h-9 w-9 items-center justify-center rounded-lg border border-[var(--ws-data-table-border)] text-sm text-[var(--ws-data-table-text-soft)] hover:bg-black/5" aria-label="Previous page">
<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="M15 19l-7-7 7-7"/></svg>
</a>
</li>
<li><a href="#" aria-current="page" class="inline-flex h-9 w-9 items-center justify-center rounded-lg bg-[var(--ws-data-table-accent)] text-sm font-medium text-white">1</a></li>
<li><a href="#" class="inline-flex h-9 w-9 items-center justify-center rounded-lg border border-[var(--ws-data-table-border)] text-sm text-[var(--ws-data-table-text)] hover:bg-black/5">2</a></li>
<li><a href="#" class="inline-flex h-9 w-9 items-center justify-center rounded-lg border border-[var(--ws-data-table-border)] text-sm text-[var(--ws-data-table-text)] hover:bg-black/5">3</a></li>
<li><span class="inline-flex h-9 w-9 items-center justify-center text-sm text-[var(--ws-data-table-text-soft)]">…</span></li>
<li><a href="#" class="inline-flex h-9 w-9 items-center justify-center rounded-lg border border-[var(--ws-data-table-border)] text-sm text-[var(--ws-data-table-text)] hover:bg-black/5">5</a></li>
<li>
<a href="#" class="inline-flex h-9 w-9 items-center justify-center rounded-lg border border-[var(--ws-data-table-border)] text-sm text-[var(--ws-data-table-text-soft)] hover:bg-black/5" aria-label="Next page">
<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="M9 5l7 7-7 7"/></svg>
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
tabledatapaginationpagesnavigationdashboard
Slots
| Name | Required | Description |
|---|---|---|
| content | Yes | Table with header row and data rows. |
| pagination | Yes | Pagination bar with result count and page buttons. |
Extends the base data table with a pagination bar below. Shows “Showing 1-10 of 50 results” on the left and page number buttons (1, 2, 3, …, 5) with previous/next arrows on the right. Active page uses accent color.