Comprehensive examples of the data table component with various use cases.
A simple table displaying product information.
| Product Name | Category | Price | Stock | Status |
|---|---|---|---|---|
| Wireless Headphones | Electronics | $199.99 | 45 | Active |
| Laptop Stand | Accessories | $49.99 | 120 | Active |
| Mechanical Keyboard | Electronics | $129.99 | 0 | Inactive |
| USB-C Cable | Accessories | $19.99 | 200 | Active |
| Monitor Stand | Accessories | $79.99 | 30 | Pending |
Table with footer showing summary information.
| Order ID | Customer | Product | Quantity | Total | Date |
|---|---|---|---|---|---|
| ORD-001 | John Doe | Wireless Headphones | 2 | $399.98 | 2024-01-15 |
| ORD-002 | Jane Smith | Laptop Stand | 1 | $49.99 | 2024-01-14 |
| ORD-003 | Bob Johnson | Mechanical Keyboard | 1 | $129.99 | 2024-01-13 |
| ORD-004 | Alice Williams | USB-C Cable | 5 | $99.95 | 2024-01-12 |
| Total Revenue: | $679.91 | ||||
Table with a caption providing context about the data.
| Name | Role | Last Active | Status | |
|---|---|---|---|---|
| John Doe | john@example.com | Admin | 2 hours ago | Online |
| Jane Smith | jane@example.com | User | 1 day ago | Offline |
| Bob Johnson | bob@example.com | Editor | 30 mins ago | Online |
| Alice Williams | alice@example.com | User | 3 days ago | Away |
Table with checkbox selection and row interaction.
0 of 5 products selected
| Product Name | Category | Price | Stock | Status | |
|---|---|---|---|---|---|
| Wireless Headphones | Electronics | $199.99 | 45 | Active | |
| Laptop Stand | Accessories | $49.99 | 120 | Active | |
| Mechanical Keyboard | Electronics | $129.99 | 0 | Inactive | |
| USB-C Cable | Accessories | $19.99 | 200 | Active | |
| Monitor Stand | Accessories | $79.99 | 30 | Pending |
Table with sortable columns. Click column headers to sort.
| Status | ||||
|---|---|---|---|---|
| Wireless Headphones | Electronics | $199.99 | 45 | Active |
| Laptop Stand | Accessories | $49.99 | 120 | Active |
| Mechanical Keyboard | Electronics | $129.99 | 0 | Inactive |
| USB-C Cable | Accessories | $19.99 | 200 | Active |
| Monitor Stand | Accessories | $79.99 | 30 | Pending |
Table showing empty state when no data is available.
| Product Name | Category | Price | Stock | Status |
|---|---|---|---|---|
| No products found | ||||
Table with reduced padding for dense data display.
| ID | Name | Role | |
|---|---|---|---|
| 1 | John Doe | john@example.com | Admin |
| 2 | Jane Smith | jane@example.com | User |
| 3 | Bob Johnson | bob@example.com | Editor |
| 4 | Alice Williams | alice@example.com | User |