Table
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
Table 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 with proper text alignment. The TableHead component uses text-start to ensure headers align correctly in both LTR and RTL contexts.
LTR (English)
| Name | Status | |
|---|---|---|
| Ahmed Ali | Active | ahmed@example.com |
RTL (العربية)
| الاسم | الحالة | البريد |
|---|---|---|
| أحمد علي | نشط | ahmed@example.com |