A responsive table component for displaying structured data with full RTL support. Uses semantic HTML with proper text alignment for bidirectional content.
Preview
| Name | Status | Role | |
|---|---|---|---|
| Ahmed Ali | ahmed@example.com | Active | Admin |
| Fatima Hassan | fatima@example.com | Active | User |
| Mohammed Youssef | mohammed@example.com | Inactive | User |
| Sarah Abdullah | sarah@example.com | Active | Editor |
Installation
Usage
Composition Pattern
The Table component follows a composition pattern with seven sub-components:
- •
Table- Main wrapper with overflow handling - •
TableHeader- thead element for column headers - •
TableBody- tbody element for data rows - •
TableFooter- tfoot element for summary rows - •
TableRow- tr element with hover effects - •
TableHead- th element with text-start for RTL - •
TableCell- td element for data cells - •
TableCaption- caption element for table description
Examples
With Caption
| Invoice | Status | Method | Amount |
|---|---|---|---|
| INV-001 | Paid | Credit Card | $250.00 |
| INV-002 | Pending | PayPal | $150.00 |
| INV-003 | Paid | Bank Transfer | $350.00 |
Interactive Table with Checkboxes
| Name | Role | ||
|---|---|---|---|
| Ahmed Ali | ahmed@example.com | Admin | |
| Fatima Hassan | fatima@example.com | User | |
| Mohammed Youssef | mohammed@example.com | User | |
| Sarah Abdullah | sarah@example.com | Editor |
Mobile Responsive Table
This table adapts to mobile screens by showing a 2-column layout (label + value) instead of horizontal scrolling. Resize your browser to see it in action.
| Ahmed Ali | ahmed@example.com | Active | Admin |
| Fatima Hassan | fatima@example.com | Active | User |
| Mohammed Youssef | mohammed@example.com | Inactive | User |
| Sarah Abdullah | sarah@example.com | Active | Editor |
Props
Table
| Name | Type | Default | Description |
|---|---|---|---|
className | string | undefined | Additional CSS classes to apply |
TableHeader
| Name | Type | Default | Description |
|---|---|---|---|
className | string | undefined | Additional CSS classes to apply to thead |
TableBody
| Name | Type | Default | Description |
|---|---|---|---|
className | string | undefined | Additional CSS classes to apply to tbody |
TableRow
| Name | Type | Default | Description |
|---|---|---|---|
className | string | undefined | Additional CSS classes to apply to tr |
TableHead
| Name | Type | Default | Description |
|---|---|---|---|
className | string | undefined | Additional CSS classes to apply to th (uses text-start for RTL support) |
TableCell
| Name | Type | Default | Description |
|---|---|---|---|
className | string | undefined | Additional CSS classes to apply to td |
TableCaption
| Name | Type | Default | Description |
|---|---|---|---|
className | string | undefined | Additional CSS classes to apply to caption |
Accessibility
Semantic HTML
Uses proper semantic table elements (table, thead, tbody, tfoot, th, td) for screen reader compatibility and accessibility.
Table Caption
Always include a TableCaption to describe the table's purpose for screen reader users. The caption can be visually hidden if needed while remaining accessible.
Column Headers
TableHead components render as th elements, which are automatically associated with their column's cells by assistive technologies.
Keyboard Navigation
For interactive tables, ensure all interactive elements (buttons, checkboxes) are keyboard accessible with proper tab order and focus indicators.
RTL Considerations
Tables automatically support RTL layout. All text alignment uses text-start which adapts to the text direction automatically.
LTR (English)
| Name | Status | |
|---|---|---|
| Ahmed Ali | Active | ahmed@example.com |
RTL (العربية)
| الاسم | الحالة | البريد الإلكتروني |
|---|---|---|
| أحمد علي | نشط | ahmed@example.com |
Use Cases
Data listings and records
Comparison tables
Settings and configuration grids
Pricing and feature comparison
Best Practices
Do
- ✓ Use sticky headers for long scrollable tables
- ✓ Right-align numeric columns for easy scanning
- ✓ Provide responsive behavior (horizontal scroll or card view)
Don't
- ✗ Don't use for layout purposes — use CSS Grid/Flex
- ✗ Don't hide important columns on mobile without indication
- ✗ Don't use tables for fewer than 3 rows of data