Patternfly Logo

Examples

Basic

  • Primary content
    Secondary content
  • Secondary content (pf-m-no-fill)
    Secondary content (pf-m-align-right pf-m-no-fill)

Compact

  • Primary content
    Secondary 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 content
    Single actionable Secondary content
  • Multi actions Primary content
    Multi actions Secondary content

Expandable

  • Primary content
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.link
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

  • Secondary content
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Lorem ipsum dolor sit amet.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • Tertiary content
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Lorem ipsum dolor sit amet.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    This expanded section has no padding.

Width modifiers

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

  • width 2

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.

    width 4

    Lorem ipsum dolor sit amet.

Flex modifiers - example 3

  • width 5

    Lorem ipsum dolor sit amet, consectetur adipisicing elit.

    width 2

    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.

Selectable rows

  • Single actionable Primary content
    Single actionable Secondary content
  • Selectable actions Primary content
    Selectable actions Secondary content

Controlling text

  • Primary content
    Really really really really really really really really really really really really really really long description that should be truncated before it ends

Draggable

  • Item 1
  • Item 2
  • Item 3
  • Item 4

Props

DataList properties
NameTypeRequiredDefaultDescription
aria-labelstringYesAdds accessible text to the DataList list
childrenReact.ReactNodeNonullContent rendered inside the DataList list
classNamestringNo''Additional classes added to the DataList list
isCompactbooleanNofalseFlag indicating if DataList should have compact styling
itemOrderstring[]NoOrder of items in a draggable DataList
onDragCancel() => voidNoOptional informational callback for dragging, fired when dragging is cancelled
onDragFinish(newItemOrder: string[]) => voidNoOptional callback to make DataList draggable, fired when dragging ends
onDragMove(oldIndex: number, newIndex: number) => voidNoOptional informational callback for dragging, fired when an item moves
onDragStart(id: string) => voidNoOptional informational callback for dragging, fired when dragging starts
onSelectDataListItem(id: string) => voidNoOptional callback to make DataList selectable, fired when DataListItem selected
selectedDataListItemIdstringNo''Id of DataList item currently selected
wrapModifierDataListWrapModifier | 'nowrap' | 'truncate' | 'breakWord'NonullDetermines which wrapping modifier to apply to the DataList
DataListAction properties
NameTypeRequiredDefaultDescription
aria-labelstringYesAdds accessible text to the DataList Action
aria-labelledbystringYesAdds accessible text to the DataList Action
childrenReact.ReactNodeYesContent rendered as DataList Action (e.g <Button> or <Dropdown>)
classNamestringNoAdditional classes added to the DataList Action
idstringYesIdentify the DataList toggle number
isPlainButtonActionbooleanNoFlag 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'; }NoWhat breakpoints to hide/show the data list action
DataListCell properties
NameTypeRequiredDefaultDescription
alignRightbooleanNofalseAligns the cell content to the right of its parent.
childrenReact.ReactNodeNonullContent rendered inside the DataList cell
classNamestringNo''Additional classes added to the DataList cell
isFilledbooleanNotrueEnables the body Content to fill the height of the card
isIconbooleanNofalseSet to true if the cell content is an Icon
width1 | 2 | 3 | 4 | 5No1Width (from 1-5) to the DataList cell
wrapModifierDataListWrapModifier | 'nowrap' | 'truncate' | 'breakWord'NonullDetermines which wrapping modifier to apply to the DataListCell
DataListCheck properties
NameTypeRequiredDefaultDescription
aria-labelledbystringYesAria-labelledby of the DataList checkbox
checkedbooleanNonullAlternate Flag to show if the DataList checkbox is checked
classNamestringNo''Additional classes added to the DataList item checkbox
isCheckedbooleanNonullFlag to show if the DataList checkbox is checked
isDisabledbooleanNofalseFlag to show if the DataList checkbox is disabled
isValidbooleanNotrueFlag to show if the DataList checkbox selection is valid or invalid
onChange(checked: boolean, event: React.FormEvent<HTMLInputElement>) => voidNo(checked: boolean, event: React.FormEvent<HTMLInputElement>) => {}A callback for when the DataList checkbox selection changes
otherControlsbooleanNofalseFlag to indicate if other controls are used in the DataListItem
DataListItem properties
NameTypeRequiredDefaultDescription
aria-labelledbystringNo''Adds accessible text to the DataList item
childrenReact.ReactNodeNonullContent rendered inside the DataList item
classNamestringNo''Additional classes added to the DataList item should be either <DataListItemRow> or <DataListContent>
idstringNo''Unique id for the DataList item
isExpandedbooleanNofalseFlag to show if the expanded content of the DataList item is visible
DataListItemCells properties
NameTypeRequiredDefaultDescription
classNamestringNo''Additional classes added to the DataList item Content Wrapper. Children should be one ore more <DataListCell> nodes
dataListCellsReact.ReactNodeNoArray of <DataListCell> nodes that are rendered one after the other.
rowidstringNo''Id for the row
DataListItemRow properties
NameTypeRequiredDefaultDescription
childrenReact.ReactNodeYesContent rendered inside the DataListItemRow
classNamestringNo''Additional classes added to the DataListItemRow
rowidstringNo''Id for the row item
wrapModifierDataListWrapModifier | 'nowrap' | 'truncate' | 'breakWord'NonullDetermines which wrapping modifier to apply to the DataListItemRow
DataListToggle properties
NameTypeRequiredDefaultDescription
aria-controlsstringNo''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-labelstringNo'Details'Adds accessible text to the DataList toggle
aria-labelledbystringNoAdds accessible text to the DataList toggle
classNamestringNo''Additional classes added to the DataList cell
idstringYesIdentify the DataList toggle number
isExpandedbooleanNofalseFlag to show if the expanded content of the DataList item is visible
rowidstringNo''Id for the row
DataListContent properties
NameTypeRequiredDefaultDescription
aria-labelstringYesAdds accessible text to the DataList toggle
childrenReact.ReactNodeNonullContent rendered inside the DataList item
classNamestringNo''Additional classes added to the DataList cell
hasNoPaddingbooleanNofalseFlag to remove padding from the expandable content
idstringNo''Identify the DataListContent item
isHiddenbooleanNofalseFlag to show if the expanded content of the DataList item is visible
rowidstringNo''Id for the row

CSS variables

.pf-c-data-list--pf-global--Color--100
#151515
.pf-c-data-list--pf-global--Color--200
#6a6e73
.pf-c-data-list--pf-global--BorderColor--100
#d2d2d2
.pf-c-data-list--pf-global--primary-color--100
#06c
.pf-c-data-list--pf-global--link--Color
#06c
.pf-c-data-list--pf-global--link--Color--hover
#004080
.pf-c-data-list--pf-global--BackgroundColor--100
#fff
.pf-c-data-list--pf-c-data-list--BorderTopColor
#f0f0f0
.pf-c-data-list--pf-c-data-list--BorderTopWidth
0.5rem
.pf-c-data-list--pf-c-data-list--sm--BorderTopWidth
1px
.pf-c-data-list--pf-c-data-list--sm--BorderTopColor
#d2d2d2
.pf-c-data-list--pf-c-data-list__item--BackgroundColor
#fff
.pf-c-data-list--pf-c-data-list__item--m-selected--ZIndex
100
.pf-c-data-list--pf-c-data-list__item--m-expanded--before--BackgroundColor
#06c
.pf-c-data-list--pf-c-data-list__item--m-selected--before--BackgroundColor
#06c
.pf-c-data-list--pf-c-data-list__item--m-selected--BoxShadow
0 -0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16), 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)
.pf-c-data-list--pf-c-data-list__item--m-selectable--OutlineOffset
calc(-1 * 0.25rem)
.pf-c-data-list--pf-c-data-list__item--m-selectable--hover--ZIndex
calc(100 + 1)
.pf-c-data-list--pf-c-data-list__item--m-selectable--hover--BoxShadow
0 -0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16), 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)
.pf-c-data-list--pf-c-data-list__item--m-selectable--focus--BoxShadow
0 -0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16), 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)
.pf-c-data-list--pf-c-data-list__item--m-selectable--active--BoxShadow
0 -0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16), 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)
.pf-c-data-list--pf-c-data-list__item--m-expanded--m-selectable--before--BackgroundColor
#73bcf7
.pf-c-data-list--pf-c-data-list__item--BorderBottomColor
#f0f0f0
.pf-c-data-list--pf-c-data-list__item--BorderBottomWidth
0.5rem
.pf-c-data-list--pf-c-data-list__item--m-selectable--hover--item--BorderTopColor
#f0f0f0
.pf-c-data-list--pf-c-data-list__item--m-selectable--hover--item--BorderTopWidth
0.5rem
.pf-c-data-list--pf-c-data-list__item--sm--BorderBottomWidth
1px
.pf-c-data-list--pf-c-data-list__item--sm--BorderBottomColor
#d2d2d2
.pf-c-data-list--pf-c-data-list__item--before--BackgroundColor
transparent
.pf-c-data-list--pf-c-data-list__item--before--Width
3px
.pf-c-data-list--pf-c-data-list__item--before--Transition
all 250ms cubic-bezier(.42, 0, .58, 1)
.pf-c-data-list--pf-c-data-list__item--before--Top
0
.pf-c-data-list--pf-c-data-list__item--before--sm--Top
calc(0.5rem * -1)
.pf-c-data-list--pf-c-data-list__item-row--PaddingRight
1rem
.pf-c-data-list--pf-c-data-list__item-row--PaddingLeft
1rem
.pf-c-data-list--pf-c-data-list__item-row--xl--PaddingRight
1.5rem
.pf-c-data-list--pf-c-data-list__item-row--xl--PaddingLeft
1.5rem
.pf-c-data-list--pf-c-data-list__item-content--md--PaddingBottom
1.5rem
.pf-c-data-list--pf-c-data-list__cell--PaddingTop
1.5rem
.pf-c-data-list--pf-c-data-list__cell--PaddingBottom
1.5rem
.pf-c-data-list--pf-c-data-list__cell--MarginRight
2rem
.pf-c-data-list--pf-c-data-list__cell--md--PaddingBottom
0
.pf-c-data-list--pf-c-data-list__cell--m-icon--MarginRight
1rem
.pf-c-data-list--pf-c-data-list__cell--cell--PaddingTop
0
.pf-c-data-list--pf-c-data-list__cell--cell--md--PaddingTop
1.5rem
.pf-c-data-list--pf-c-data-list__cell--m-icon--cell--PaddingTop
1.5rem
.pf-c-data-list--pf-c-data-list--cell--MinWidth
initial
.pf-c-data-list--pf-c-data-list--cell--Overflow
visible
.pf-c-data-list--pf-c-data-list--cell--TextOverflow
clip
.pf-c-data-list--pf-c-data-list--cell--WhiteSpace
normal
.pf-c-data-list--pf-c-data-list--cell--WordBreak
normal
.pf-c-data-list--pf-c-data-list--cell--m-truncate--MinWidth
5ch
.pf-c-data-list--pf-c-data-list__toggle--MarginLeft
calc(0.5rem * -1)
.pf-c-data-list--pf-c-data-list__toggle--MarginTop
calc(0.375rem * -1)
.pf-c-data-list--pf-c-data-list__toggle-icon--Transition
.2s ease-in 0s
.pf-c-data-list--pf-c-data-list__item--m-expanded__toggle-icon--Rotate
90deg
.pf-c-data-list--pf-c-data-list__item-draggable-button--PaddingLeft
1rem
.pf-c-data-list--pf-c-data-list__item-draggable-button--PaddingRight
1rem
.pf-c-data-list--pf-c-data-list__item-draggable-button--MarginTop
calc(0.5rem * -1)
.pf-c-data-list--pf-c-data-list__item-draggable-button--MarginLeft
calc(1rem * -1)
.pf-c-data-list--pf-c-data-list__item-draggable-button-icon--Color
#6a6e73
.pf-c-data-list--pf-c-data-list__item-draggable-button--m-disabled__draggable-icon--Color
#d2d2d2
.pf-c-data-list--pf-c-data-list__item-draggable-button--hover__draggable-icon--Color
#151515
.pf-c-data-list--pf-c-data-list__item-draggable-button--focus__draggable-icon--Color
#151515
.pf-c-data-list--pf-c-data-list__item--m-ghost-row--after--BackgroundColor
#fff
.pf-c-data-list--pf-c-data-list__item--m-ghost-row--after--Opacity
.6
.pf-c-data-list--pf-c-data-list__item-control--PaddingTop
1.5rem
.pf-c-data-list--pf-c-data-list__item-control--PaddingBottom
1.5rem
.pf-c-data-list--pf-c-data-list__item-control--MarginRight
1rem
.pf-c-data-list--pf-c-data-list__item-control--md--MarginRight
2rem
.pf-c-data-list--pf-c-data-list__item-control--not-last-child--MarginRight
1rem
.pf-c-data-list--pf-c-data-list__item-action--Display
flex
.pf-c-data-list--pf-c-data-list__item-action--PaddingTop
1.5rem
.pf-c-data-list--pf-c-data-list__item-action--PaddingBottom
1.5rem
.pf-c-data-list--pf-c-data-list__item-action--MarginLeft
1rem
.pf-c-data-list--pf-c-data-list__item-action--md--MarginLeft
2rem
.pf-c-data-list--pf-c-data-list__item-action--not-last-child--MarginRight
1rem
.pf-c-data-list--pf-c-data-list__action--MarginTop
calc(0.375rem * -1)
.pf-c-data-list--pf-c-data-list__expandable-content--BorderTopWidth
1px
.pf-c-data-list--pf-c-data-list__expandable-content--BorderTopColor
#d2d2d2
.pf-c-data-list--pf-c-data-list__expandable-content--MarginRight
calc(1rem * -1)
.pf-c-data-list--pf-c-data-list__expandable-content--MarginLeft
calc(1rem * -1)
.pf-c-data-list--pf-c-data-list__expandable-content--MaxHeight
37.5rem
.pf-c-data-list--pf-c-data-list__expandable-content--before--Top
calc(0.5rem * -1)
.pf-c-data-list--pf-c-data-list__expandable-content-body--PaddingTop
1rem
.pf-c-data-list--pf-c-data-list__expandable-content-body--PaddingRight
1rem
.pf-c-data-list--pf-c-data-list__expandable-content-body--PaddingBottom
1rem
.pf-c-data-list--pf-c-data-list__expandable-content-body--PaddingLeft
1rem
.pf-c-data-list--pf-c-data-list__expandable-content-body--md--PaddingTop
1.5rem
.pf-c-data-list--pf-c-data-list__expandable-content-body--xl--PaddingRight
1.5rem
.pf-c-data-list--pf-c-data-list__expandable-content-body--md--PaddingBottom
1.5rem
.pf-c-data-list--pf-c-data-list__expandable-content-body--xl--PaddingLeft
1.5rem
.pf-c-data-list--pf-c-data-list--m-compact--FontSize
0.875rem
.pf-c-data-list--pf-c-data-list--m-compact__check--FontSize
1rem
.pf-c-data-list--pf-c-data-list--m-compact__cell--PaddingTop
0.5rem
.pf-c-data-list--pf-c-data-list--m-compact__cell--PaddingBottom
0.5rem
.pf-c-data-list--pf-c-data-list--m-compact__cell--md--PaddingBottom
0
.pf-c-data-list--pf-c-data-list--m-compact__cell-cell--PaddingTop
0
.pf-c-data-list--pf-c-data-list--m-compact__cell-cell--md--PaddingTop
0.5rem
.pf-c-data-list--pf-c-data-list--m-compact__cell--cell--MarginRight
1rem
.pf-c-data-list--pf-c-data-list--m-compact__item-control--PaddingTop
0.5rem
.pf-c-data-list--pf-c-data-list--m-compact__item-control--PaddingBottom
0
.pf-c-data-list--pf-c-data-list--m-compact__item-control--MarginRight
1rem
.pf-c-data-list--pf-c-data-list--m-compact__item-action--PaddingTop
0.5rem
.pf-c-data-list--pf-c-data-list--m-compact__item-action--PaddingBottom
0.5rem
.pf-c-data-list--pf-c-data-list--m-compact__item-action--MarginLeft
1rem
.pf-c-data-list--pf-c-data-list--m-compact__item-content--PaddingBottom
0.5rem
.pf-c-data-list__item-action--pf-hidden-visible--visible--Visibility
visible
.pf-c-data-list__item-action--pf-hidden-visible--hidden--Display
none
.pf-c-data-list__item-action--pf-hidden-visible--hidden--Visibility
hidden
.pf-c-data-list__item-action--pf-hidden-visible--Display
flex
.pf-c-data-list__item-action--pf-hidden-visible--Visibility
visible
.pf-c-data-list__item-action--pf-hidden-visible--visible--Display
flex
.pf-m-hidden.pf-c-data-list__item-action--pf-hidden-visible--Display
none
.pf-m-hidden.pf-c-data-list__item-action--pf-hidden-visible--Visibility
hidden
.pf-c-data-list.pf-m-compact--pf-c-data-list__item-action--MarginLeft
1rem
.pf-c-data-list.pf-m-compact--pf-c-data-list__item-action--PaddingTop
0.5rem
.pf-c-data-list.pf-m-compact--pf-c-data-list__item-action--PaddingBottom
0.5rem
.pf-c-data-list.pf-m-compact--pf-c-data-list__item-control--MarginRight
1rem
.pf-c-data-list.pf-m-compact--pf-c-data-list__item-control--PaddingTop
0.5rem
.pf-c-data-list.pf-m-compact--pf-c-data-list__item-control--PaddingBottom
0
.pf-c-data-list.pf-m-compact--pf-c-data-list__item-content--md--PaddingBottom
0.5rem
.pf-c-data-list.pf-m-compact .pf-c-data-list__cell--pf-c-data-list__cell--PaddingTop
0.5rem
.pf-c-data-list.pf-m-compact .pf-c-data-list__cell--pf-c-data-list__cell--PaddingBottom
0.5rem
.pf-c-data-list.pf-m-compact .pf-c-data-list__cell--pf-c-data-list__cell--MarginRight
1rem
.pf-c-data-list.pf-m-compact .pf-c-data-list__cell--pf-c-data-list__cell--cell--PaddingTop
0
.pf-c-data-list.pf-m-truncate--pf-c-data-list--cell--MinWidth
5ch
.pf-c-data-list.pf-m-truncate--pf-c-data-list--cell--Overflow
hidden
.pf-c-data-list.pf-m-truncate--pf-c-data-list--cell--TextOverflow
ellipsis
.pf-c-data-list.pf-m-truncate--pf-c-data-list--cell--WhiteSpace
nowrap
.pf-c-data-list.pf-m-break-word--pf-c-data-list--cell--WordBreak
break-word
.pf-c-data-list.pf-m-nowrap--pf-c-data-list--cell--WhiteSpace
nowrap
.pf-c-data-list__item.pf-m-selectable:hover:not(.pf-m-selected):not(:last-child)--pf-c-data-list__item--BorderBottomWidth
0
.pf-c-data-list__item.pf-m-selected--pf-c-data-list__item--before--BackgroundColor
#06c
.pf-c-data-list__item.pf-m-expanded--pf-c-data-list__item--before--BackgroundColor
#06c
.pf-c-data-list__item.pf-m-expanded.pf-m-selectable:not(.pf-m-selected)--pf-c-data-list__item--before--BackgroundColor
#73bcf7
.pf-c-data-list__item-draggable-button:hover--pf-c-data-list__item-draggable-button-icon--Color
#151515
.pf-c-data-list__item-draggable-button:focus--pf-c-data-list__item-draggable-button-icon--Color
#151515
.pf-c-data-list__item-draggable-button.pf-m-disabled--pf-c-data-list__item-draggable-button-icon--Color
#d2d2d2

View source on GitHub