Examples
Basic
- Primary contentSecondary content
- Secondary content (pf-m-no-fill)Secondary content (pf-m-align-right pf-m-no-fill)
Compact
- Primary contentSecondary content
- Secondary content (pf-m-no-fill)Secondary content (pf-m-align-right pf-m-no-fill)
Checkboxes, actions and additional cells
- 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.
Actions: single and multiple
- Single actionable Primary contentSingle actionable Secondary content
- Multi actions Primary contentMulti actions Secondary content
Expandable
- Secondary contentLorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mixed expandable
- Secondary contentLorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consectetur adipiscing elit.
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
Clickable rows
- Single actionable Primary contentSingle actionable Secondary content
- clickable actions Primary contentclickable actions Secondary content
Controlling text
- Primary contentReally really really really really really really really really really really really really really long description that should be truncated before it ends
Draggable
Note: There is a new recommended drag and drop implementation with full keyboard functionality, which replaces this implementation. To adhere to our new recommendations, refer to the drag and drop demos.
Previously, draggable data lists had their own API for the drag and drop component, which wasn't flexible enough to allow custom styling for items as they are dragged. To address this disparity, <DragDrop>, <Draggable>, and <Droppable> components were added to replace our now deprecated HTML5-based API. Keyboard and screen reader accessibility for the <DragDrop> component is still in development.
- item 0
- item 1
- item 2
- item 3
- item 4 item 4 item 4 item 4 item 4 item 4 item 4 item 4 item 4 item 4 item 4 item 4 item 4 item 4 item 4 item 4 item 4 item 4 item 4 item 4
- item 5
- item 6
- item 7
- item 8
- item 9
Press space or enter to begin dragging, and use the arrow keys to navigate up or down. Press enter to confirm the drag, or any other key to cancel the drag operation.
Small grid breakpoint
- Primary contentReally really really really really really really really really really really really really really long description that should be truncated before it ends
Props
DataList
| Name | Type | Default | Description |
|---|---|---|---|
| aria-labelrequired | string | Adds accessible text to the DataList list | |
| children | React.ReactNode | Content rendered inside the DataList list | |
| className | string | Additional classes added to the DataList list | |
| gridBreakpoint | 'none' | 'always' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | Specifies the grid breakpoints | |
| isCompact | boolean | Flag indicating if DataList should have compact styling | |
| onSelectableRowChange | (event: React.FormEvent<HTMLInputElement>, id: string) => void | Object that causes the data list to render hidden inputs which improve selectable item a11y | |
| onSelectDataListItem | (event: React.MouseEvent | React.KeyboardEvent, id: string) => void | Optional callback to make DataList selectable, fired when DataListItem selected | |
| selectedDataListItemId | string | Id of DataList item currently selected | |
| wrapModifier | DataListWrapModifier | 'nowrap' | 'truncate' | 'breakWord' | Determines which wrapping modifier to apply to the DataList |
DataListAction
| Name | Type | Default | Description |
|---|---|---|---|
| aria-labelrequired | string | Adds accessible text to the DataList Action | |
| aria-labelledbyrequired | string | Adds accessible text to the DataList Action | |
| childrenrequired | React.ReactNode | Content rendered as DataList Action (e.g <Button> or <Dropdown>) | |
| idrequired | string | Identify the DataList toggle number | |
| className | string | Additional classes added to the DataList Action | |
| isPlainButtonAction | boolean | Flag to indicate that the action is a plain button (e.g. kebab dropdown toggle) so that styling is applied to align the button | |
| visibility | { default?: 'hidden' | 'visible'; sm?: 'hidden' | 'visible'; md?: 'hidden' | 'visible'; lg?: 'hidden' | 'visible'; xl?: 'hidden' | 'visible'; '2xl'?: 'hidden' | 'visible'; } | What breakpoints to hide/show the data list action |
DataListCell
| Name | Type | Default | Description |
|---|---|---|---|
| alignRight | boolean | false | Aligns the cell content to the right of its parent. |
| children | React.ReactNode | null | Content rendered inside the DataList cell |
| className | string | '' | Additional classes added to the DataList cell |
| isFilled | boolean | true | Enables the body Content to fill the height of the card |
| isIcon | boolean | false | Set to true if the cell content is an Icon |
| width | 1 | 2 | 3 | 4 | 5 | 1 | Width (from 1-5) to the DataList cell |
| wrapModifier | DataListWrapModifier | 'nowrap' | 'truncate' | 'breakWord' | null | Determines which wrapping modifier to apply to the DataListCell |
DataListCheck
| Name | Type | Default | Description |
|---|---|---|---|
| aria-labelledbyrequired | string | Aria-labelledby of the DataList checkbox | |
| checked | boolean | false | Flag to show if the DataList checkbox is checked when it is controlled by React state. Both isChecked and checked are valid, but only use one. To make the DataList checkbox uncontrolled, instead use the defaultChecked prop, but do not use both. |
| className | string | '' | Additional classes added to the DataList item checkbox |
| defaultChecked | boolean | Flag to set default value of DataList checkbox when it is uncontrolled by React state. To make the DataList checkbox controlled, instead use the isChecked prop, but do not use both. | |
| isChecked | boolean | false | Flag to show if the DataList checkbox is checked when it is controlled by React state. Both isChecked and checked are valid, but only use one. To make the DataList checkbox uncontrolled, instead use the defaultChecked prop, but do not use both. |
| isDisabled | boolean | false | Flag to show if the DataList checkbox is disabled |
| isValid | boolean | true | Flag to show if the DataList checkbox selection is valid or invalid |
| onChange | (event: React.FormEvent<HTMLInputElement>, checked: boolean) => void | (event: React.FormEvent<HTMLInputElement>, checked: boolean) => {} | A callback for when the DataList checkbox selection changes |
| otherControls | boolean | false | Flag to indicate if other controls are used in the DataListItem |
DataListItem
| Name | Type | Default | Description |
|---|---|---|---|
| aria-labelledby | string | '' | Adds accessible text to the DataList item |
| children | React.ReactNode | null | Content rendered inside the DataList item |
| className | string | '' | Additional classes added to the DataList item should be either <DataListItemRow> or <DataListContent> |
| id | string | '' | Unique id for the DataList item |
| isExpanded | boolean | false | Flag to show if the expanded content of the DataList item is visible |
| selectableInputAriaLabel | string | Aria label to apply to the selectable input if one is rendered |
DataListItemCells
| Name | Type | Default | Description |
|---|---|---|---|
| className | string | '' | Additional classes added to the DataList item Content Wrapper. Children should be one ore more <DataListCell> nodes |
| dataListCells | React.ReactNode | Array of <DataListCell> nodes that are rendered one after the other. | |
| rowid | string | '' | Id for the row |
DataListItemRow
| Name | Type | Default | Description |
|---|---|---|---|
| childrenrequired | React.ReactNode | Content rendered inside the DataListItemRow | |
| className | string | '' | Additional classes added to the DataListItemRow |
| rowid | string | '' | Id for the row item |
| wrapModifier | DataListWrapModifier | 'nowrap' | 'truncate' | 'breakWord' | null | Determines which wrapping modifier to apply to the DataListItemRow |
DataListToggle
| Name | Type | Default | Description |
|---|---|---|---|
| idrequired | string | Identify the DataList toggle number | |
| aria-controls | string | '' | Allows users of some screen readers to shift focus to the controlled element. Should be used when the controlled contents are not adjacent to the toggle that controls them. |
| aria-label | string | 'Details' | Adds accessible text to the DataList toggle |
| aria-labelledby | string | Adds accessible text to the DataList toggle | |
| buttonProps | ButtonProps | Additional properties spread to the toggle button | |
| className | string | '' | Additional classes added to the DataList cell |
| isExpanded | boolean | false | Flag to show if the expanded content of the DataList item is visible |
| rowid | string | '' | Id for the row |
DataListContent
| Name | Type | Default | Description |
|---|---|---|---|
| aria-labelrequired | string | Adds accessible text to the DataList toggle | |
| children | React.ReactNode | null | Content rendered inside the DataList item |
| className | string | '' | Additional classes added to the DataList cell |
| hasNoPadding | boolean | false | Flag to remove padding from the expandable content |
| id | string | '' | Identify the DataListContent item |
| isHidden | boolean | false | Flag to show if the expanded content of the DataList item is visible |
| rowid | string | '' | Id for the row |
DataListDragButton
| Name | Type | Default | Description |
|---|---|---|---|
| className | string | '' | Additional classes added to the drag button |
| isDisabled | boolean | false | Flag indicating if drag is disabled for the item |
| type | 'button' | 'submit' | 'reset' | Sets button type |
DataListControl
| Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | Children of the data list control | |
| className | string | '' | Additional classes added to the DataList item control |
CSS variables
| Expand or collapse column | Selector | Variable | Value |
|---|
