Data tables with sorting, pagination, and various styling options.
Basic Table with Pagination
/ 10 pages
| Actions | ID | Name | Role | Status | |
|---|---|---|---|---|---|
|
|
1 | John Doe | john.doe@example.com | Admin | Active |
|
|
2 | Jane Smith | jane.smith@example.com | User | Pending |
|
|
3 | Bob Johnson | bob.johnson@example.com | User | Active |
|
|
4 | Alice Brown | alice.brown@example.com | Moderator | Inactive |
|
|
5 | Charlie Wilson | charlie.wilson@example.com | User | Active |
/ 10 pages
Striped Table
| Product | Category | Price | Stock | Status |
|---|---|---|---|---|
| Laptop Pro | Electronics | $1,299.99 | 15 | In Stock |
| Wireless Mouse | Accessories | $29.99 | 0 | Out of Stock |
| Office Chair | Furniture | $249.99 | 8 | In Stock |
| USB Cable | Accessories | $12.99 | 3 | Low Stock |
2x Spacing Table
/ 5 pages
| Actions | Date | Transaction | Amount | Balance |
|---|---|---|---|---|
|
|
2024-01-15 | Purchase at Store ABC | -$45.67 | $1,234.56 |
|
|
2024-01-14 | Salary Deposit | +$2,500.00 | $1,280.23 |
|
|
2024-01-13 | ATM Withdrawal | -$100.00 | -$1,219.77 |
|
|
2024-01-12 | Online Transfer | -$200.00 | -$1,119.77 |
Load More Positioning
Table with Left-aligned Load More
| Product | Price | Stock | Status |
|---|---|---|---|
| MacBook Pro | $2,399 | 12 | Available |
| iPhone 15 | $999 | 0 | Out of Stock |
| iPad Air | $599 | 8 | Available |
Table with Center Load More
| Customer | Orders | Total | |
|---|---|---|---|
| John Smith | john@example.com | 23 | $4,567.89 |
| Sarah Johnson | sarah@example.com | 18 | $3,245.12 |
| Mike Davis | mike@example.com | 31 | $6,789.45 |
Table with Right Load More (Loading State)
| Invoice | Date | Amount | Status |
|---|---|---|---|
| #INV-001 | 2024-01-15 | $234.56 | Paid |
| #INV-002 | 2024-01-14 | $567.89 | Pending |
| #INV-003 | 2024-01-13 | $123.45 | Paid |
Pager Positioning Examples
Left-aligned Pager
/ 10 pages
Center-aligned Pager (Default)
/ 10 pages
Right-aligned Pager
/ 10 pages
Alternative Pager Icon Sets
Double/Single Angles (Current)
/ 10 pages
Triangular Arrows
/ 10 pages
Simple Arrows
/ 10 pages
Mathematical Double Arrows
/ 10 pages
CSS Classes Reference
Tables
pa-table-container- Scrollable table wrapper with borderpa-table- Base table classpa-table--striped- Zebra striping on rowspa-table--xs- Extra small paddingpa-table--sm- Small paddingpa-table--lg- Large paddingpa-table--xl- Extra large paddingpa-table--responsive- Stacks into cards on mobilepa-table--responsive-grid- CSS grid layout on mobile.col-auto- Auto-width column (shrinks to content)
Responsive Tables
data-label="..."- Cell label shown on mobile (on <td>)data-grid="2"- 2-column grid layout on mobile (on <tr>)data-grid="3"- 3-column grid layout on mobiledata-span="2"- Span 2 columns in grid (on <td>)data-span="full"- Span all columns in grid
Virtual Tables
pa-virtual-table- Virtual/infinite scroll table containerpa-virtual-table__header- Sticky header row (CSS grid)pa-virtual-table__header-cell- Header cellpa-virtual-table__body- Body containerpa-virtual-table__row- Data row (CSS grid)pa-virtual-table__cell- Data cell
Pager
pa-pager- Pagination container (default: centered)pa-pager--left- Left-alignedpa-pager--center- Center-alignedpa-pager--right- Right-alignedpa-pager__container- Inner wrapper (flex)pa-pager__controls- Navigation buttonspa-pager__info- Page input and textpa-pager__input- Page number inputpa-pager__text- "/ X pages" text
Load More
pa-load-more- Load more container (default: centered)pa-load-more--left- Left-alignedpa-load-more--center- Center-alignedpa-load-more--right- Right-alignedpa-load-more__button- The button elementpa-load-more__button--loading- Loading statepa-load-more__spinner- Spinner elementpa-load-more__text- Button textpa-load-more__count- Count display (e.g., "3 of 150")