Data tables with sorting, pagination, and various styling options.
Basic Table with Pagination
/ 10 pages
| 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
| 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 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 |
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
| 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 |
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)
Table Cards
pa-table-card— Card wrapper for tablespa-table-card--primary / success / warning / danger— Color variantspa-table-card--color-1through--color-9— Theme colorspa-table-card--plain— Remove card stylingpa-table-card__header— Card headerpa-table-card__title— Title wrapperpa-table-card__actions— Header actionspa-table-card__body— Table body wrapperpa-table-card__body--scrollable— Horizontal scrollpa-table-card__footer— Footer for pagination
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")