DataList
Examples
Data List Simple
Data List Checkboxes, Actions and Additional Cells
Data List Width Modifiers
Default fitting - example 1
- default
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
defaultLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Flex modifiers - example 2
- width 2
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.
width 4Lorem ipsum dolor sit amet.
Flex modifiers - example 3
DataList Props
The DataList component accepts the following props.
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| children | node | null | Content rendered inside the DataList list | |
| className | string | '' | Additional classes added to the DataList list | |
| aria-label | string | Adds accessible text to the DataList list |
DataListItem Props
The DataListItem component accepts the following props.
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| isExpanded | bool | false | Flag to show if the expanded content of the DataList item is visible | |
| children | node | null | Content rendered inside the DataList item | |
| className | string | '' | Additional classes added to the DataList item | |
| aria-labelledby | string | Adds accessible text to the DataList item |
DataListCell Props
The DataListCell component accepts the following props.
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| children | node | null | Content rendered inside the DataList cell | |
| className | string | '' | Additional classes added to the DataList cell | |
| width | enum: 1, 2, 3, 4, 5 | 1 | Width (from 1-5) to the DataList cell |
DataListCheck Props
The DataListCheck component accepts the following props.
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| className | string | '' | Additional classes added to the DataList item checkbox | |
| isValid | bool | true | Flag to show if the DataList checkbox selection is valid or invalid | |
| isDisabled | bool | false | Flag to show if the DataList checkbox is disabled | |
| isChecked | bool | null | Flag to show if the DataList checkbox is checked | |
| onChange | func | () => undefined | A callback for when the DataList checkbox selection changes | |
| aria-labelledby | string | Aria-labelledby of the DataList checkbox |
DataListAction Props
The DataListAction component accepts the following props.
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| children | node | null | Content rendered inside the DataList list | |
| className | string | '' | Additional classes added to the DataList list | |
| id | string | Identify the DataList toggle number | ||
| aria-labelledby | string | Adds accessible text to the DataList item | ||
| aria-label | string | Adds accessible text to the DataList item |
DataListContent Props
The DataListContent component accepts the following props.
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| children | node | Content rendered inside the DataList item | ||
| className | string | '' | Additional classes added to the DataList cell | |
| isHidden | bool | false | Flag to show if the expanded content of the DataList item is visible | |
| aria-label | string | Adds accessible text to the DataList toggle |
DataListToggle Props
The DataListToggle component accepts the following props.
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| className | string | '' | Additional classes added to the DataList cell | |
| isExpanded | bool | false | Flag to show if the expanded content of the DataList item is visible | |
| id | string | Identify the DataList toggle number | ||
| aria-labelledby | string | Adds accessible text to the DataList toggle | ||
| aria-label | string | Adds accessible text to the DataList toggle |