DataTable
Enhanced table with a title header. Built on top of the base Table component.
Basic DataTable
DataTable adds a styled title bar above the standard Table rows.
Team Members
| Name | Role | Department | Status |
|---|---|---|---|
| Juste A. | CEO | Executive | Active |
| Claude | CTO | Engineering | Active |
| Ada L. | Lead Engineer | Engineering | Away |
Order History
Track orders with status badges showing delivery progress.
Recent Orders
| Order | Customer | Amount | Date | Status |
|---|---|---|---|---|
| #1042 | Alice M. | $129.00 | Feb 10, 2026 | Delivered |
| #1041 | Bob K. | $89.50 | Feb 9, 2026 | Shipped |
| #1040 | Carol D. | $245.00 | Feb 8, 2026 | Processing |
| #1039 | Dave R. | $67.25 | Feb 7, 2026 | Cancelled |
Without Title
Omit the title prop for a clean table without the header bar.
| Endpoint | Method | Latency | Status |
|---|---|---|---|
| /api/users | GET | 42ms | 200 |
| /api/orders | POST | 128ms | 201 |
| /api/payments | POST | 312ms | 500 |
Usage
Props
| Prop | Type | Default | Description |
|---|---|---|---|
title | text | "" | Header title displayed above the table |
children | content | - | Table rows (tr, th, td elements) |