Skip to main content
Quick Start

Athena UI

Pagination

Pagination controls for tables and collections.

New Page
Interactive

Changing Page Content

Use the pagination controls to swap the visible records without leaving the page.

Page 1 of 3
Pagination demo records
RecordOwnerStatus
Northstar LabsRina ParkHealthy
Orbital HealthMarco SilvaReview
Civic CloudAisha KhanAt Risk
Best Practice

Pagination Rules

  • Use a labelled nav landmark for pagination controls.
  • Mark the current page with aria-current="page".
  • Keep previous and next labels visible on dense admin pages.
Compact

Small Pagination

Use compact pagination inside narrow cards, but preserve hit targets and labels where possible.

Limits

Security And Accessibility Note

Client-side pagination is only a demo. Server-backed pagination must validate page parameters, enforce authorisation, and avoid leaking hidden records. Manual keyboard, screen reader, contrast, zoom, and target-size testing are still required for a WCAG 2.2 claim.

HTML
<section class="row g-4">
      <div class="col-xl-8">
        <article class="athena-card p-4 h-100" data-athena-pagination-demo>
          <div class="d-flex flex-wrap justify-content-between align-items-center gap-3 mb-3">
            <div>
              <span class="badge text-bg-primary mb-3">Interactive</span>
              <h2 class="h4 mb-1">Changing Page Content</h2>
              <p class="text-secondary mb-0">Use the pagination controls to swap the visible records without leaving the page.</p>
            </div>
            <span class="badge text-bg-info" data-athena-pagination-status aria-live="polite">Page 1 of 3</span>
          </div>
          <div class="table-responsive">
            <table class="table align-middle">
              <caption>Pagination demo records</caption>
              <thead>
                <tr><th scope="col">Record</th><th scope="col">Owner</th><th scope="col">Status</th></tr>
              </thead>
              <tbody data-athena-pagination-content>
                <tr><th scope="row">Northstar Labs</th><td>Rina Park</td><td><span class="badge text-bg-success">Healthy</span></td></tr>
                <tr><th scope="row">Orbital Health</th><td>Marco Silva</td><td><span class="badge text-bg-warning">Review</span></td></tr>
                <tr><th scope="row">Civic Cloud</th><td>Aisha Khan</td><td><span class="badge text-bg-danger">At Risk</span></td></tr>
              </tbody>
            </table>
          </div>
          <nav aria-label="Demo pagination">
            <ul class="pagination flex-wrap mb-0">
              <li class="page-item disabled"><button class="page-link" type="button" data-athena-page-prev>Previous</button></li>
              <li class="page-item active"><button class="page-link" type="button" data-athena-page="1" aria-current="page">1</button></li>
              <li class="page-item"><button class="page-link" type="button" data-athena-page="2">2</button></li>
              <li class="page-item"><button class="page-link" type="button" data-athena-page="3">3</button></li>
              <li class="page-item"><button class="page-link" type="button" data-athena-page-next>Next</button></li>
            </ul>
          </nav>
        </article>
      </div>
      <div class="col-xl-4">
        <article class="athena-card p-4 h-100">
          <span class="badge text-bg-success mb-3">Best Practice</span>
          <h2 class="h5">Pagination Rules</h2>
          <ul class="athena-check-list mb-0">
            <li><i class="bi bi-check2" aria-hidden="true"></i><span>Use a labelled <code>nav</code> landmark for pagination controls.</span></li>
            <li><i class="bi bi-check2" aria-hidden="true"></i><span>Mark the current page with <code>aria-current="page"</code>.</span></li>
            <li><i class="bi bi-check2" aria-hidden="true"></i><span>Keep previous and next labels visible on dense admin pages.</span></li>
          </ul>
        </article>
      </div>
      <div class="col-lg-6">
        <article class="athena-card p-4 h-100">
          <span class="badge text-bg-info mb-3">Compact</span>
          <h2 class="h5">Small Pagination</h2>
          <p class="text-secondary">Use compact pagination inside narrow cards, but preserve hit targets and labels where possible.</p>
          <nav aria-label="Compact example pagination">
            <ul class="pagination pagination-sm flex-wrap mb-0">
              <li class="page-item disabled"><span class="page-link">Previous</span></li>
              <li class="page-item active"><span class="page-link" aria-current="page">1</span></li>
              <li class="page-item"><a class="page-link" href="../components/pagination.html">2</a></li>
              <li class="page-item"><a class="page-link" href="../components/pagination.html">3</a></li>
              <li class="page-item"><a class="page-link" href="../components/pagination.html">Next</a></li>
            </ul>
          </nav>
        </article>
      </div>
      <div class="col-lg-6">
        <article class="athena-card p-4 h-100">
          <span class="badge text-bg-secondary mb-3">Limits</span>
          <h2 class="h5">Security And Accessibility Note</h2>
          <p class="text-secondary mb-0">Client-side pagination is only a demo. Server-backed pagination must validate page parameters, enforce authorisation, and avoid leaking hidden records. Manual keyboard, screen reader, contrast, zoom, and target-size testing are still required for a WCAG 2.2 claim.</p>
        </article>
      </div>
    </section>