Skip to content
Patternfly Logo

Data list

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 contentDolor sit amet, consectetur adipisicing elit, seddo eiusmod.
    Secondary content. Dolor sit amet, consectetur adipisicing elit, sed do eiusmod.
    Tertiary contentDolor sit amet, consectetur adipisicing elit, sed do eiusmod.
    More contentDolor sit amet, consectetur adipisicing elit, sed do eiusmod.
    More contentDolor sit amet, consectetur adipisicing elit, sed do eiusmod.
  • Primary content - Lorem ipsumdolor sit amet, consecteturadipisicing elit, sed do eiusmod.
    Secondary content. Dolor sit amet, consectetur adipisicing elit, sed do eiusmod.
  • Primary content - Lorem ipsumdolor sit amet, consecteturadipisicing 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 etdolore 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 utlabore 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 etdolore 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 longdescription that should be truncated before it ends

Draggable

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

Small grid breakpoint

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

Props

DataList

NameTypeRequiredDefaultDescription
aria-labelstringYesAdds accessible text to the DataList list
childrenReact.ReactNodeNonullContent rendered inside the DataList list
classNamestringNo''Additional classes added to the DataList list
gridBreakpoint'none' | 'always' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'No'md'Specifies the grid breakpoints
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

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

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

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

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

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

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

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

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

DataListDragButton

NameTypeRequiredDefaultDescription
classNamestringNo''Additional classes added to the drag button
isDisabledbooleanNofalseFlag indicating if drag is disabled for the item
type'button' | 'submit' | 'reset'NoSets button type

DataListControl

NameTypeRequiredDefaultDescription
childrenReact.ReactNodeNoChildren of the data list control
classNamestringNo''Additional classes added to the DataList item control

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--FontSize
1em
.pf-c-data-list--pf-c-data-list--LineHeight
1.5
.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
#2b9af3
.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--MarginBottom
calc(0.375rem * -1)
.pf-c-data-list--pf-c-data-list__toggle-icon--Height
calc(1em * 1.5)
.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(1.5rem * -1)
.pf-c-data-list--pf-c-data-list__item-draggable-button--MarginBottom
calc(1.5rem * -1)
.pf-c-data-list--pf-c-data-list__item-draggable-button--PaddingTop
1.5rem
.pf-c-data-list--pf-c-data-list__item-draggable-button--PaddingBottom
1.5rem
.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__check--Height
calc(1em * 1.5)
.pf-c-data-list--pf-c-data-list__check--MarginTop
-0.0625rem
.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__item-action__action--MarginTop
calc(0.375rem * -1)
.pf-c-data-list--pf-c-data-list__action--MarginTop
calc(0.375rem * -1)
.pf-c-data-list--pf-c-data-list__item-action__action--MarginBottom
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--LineHeight
1.3
.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.5rem
.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-action__action--MarginTop
calc(0.5rem * -1)
.pf-c-data-list--pf-c-data-list--m-compact__item-action__action--MarginBottom
calc(0.5rem * -1)
.pf-c-data-list--pf-c-data-list--m-compact__action--MarginTop
calc(0.5rem * -1)
.pf-c-data-list--pf-c-data-list--m-compact__item-content--PaddingBottom
0.5rem
.pf-c-data-list--pf-c-data-list--m-compact__item-draggable-button--MarginTop
calc(0.5rem * -1)
.pf-c-data-list--pf-c-data-list--m-compact__item-draggable-button--MarginBottom
calc(0.5rem * -1)
.pf-c-data-list--pf-c-data-list--m-compact__item-draggable-button--PaddingTop
0.5rem
.pf-c-data-list--pf-c-data-list--m-compact__item-draggable-button--PaddingBottom
0.5rem
.pf-c-data-list--pf-c-data-list--m-compact__cell--m-icon--cell--PaddingTop
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__check--FontSize
1rem
.pf-c-data-list.pf-m-compact--pf-c-data-list__action--MarginTop
calc(0.5rem * -1)
.pf-c-data-list.pf-m-compact--pf-c-data-list--FontSize
0.875rem
.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-action__action--MarginTop
calc(0.5rem * -1)
.pf-c-data-list.pf-m-compact--pf-c-data-list__item-action__action--MarginBottom
calc(0.5rem * -1)
.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.5rem
.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__item-draggable-button--MarginTop
calc(0.5rem * -1)
.pf-c-data-list.pf-m-compact--pf-c-data-list__item-draggable-button--MarginBottom
calc(0.5rem * -1)
.pf-c-data-list.pf-m-compact--pf-c-data-list__item-draggable-button--PaddingTop
0.5rem
.pf-c-data-list.pf-m-compact--pf-c-data-list__item-draggable-button--PaddingBottom
0.5rem
.pf-c-data-list.pf-m-compact--pf-c-data-list__cell--m-icon--cell--PaddingTop
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
#2b9af3
.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