Accordion
Basic Accordion
Simple collapsible accordion with customizable header and content styling.
Table Row with Accordion
Interactive table rows that expand to show additional details on click.
 Mark Cameron | $129.00 | Refunded | 1 | 🇲🇽 New Mexico, MX | Subscription | ||||
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. | |||||||||
Rich Table Row with Accordion
Enhanced table rows with rich content including titles, descriptions, and formatted data.
Mark Cameron | mark.cameron@app.com | 🇬🇧 London, UK | 22/01/2021 | +249.88 | |||||
Excepteur sint occaecat cupidatat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis. Ut enim ad minim veniam quis. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. | |||||||||
Props Reference
AccordionBasic
| Prop | Type | Description |
|---|---|---|
| title | string | The title text displayed in the accordion header |
| headerClassName | string | Custom CSS classes for the accordion header |
| labelClassName | string | Custom CSS classes for the title label |
| valueClassName | string | Custom CSS classes for the accordion content area |
| children | ReactNode | The content to display inside the accordion when expanded |
AccordionTableItem
| Prop | Type | Description |
|---|---|---|
| id | string | Unique identifier for the table row |
| image | string | URL of the customer image |
| customer | string | Customer name |
| total | string | Total amount |
| status | string | Order status |
| items | string | Number of items |
| location | string | Customer location |
| type | string | Order type |
| description | string | Detailed description shown when expanded |