Table
Data Display
Semantic HTML table with responsive layouts, fixed headers, striping, and hover states
Basic Usage
Name | Phone | Location |
|---|---|---|
| John Doe | +1 234 567 8900 | New York |
| Jane Smith | +1 234 567 8901 | Los Angeles |
| Mike Johnson | +1 234 567 8902 | Chicago |
Complex Cells
User | Role | Department | Age | Status |
|---|---|---|---|---|
Alice Johnson | Admin | Engineering | 28 | active |
Bob Smith | Developer | Engineering | 32 | active |
Charlie Brown | Designer | Design | 26 | inactive |
Glass Variant
Product | Units Sold | Revenue | Change |
|---|---|---|---|
| Laptop | 145 | $145,000 | +12.5% |
| Mouse | 523 | $15,690 | +8.3% |
| Keyboard | 342 | $27,360 | -5.2% |
Usage Guidelines
When to Use
- Simple data display
- Static tables
- Comparison tables
Accessibility
- Proper table semantics
- Caption for table purpose
- Column headers with scope
Performance
- Native table rendering
- CSS-only responsive behavior
Common Mistakes
- Using for layout
- Missing column headers
Frequently Asked Questions
Table is a simple semantic HTML table. DataTable has sorting, filtering, and virtualization.
Yes, Table supports striped rows and hover states.
Related Components
View allAccordion
Collapsible content sections with single/multiple expansion modes, animation, and keyboard navigation
Avatar
User avatar with image loading, fallback text generation, status indicators, and shape variants
AvatarGroup
Stacked avatar display with overflow handling, max count configuration, and hover expansion
Badge
Status indicator with variant system, dot mode, positioning, and pulsing animation support