JD
Table
A high-performance data table component with support for glassmorphism, zebra striping, and complex row content.
Preview & Interactive Laboratory
Standard Table
| Status | User | Role | Activity |
|---|---|---|---|
| active |  Alex Riveraalex@example.com | Admin | 2 mins ago |
| idle |  Sarah Chensarah@example.com | Editor | 1 hour ago |
| offline |  Jordan Smithjordan@example.com | Viewer | 5 hours ago |
| active |  Elena Rodriguezelena@example.com | Admin | Just now |
Zebra Striping & Totals
| Resource | Usage | Cost | Limit |
|---|---|---|---|
| Cloud Computing | 85% | $1,200.00 | 90% |
| Database Storage | 42% | $450.00 | 80% |
| CDN Traffic | 67% | $890.00 | 100% |
| Total Monthly Spending | $2,540.00 | ||
Complex Row Content
Project Alpha-01 Updated 2 days ago | Progress30% |     |
Project Alpha-02 Updated 2 days ago | Progress60% | |
Project Alpha-03 Updated 2 days ago | Progress90% | |
Usage & Implementation
import { Table, TableBody, TableCell, TableHeader, TableRow } from "@/components/ui/table"
<Table>
<TableHeader>
<TableRow>
<TableHead>Header</TableHead>
</TableRow>
</TableHeader>
<TableBody striped>
<TableRow>
<TableCell>Cell Data</TableCell>
</TableRow>
</TableBody>
</Table>React / Tailwind
Granular Customization
1
Container
Standard scrollable table wrapper.
className={`className`}2
Row
Interactive hover and border styles.
className={`data-state='selected'`}3
Zebra Striping
Alternating row backgrounds for better legibility.
className={`TableBody striped`}API Reference (Props)
| Prop | Type | Default | Description |
|---|---|---|---|
| striped | boolean | false | Enable alternating row colors (only on TableBody). |
| variant | 'default' | 'glass' | 'default' | The visual theme of the table. |