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 Start-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
Start-aligned Pager
/ 10 pages
Center-aligned Pager (Default)
/ 10 pages
End-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
Panel Tables
Tables with card-like visual containment using the --panel modifier. Use when tables need to stand alongside cards without being wrapped in one.
Basic Panel Table (no header)
| Product | SKU | Price | Stock |
|---|---|---|---|
| Wireless Keyboard | WK-2024 | $79.99 | 45 |
| USB-C Hub | HUB-7P | $49.99 | 120 |
| Monitor Stand | MS-ADJ | $129.99 | 28 |
Panel Table with Header
Recent Orders
| Order ID | Customer | Date | Total | Status |
|---|---|---|---|---|
| #ORD-1001 | Alice Johnson | 2024-01-28 | $234.50 | Shipped |
| #ORD-1002 | Bob Williams | 2024-01-27 | $89.00 | Processing |
| #ORD-1003 | Carol Davis | 2024-01-27 | $567.25 | Delivered |
| #ORD-1004 | David Miller | 2024-01-26 | $145.00 | Cancelled |
Panel Tables in Grid (75/25 split)
Panel tables work inside pa-row/pa-col grid just like cards.
Activity Log (75%)
| Time | User | Action |
|---|---|---|
| 10:45 AM | admin | Updated product pricing |
| 10:32 AM | john.doe | Created new order #1005 |
| 10:15 AM | admin | Approved refund request |
Stats (25%)
| Metric | Value |
|---|---|
| Orders | 156 |
| Revenue | $12.4k |
| Refunds | 3 |
Table Cards
The pa-table-card component is a card specifically designed for tables. It includes header, body (for the table), footer, and color variants like regular cards.
Basic Table Card with Actions
Recent Orders
| Order ID | Customer | Date | Amount | Status |
|---|---|---|---|---|
| #1001 | John Smith | 2024-01-28 | $250.00 | Completed |
| #1002 | Jane Doe | 2024-01-27 | $180.00 | Pending |
| #1003 | Bob Wilson | 2024-01-26 | $320.00 | Completed |
Color Variants
Table cards support the same color variants as regular cards: --primary, --success, --warning, --danger, and theme colors --color-1 through --color-9.
Primary Table Card
| User | Role | Status |
|---|---|---|
| Alice | Admin | Active |
| Bob | Editor | Active |
Success Table Card
| Task | Completed |
|---|---|
| Database backup | 10:00 AM |
| Cache cleared | 10:15 AM |
Warning Table Card
| Alert | Time |
|---|---|
| High CPU usage | 2 min ago |
| Low disk space | 5 min ago |
Danger Table Card
| Error | Count |
|---|---|
| Connection timeout | 23 |
| Auth failure | 7 |
Table Card with Web Grid
The pa-table-card also works with the web-grid component. The grid automatically inherits Pure Admin theming via CSS variables.
Employee Directory
Plain Table Cards
Use pa-table-card--plain to remove the card visual styling (border, shadow, background) while keeping grid behavior. Tables work side by side with proper gaps.
Sales by Region
| Region | Q1 | Q2 | Q3 |
|---|---|---|---|
| North | $45,000 | $52,000 | $48,000 |
| South | $38,000 | $41,000 | $44,000 |
| East | $62,000 | $58,000 | $65,000 |
Top Products
| Product | Units | Revenue |
|---|---|---|
| Widget Pro | 1,245 | $124,500 |
| Gadget Plus | 892 | $89,200 |
| Tool Master | 567 | $56,700 |
Bordered Table
| Item | Quantity | Price | Total |
|---|---|---|---|
| Widget A | 10 | $25.00 | $250.00 |
| Widget B | 5 | $45.00 | $225.00 |
| Widget C | 8 | $30.00 | $240.00 |
Bordered + Striped
| Department | Employees | Budget |
|---|---|---|
| Engineering | 45 | $2.5M |
| Marketing | 22 | $1.2M |
| Sales | 38 | $1.8M |
| HR | 12 | $0.6M |
Plain Table with Pagers
Showing 1-10 of 156
| ID | Customer | Order Date | Status | Total |
|---|---|---|---|---|
| #1001 | John Smith | 2026-01-15 | Completed | $245.00 |
| #1002 | Jane Doe | 2026-01-16 | Pending | $189.50 |
| #1003 | Bob Wilson | 2026-01-17 | Completed | $312.75 |
| #1004 | Alice Brown | 2026-01-18 | Cancelled | $78.00 |
| #1005 | Charlie Davis | 2026-01-19 | Completed | $456.25 |
Plain Table Card with Web Grid
Real-World Example: Order Detail Layout
Cards and panel tables side by side - all with consistent visual treatment.
Customer Information
Name
John Smith
Email
john.smith@example.com
Phone
+1 (555) 123-4567
Customer Since
March 2021
Delivery Details
Address
123 Main Street, Apt 4B
City
New York, NY 10001
Delivery Method
Express Shipping
Est. Delivery
Jan 30, 2024
Order Items
| Product | SKU | Qty | Unit Price | Total |
|---|---|---|---|---|
| Wireless Bluetooth Headphones | WBH-PRO-BK | 1 | $149.99 | $149.99 |
| USB-C Charging Cable (2m) | USB-C-2M | 2 | $19.99 | $39.98 |
| Carrying Case | CASE-HP-01 | 1 | $29.99 | $29.99 |
| Subtotal | $219.96 | |||
| Shipping | $12.99 | |||
| Tax | $18.70 | |||
| Total | $251.65 | |||
CSS Classes Reference
Tables
pa-table-container- Scrollable table wrapper with borderpa-table-container--panel- Card-like containment with shadow and marginpa-table-container__header- Header row for panel tablespa-table-container__title- Title text in headerpa-table-container__actions- Actions container in headerpa-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--start- Start-alignedpa-pager--center- Center-alignedpa-pager--end- End-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--start- Start-alignedpa-load-more--center- Center-alignedpa-load-more--end- End-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")