Table
A responsive table component for displaying tabular data.
Installation
import {
Table,
TableBody,
TableCaption,
TableCell,
TableFooter,
TableHead,
TableHeader,
TableRow,
} from "@ramp-ds/ui"Usage
| Device | Status | Power |
|---|---|---|
| Marketing Site | Live | v2.4 |
Examples
Project List
| ID | Project | Status | Version | Today |
|---|---|---|---|---|
| PRJ001 | Marketing Site | Live | v2.4 | 1,482 visits |
| PRJ002 | Mobile App | Live | v1.8 | 6,210 sessions |
| PRJ003 | Admin Dashboard | Deploying | v3.1 | — |
| PRJ004 | API Gateway | Live | v0.9 | 2.1M requests |
| PRJ005 | Docs Portal | Live | — | — |
With Footer
| Date | Deploys | Requests | Errors |
|---|---|---|---|
| 2024-01-15 | 8 | 2.1M | 14 |
| 2024-01-14 | 5 | 1.8M | 21 |
| 2024-01-13 | 12 | 2.4M | 6 |
| 2024-01-12 | 3 | 1.5M | 38 |
| 2024-01-11 | 9 | 2.0M | 11 |
| Total (5 days) | 37 | 9.8M | 90 |
Simple Table
| Metric | Value |
|---|---|
| Active users | 1,284 |
| Today's sessions | 6,210 |
| This month | 186,420 |
| All-time | 12.4M |
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | - | Additional CSS classes. |
Accessibility
- Uses native HTML table elements for semantics
- TableCaption provides accessible description
- TableHead cells use proper th elements
- Supports keyboard navigation
- Scrollable container for responsive design