Table Component
Data tables with rounded corners, flat ink borders, and orbit hover effects.
Sortable Table
Click on column headers to sort data. Supports ascending and descending order.
| SKU | Category | |||
|---|---|---|---|---|
| Wireless Headphones | WH-001 | \$99.99 | 45 in stock | Electronics |
| Leather Wallet | LW-002 | \$49.99 | 120 in stock | Accessories |
| Running Shoes | RS-003 | \$129.99 | Out of stock | Footwear |
| Smart Watch | SW-004 | \$299.99 | 23 in stock | Electronics |
| Backpack | BP-005 | \$79.99 | 67 in stock | Bags |
Selectable Table
Select rows using checkboxes. Bulk actions appear when items are selected.
| Name | Role | Status | Actions | ||
|---|---|---|---|---|---|
| Alex Johnson | [email protected] | Admin | Active | ||
| Sarah Williams | [email protected] | Editor | Active | ||
| Mike Chen | [email protected] | Viewer | Inactive | ||
| Emily Davis | [email protected] | Editor | Active |
Expandable Rows
Click on a row to expand and view additional details.
| Order ID | Customer | Date | Status | Total | |
|---|---|---|---|---|---|
| ORD-001 | John Doe | 2024-12-01 | Delivered | $234.50 | |
| ORD-002 | Jane Smith | 2024-12-03 | Processing | $129.99 | |
| ORD-003 | Bob Wilson | 2024-12-05 | Shipped | $379.98 |
Paginated Table
Navigate through data using pagination controls.
| Product | SKU | Price | Category |
|---|---|---|---|
| Wireless Headphones | WH-001 | \$99.99 | Electronics |
| Leather Wallet | LW-002 | \$49.99 | Accessories |
| Running Shoes | RS-003 | \$129.99 | Footwear |
Showing 1 to 3 of 5 results
Basic Table
| Invoice | Status | Method | Amount |
|---|---|---|---|
| INV001 | Paid | Credit Card | $250.00 |
| INV002 | Pending | PayPal | $150.00 |
| INV003 | Unpaid | Bank Transfer | $350.00 |
| INV004 | Paid | Credit Card | $450.00 |
| INV005 | Paid | PayPal | $550.00 |
Empty State
| Invoice | Status | Method | Amount |
|---|---|---|---|
No invoices foundYou have not created any invoices yet. Start by creating your first invoice. | |||
A friendly empty state helps users understand what to do next when there is no data.