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&ndash;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)]">&hellip;</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

Family
data-table
Tier
enhanced
Kind
section
Extends
data-table/base
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.