Component
Table
Data table with sort and pagination.
Preview
| Name | Status | Date |
|---|---|---|
| Maria Santos | Confirmed | Feb 25, 2026 |
| John Doe | Pending | Feb 26, 2026 |
Examples
Default
Plain header row and data cells.
| Name | Status | Date |
|---|---|---|
| Maria Santos | Confirmed | Feb 25, 2026 |
| John Doe | Pending | Feb 26, 2026 |
With sort
Sortable column control (Name) with aria-sort.
| Status | Date | |
|---|---|---|
| Maria Santos | Confirmed | Feb 25, 2026 |
| John Doe | Pending | Feb 26, 2026 |
AI Prompt
Ready to copy and paste into any AI model.
7 lines
prompt.txt
Build a shadcn/ui **Table** component for the **Clinic Admin** design system.
**Brand tokens:** Primary #70C4CA (teal), secondary #F3F4F6, destructive #F7A9AA, border #C4D0DB, radius 10px (default). Font: Nunito Sans for body, Nunito for headings.
**Design preview:** Replicate exactly the UI shown in the Clinic Admin docs preview for this component (same labels, structure, variants, and layout).
Return a React component with TypeScript. Use shadcn/ui **Table** as base, cn() + Tailwind CSS. Support variants and sizes shown in the preview.Copy once, paste anywhere, keep consistent output.