Skip to main content
PimentCSS v1.0.1, what's new

Home

Table + pagination

Data table with selection and pagination controls.

A data screen: scrollable .table for rows, then .pagination for paging. Combines Tables and Pagination.

When to use it

  • Admin lists, CRM views, or reports with more rows than fit on one screen.
  • Row selection via checkboxes and optional bulk actions above the table (see Toolbar + modal).
  • On small viewports, the same data can collapse to card stacks (see Tables → Responsive).

Recipe

  1. Wrap the table in .table-scroll with role="region", tabindex="0", and an aria-label.
  2. Use semantic <table>, <caption class="sr-only">, and scope="col" on headers.
  3. Place nav.pagination directly under the scroll region, not inside it.
  4. Add data-table-live and data-pagination-live when using the doc reference scripts.

Live demo

Team members
Name Role Status
Alex Martin Product designer Active
Samira Chen Engineer Active

Copy markup

<section aria-labelledby="results-title">
  <h2 id="results-title" class="heading-h4">Team members</h2>
  <div class="table-scroll" role="region" tabindex="0" aria-label="Team members">
    <table class="table" data-table-live="">
      <caption class="sr-only">Team members</caption>
      <thead>…</thead>
      <tbody>…</tbody>
    </table>
  </div>
  <nav class="pagination" data-pagination-live="" aria-label="Results pagination">
    <div class="pagination__group">
      <ul class="pagination__list">…</ul>
    </div>
  </nav>
</section>

Behavior (reference)

import { wireAllTables } from './table-behavior';

document.addEventListener('DOMContentLoaded', () => wireAllTables());

// Row table: .table-scroll[aria-label] + .table[data-table-live] + tbody tr[data-table-select-row]
// Header checkbox toggles all rows; row checkbox and row click stay in sync

Tables

Cells, selection, responsive cards.

Pagination

Jumpers, numbered lists, live wiring.

All patterns

More composition recipes.