package.docs.components.DataList.examples.DataList.md Maven / Gradle / Ivy
Go to download
Show more of this group Show more artifacts with this name
Show all versions of patternfly Show documentation
Show all versions of patternfly Show documentation
Assets, source, tooling, and content for PatternFly 4
The newest version!
---
id: Data list
section: components
cssPrefix: pf-v6-c-data-list
---## Examples
### Basic
```html
-
Primary content
Secondary content
-
Secondary content (pf-m-no-fill)
Secondary content (pf-m-align-right pf-m-no-fill)
```
### Accessibility
| Attribute | Applied to | Outcome |
| -- | -- | -- |
| `role="list"` | `.pf-v6-c-data-list` | Indicates that the data list is a list. **Required** |
| `aria-label` | `.pf-v6-c-data-list` | Provides an accessible name for the data list. **Required** |
| `aria-labelledby` | `.pf-v6-c-data-list__item` | Provides an accessible description for data list item. **Required** |
| `id` | `.pf-v6-c-data-list__cell`, `.pf-v6-c-data-list__cell *` | Provides a reference for data list item description. **Required** |
### Usage
| Class | Applied to | Outcome |
| -- | -- | -- |
| `.pf-v6-c-data-list` | `` | Initiates a data list. **Required** |
| `.pf-v6-c-data-list__item` | `- ` | Initiates a data list item. **Required** |
| `.pf-v6-c-data-list__item-row` | `` | Initiates a data list item row. **Required** |
| `.pf-v6-c-data-list__item-content` | `` | Initiates a container for data list content. **Required**|
| `.pf-v6-c-data-list__cell` | `*` | Initiates a data list content cell. **Required** |
| `.pf-v6-c-data-list__cell-text` | `` | Initiates a data list content cell text element. |
| `.pf-m-align-left` | `.pf-v6-c-data-list__cell` | Modifies a data list cell to not grow and align-left when its the first data-list\_\_cell element. |
| `.pf-m-no-fill` | `.pf-v6-c-data-list__cell` | Modifies a data list cell to not fill the available horizontal space. |
| `.pf-m-align-right` | `.pf-v6-c-data-list__cell` | Modifies a data list cell to align-right. |
### With headings
```html
-
Primary content
Secondary content
-
Secondary content (pf-m-no-fill)
Secondary content (pf-m-align-right pf-m-no-fill)
```
### Usage
When a list item includes more than one block of content, it can be difficult for some screen reader users to discern where one list item ends and the next one begins. A simple way to provide better separation of list items is to define the primary content section as a heading. Headings are useful for indicating a new section of contents, but also provide an easy way for screen reader users to navigate to specific sections on the page. The heading level should be based on the context in which the DataList component is being used. For example, if the heading for the section that contains the DataList is a level 3, then `h4` elements should be used in the DataList list items.
### Checkboxes, actions, and additional cells
```html
-
Primary content Dolor sit amet, consectetur adipisicing elit, sed do eiusmod.
Secondary content. Dolor sit amet, consectetur adipisicing elit, sed do eiusmod.
Tertiary Content Dolor sit amet, consectetur adipisicing elit, sed do eiusmod.
More Content Dolor sit amet, consectetur adipisicing elit, sed do eiusmod.
More Content Dolor sit amet, consectetur adipisicing elit, sed do eiusmod.
-
Primary content - lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.
Secondary content. Dolor sit amet, consectetur adipisicing elit, sed do eiusmod.
-
Primary content - lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.
Secondary content. Dolor sit amet, consectetur adipisicing elit, sed do eiusmod.
```
### Accessibility
| Attribute | Applied to | Outcome |
| -- | -- | -- |
| `aria-label="[descriptive text]"` | `.pf-v6-c-data-list__action` > `.pf-v6-c-button` | Provides an accessible label buttons. **Required** |
| `aria-labelledby="{title_cell_id}"` | `.pf-v6-c-data-list__check` > `.pf-v6-c-check__input` | Creates an accessible label for the checkbox based on the title cell. **Required** |
| `aria-labelledby="{title_cell_id} {data_list_action_id}"` | `.pf-v6-c-data-list__action` > `.pf-v6-c-button` | Creates an accessible label for the action button using the title cell and button label **Required** |
| `id` | `.pf-v6-c-data-list__cell > *`, `.pf-v6-c-data-list__check` > `.pf-v6-c-check__input`, `.pf-v6-c-data-list__action` > `.pf-v6-c-button` | Provides a reference for interactive elements. **Required** |
### Usage
| Class | Applied to | Outcome |
| -- | -- | -- |
| `.pf-v6-c-data-list__item-control` | `` | Initiates a container for data list controls. For example, add `.pf-v6-c-data-list__check` here. **Required** |
| `.pf-v6-c-data-list__item-action` | `` | Initiates a container for the data list actions. For example, add `.pf-v6-c-data-list__action` here. **Required** |
| `.pf-v6-c-data-list__check` | `` | Initiates a data list check cell. **Required** |
| `.pf-v6-c-data-list__action` | `` | Initiates a data list action button cell. **Required** |
| `.pf-m-hidden{-on-[breakpoint]}` | `.pf-v6-c-data-list__item-action` | Hides an actions container at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes), or hides it at all breakpoints with `.pf-m-hidden`. |
| `.pf-m-visible{-on-[breakpoint]}` | `.pf-v6-c-data-list__item-action` | Shows an actions container at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
### Expandable
```html
-
Secondary content
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
```
### Expandable compact
```html
-
Secondary content
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
```
### Expandable nested
```html
-
Secondary content
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
```
### Compact
```html
-
Primary content Dolor sit amet, consectetur adipisicing elit, sed do eiusmod.
Secondary content. Dolor sit amet, consectetur adipisicing elit, sed do eiusmod.
Tertiary Content Dolor sit amet, consectetur adipisicing elit, sed do eiusmod.
More Content Dolor sit amet, consectetur adipisicing elit, sed do eiusmod.
More Content Dolor sit amet, consectetur adipisicing elit, sed do eiusmod.
-
Primary content - lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.
Secondary content. Dolor sit amet, consectetur adipisicing elit, sed do eiusmod.
-
Primary content - lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.
Secondary content. Dolor sit amet, consectetur adipisicing elit, sed do eiusmod.
```
### Accessibility
| Attribute | Applied to | Outcome |
| -- | -- | -- |
| `aria-expanded="true"` | `.pf-v6-c-data-list__toggle` > `.pf-v6-c-button` | Indicates that the expandable content is visible. **Required**|
| `hidden` | `.pf-v6-c-data-list__expandable-content` | Indicates that the expandable content is hidden. **Required**|
| `aria-label="[descriptive text]"` | `.pf-v6-c-data-list__toggle` > `.pf-v6-c-button` | Provides an accessible name for toggle button. **Required**|
| `aria-labelledby="{title_cell_id} {button_id}"` | `.pf-v6-c-data-list__toggle` > `.pf-v6-c-button` | Establishes relationship between aria-label text and toggle button. **Required**
| `id="{button_id}"` | `.pf-v6-c-data-list__toggle` > `.pf-v6-c-button` | Provides a reference for toggle button description. **Required** |
| `aria-controls="[id of element controlled]"` | `.pf-v6-c-data-list__toggle` > `.pf-v6-c-button` | Identifies the section controlled by the toggle button. **Required** |
### Usage
| Class | Applied to | Outcome |
| -- | -- | -- |
| `.pf-v6-c-data-list__item-control` | `` | Initiates a container for data list controls. For example, add `.pf-v6-c-data-list__toggle` here. **Required** |
| `.pf-v6-c-data-list__toggle` | `` | Initiates a toggle button. |
| `.pf-v6-c-data-list__toggle-icon` | `` | Initiates a toggle icon. |
| `.pf-v6-c-data-list__expandable-content` | `` | Initiates an expandable content container. |
| `.pf-v6-c-data-list__expandable-content-body` | `` | Initiates an expandable content container body. **Required** when `.pf-v6-c-data-list__expandable-content` is used. |
| `.pf-m-expanded` | `.pf-v6-c-data-list__item` | Modifies for expanded state. |
| `.pf-m-compact` | `.pf-v6-c-data-list` | Modifies for compact variation. |
| `.pf-m-no-padding` | `.pf-v6-c-data-list__expandable-content-body` | Removes padding for the expandable content body. |
| `.pf-m-icon` | `.pf-v6-c-data-list__cell` | Modifies a data list cell to not grow and align-left when its the first data-list\_\_cell element. |
### Modifiers
```html
Default fitting - example 1
-
default
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
default
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Flex modifiers - example 2
-
.pf-m-flex-2
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.
.pf-m-flex-4
Lorem ipsum dolor sit amet.
Flex modifiers - example 3
```
### Accessibility
| Attribute | Applied to | Outcome |
| -- | -- | -- |
| `aria-controls="[id of element controlled]"` | `.pf-v6-c-data-list__toggle` > `.pf-v6-c-button` | Identifies the section controlled by the toggle button. **Required** |
### Usage
| Class | Applied to | Outcome |
| -- | -- | -- |
| `.pf-m-flex-{1, 2, 3, 4, 5}` | `.pf-v6-c-data-list__cell` | Percentage based modifier for `.pf-v6-c-data-list__cell` widths. |
### Clickable rows
```html
-
Primary content (clicked)
-
Secondary content
-
Tertiary content
```
### Accessibility
| Attribute | Applied to | Outcome |
| -- | -- | -- |
| `tabindex="0"` | `.pf-v6-c-data-list__item.pf-m-clickable` | Inserts the clickable row into the tab order of the page so that it is focusable. **Required** |
### Usage
| Class | Applied to | Outcome |
| -- | -- | -- |
| `.pf-m-clickable` | `.pf-v6-c-data-list__item` | Modifies a data list item so that it is clickable. |
| `.pf-m-selected` | `.pf-v6-c-data-list__item` | Modifies a data list item for the selected state. |
### Clickable expandable rows
```html
-
Secondary content
-
Quaternary content
```
### Draggable
```html
Activate the reorder button and use the arrow keys to reorder the list or use your mouse to drag/reorder. Press escape to cancel the reordering.
-
Draggable icon disabled
-
List item
-
Ghost row
-
List item
This is the aria-live section that provides real-time feedback to the user.
```
### Accessibility
| Attribute | Applied to | Outcome |
| -- | -- | -- |
| `aria-pressed="true or false"` | `.pf-v6-c-data-list__item-draggable-button` | Indicates that the button is a toggle. When set to "true", `pf-m-active` should also be set so that the button displays in an active state. |
| `aria-live` | `[element with live text]` | Gives screen reader users live feedback about what's happening during interaction with the data list, both during drag and drop interactions and keyboard interactions. **Highly Recommended** |
| `aria-describedby="[id value of applicable content]"` | `.pf-v6-c-data-list__item-draggable-button` | Gives the draggable button an accessible description by referring to the textual content that describes how to use the button to drag elements. The example here uses a ``. **Highly recommended** |
| `aria-labelledby="[id value of .pf-v6-c-data-list__item-draggable-button] [id value of .pf-v6-c-data-list__cell-text]"` | `.pf-v6-c-data-list__item-draggable-button` | Provides an accessible name for the draggable button. |
| `id="[]"` | `.pf-v6-c-data-list__item-draggable-button`, `.pf-v6-c-data-list__cell-text` | Gives the button and the text element accessible IDs |
### Usage
| Class | Applied to | Outcome |
| -- | -- | -- |
| `.pf-v6-c-data-list__item-draggable-button` | `
© 2015 - 2025 Weber Informatics LLC | Privacy Policy