Table
Demo
| ID | NAME | DESCRIPTION LONG TEXT | STATUS |
|---|---|---|---|
| 1 | Alo | Alo description | active |
| 2 | Cite | Cite description | active |
| 3 | Mars | Mars description | active |
| 4 | Alocite | Alocite description with long long long long text | active |
Props
| Prop | Type | Description |
|---|---|---|
caption | React.ReactNode (optional) | The caption or title of the table, for context or accessibility. |
rows | Record<string, unknown>[] | An array of data objects where each object represents a row in the table. |
columns | Record<string, string> | An object mapping column keys to their display names. |
classNames | Object (detailed below) (optional) | Custom class names for different parts of the Table. |
Styles
Property classNames contains customized class names.
| Property | Description | Type/Values |
|---|---|---|
| root? | Class for the main table component. | string |
| caption? | Class for the table caption. | string |
| header? | Class for the table header section. | string |
| body? | Class for the table body section. | string |
| row? | Class for individual rows within the table. | string |
| heads? | Object that defines class names for specific column headers. | Record<string, string> |
| cells? | Object that defines class names for specific cells in rows. | Record<string, string> |
Functionality
- The Table component is ideal for displaying data sets in a clear, organized manner.
- Supports dynamic content, allowing for varied table sizes and data.
- Enhances the presentation of information, suitable for reports, analytics, or data comparison.