Table
A responsive table component with selection, tags, status indicators, links, and action buttons.
Installation
pnpm dlx shadcn@latest add https://dga-registry.vercel.app/r/table.jsonData Table
Full-featured data table with checkbox selection, badge tags, status indicators, link columns, and row actions.
| Header | Header | Header | Header | Header | Header | Header | ||
|---|---|---|---|---|---|---|---|---|
| Ahmed Al-Farsi | Digital Transformation | Riyadh | REF-1000 | Finance | Active | 12.5K SAR | ||
| Sara Al-Dosari | Data Governance | Jeddah | REF-1001 | HR | Inactive | 24.5K SAR | ||
| Mohammed Al-Qahtani | Compliance | Dammam | REF-1002 | Legal | Pending | 36.5K SAR | ||
| Fatima Al-Harbi | Technology | Makkah | REF-1003 | IT | Completed | 48.5K SAR | ||
| Khalid Al-Ghamdi | Strategy | Madinah | REF-1004 | Operations | Active | 60.5K SAR | ||
| Nora Al-Shehri | Innovation | Tabuk | REF-1005 | Finance | Inactive | 72.5K SAR | ||
| Abdullah Al-Otaibi | Digital Transformation | Riyadh | REF-1006 | HR | Pending | 84.5K SAR | ||
| Maha Al-Zahrani | Data Governance | Jeddah | REF-1007 | Legal | Completed | 96.5K SAR | ||
| Omar Al-Rashidi | Compliance | Dammam | REF-1008 | IT | Active | 108.5K SAR | ||
| Layla Al-Mutairi | Technology | Makkah | REF-1009 | Operations | Inactive | 120.5K SAR | ||
| Youssef Al-Enazi | Strategy | Madinah | REF-1010 | Finance | Pending | 132.5K SAR | ||
| Huda Al-Tamimi | Innovation | Tabuk | REF-1011 | HR | Completed | 144.5K SAR | ||
| Faisal Al-Subaie | Digital Transformation | Riyadh | REF-1012 | Legal | Active | 156.5K SAR | ||
| Reem Al-Khaldi | Data Governance | Jeddah | REF-1013 | IT | Inactive | 168.5K SAR | ||
| Sultan Al-Ajmi | Compliance | Dammam | REF-1014 | Operations | Pending | 180.5K SAR | ||
| Dina Al-Shamrani | Technology | Makkah | REF-1015 | Finance | Completed | 192.5K SAR | ||
| Hassan Al-Bloushi | Strategy | Madinah | REF-1016 | HR | Active | 204.5K SAR | ||
| Nouf Al-Dawsari | Innovation | Tabuk | REF-1017 | Legal | Inactive | 216.5K SAR |
RCRC Table — LTR
Full-featured data table matching the RCRC Main Design File component (LTR layout).
| Header | Header | Header | Header | Header | Header | Header | ||
|---|---|---|---|---|---|---|---|---|
| Link | Cell | Cell | Cell | Tag | Status | Cell | ||
| Link | Cell | Cell | Cell | Tag | Status | Cell | ||
| Link | Cell | Cell | Cell | Tag | Status | Cell | ||
| Link | Cell | Cell | Cell | Tag | Status | Cell |
RCRC Table — RTL
Same table with Arabic layout — column order and alignment reverse automatically.
| عنوان العمود | عنوان العمود | عنوان العمود | عنوان العمود | عنوان العمود | عنوان العمود | عنوان العمود | ||
|---|---|---|---|---|---|---|---|---|
| خلية | حالة | وسم | خلية | خلية | خلية | رابط | ||
| خلية | حالة | وسم | خلية | خلية | خلية | رابط | ||
| خلية | حالة | وسم | خلية | خلية | خلية | رابط | ||
| خلية | حالة | وسم | خلية | خلية | خلية | رابط |
Simple Table
A minimal table with caption, header, body, and footer sections.
| Invoice | Status | Method | Amount |
|---|---|---|---|
| INV-0001 | Paid | Bank Transfer | 12,500.00 SAR |
| INV-0002 | Pending | Credit Card | 3,200.00 SAR |
| INV-0003 | Overdue | SADAD | 8,750.00 SAR |
| INV-0004 | Paid | Bank Transfer | 1,100.00 SAR |
| INV-0005 | Paid | Credit Card | 22,000.00 SAR |
| Total | 47,550.00 SAR | ||
RTL Table Preview
Arabic data table with right-to-left text direction.
| عنوان العمود | عنوان العمود | عنوان العمود | المبلغ |
|---|---|---|---|
| أحمد الفارسي | التحول الرقمي | REF-1001 | ١٢,٥٠٠ ر.س |
| سارة الدوسري | حوكمة البيانات | REF-1002 | ٣,٢٠٠ ر.س |
| محمد القحطاني | الامتثال | REF-1003 | ٨,٧٥٠ ر.س |
| فاطمة الحربي | التقنية | REF-1004 | ١,١٠٠ ر.س |
Sub-components
| Component | Description |
|---|---|
Table | Root <table> wrapper. |
TableHeader | <thead> element. |
TableBody | <tbody> element. |
TableFooter | <tfoot> element. |
TableHead | <th> header cell. |
TableRow | <tr> row element. Supports data-state="selected". |
TableCell | <td> cell element. |
TableCaption | <caption> element. |
Props
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | — | Additional CSS classes |
data-state | "selected" | — | Applied to TableRow for selected styling |