PatternFly

Data list

A data list is used to display large data sets when you need a flexible layout or need to include interactive content like charts.

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.

Mixed 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.

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

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.

Clickable rows

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

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 content
    Really really really really really really really really really really really really really really long description that should be truncated before it ends

Props

DataList

*required
NameTypeDefaultDescription
aria-labelrequiredstringAdds accessible text to the DataList list
childrenReact.ReactNodeContent rendered inside the DataList list
classNamestringAdditional classes added to the DataList list
gridBreakpoint'none' | 'always' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'Specifies the grid breakpoints
isCompactbooleanFlag indicating if DataList should have compact styling
onSelectableRowChange(event: React.FormEvent<HTMLInputElement>, id: string) => voidObject that causes the data list to render hidden inputs which improve selectable item a11y
onSelectDataListItem(event: React.MouseEvent | React.KeyboardEvent, id: string) => voidOptional callback to make DataList selectable, fired when DataListItem selected
selectedDataListItemIdstringId of DataList item currently selected
wrapModifierDataListWrapModifier | 'nowrap' | 'truncate' | 'breakWord'Determines which wrapping modifier to apply to the DataList

DataListAction

*required
NameTypeDefaultDescription
aria-labelrequiredstringAdds accessible text to the DataList Action
aria-labelledbyrequiredstringAdds accessible text to the DataList Action
childrenrequiredReact.ReactNodeContent rendered as DataList Action (e.g <Button> or <Dropdown>)
idrequiredstringIdentify the DataList toggle number
classNamestringAdditional classes added to the DataList Action
isPlainButtonActionbooleanFlag 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

*required
NameTypeDefaultDescription
alignRightbooleanfalseAligns the cell content to the right of its parent.
childrenReact.ReactNodenullContent rendered inside the DataList cell
classNamestring''Additional classes added to the DataList cell
isFilledbooleantrueEnables the body Content to fill the height of the card
isIconbooleanfalseSet to true if the cell content is an Icon
width1 | 2 | 3 | 4 | 51Width (from 1-5) to the DataList cell
wrapModifierDataListWrapModifier | 'nowrap' | 'truncate' | 'breakWord'nullDetermines which wrapping modifier to apply to the DataListCell

DataListCheck

*required
NameTypeDefaultDescription
aria-labelledbyrequiredstringAria-labelledby of the DataList checkbox
checkedbooleanfalseFlag 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.
classNamestring''Additional classes added to the DataList item checkbox
defaultCheckedbooleanFlag 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.
isCheckedbooleanfalseFlag 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.
isDisabledbooleanfalseFlag to show if the DataList checkbox is disabled
isValidbooleantrueFlag 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
otherControlsbooleanfalseFlag to indicate if other controls are used in the DataListItem

DataListItem

*required
NameTypeDefaultDescription
aria-labelledbystring''Adds accessible text to the DataList item
childrenReact.ReactNodenullContent rendered inside the DataList item
classNamestring''Additional classes added to the DataList item should be either <DataListItemRow> or <DataListContent>
idstring''Unique id for the DataList item
isExpandedbooleanfalseFlag to show if the expanded content of the DataList item is visible
selectableInputAriaLabelstringAria label to apply to the selectable input if one is rendered

DataListItemCells

*required
NameTypeDefaultDescription
classNamestring''Additional classes added to the DataList item Content Wrapper. Children should be one ore more <DataListCell> nodes
dataListCellsReact.ReactNodeArray of <DataListCell> nodes that are rendered one after the other.
rowidstring''Id for the row

DataListItemRow

*required
NameTypeDefaultDescription
childrenrequiredReact.ReactNodeContent rendered inside the DataListItemRow
classNamestring''Additional classes added to the DataListItemRow
rowidstring''Id for the row item
wrapModifierDataListWrapModifier | 'nowrap' | 'truncate' | 'breakWord'nullDetermines which wrapping modifier to apply to the DataListItemRow

DataListToggle

*required
NameTypeDefaultDescription
idrequiredstringIdentify the DataList toggle number
aria-controlsstring''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-labelstring'Details'Adds accessible text to the DataList toggle
aria-labelledbystringAdds accessible text to the DataList toggle
buttonPropsButtonPropsAdditional properties spread to the toggle button
classNamestring''Additional classes added to the DataList cell
isExpandedbooleanfalseFlag to show if the expanded content of the DataList item is visible
rowidstring''Id for the row

DataListContent

*required
NameTypeDefaultDescription
aria-labelrequiredstringAdds accessible text to the DataList toggle
childrenReact.ReactNodenullContent rendered inside the DataList item
classNamestring''Additional classes added to the DataList cell
hasNoPaddingbooleanfalseFlag to remove padding from the expandable content
idstring''Identify the DataListContent item
isHiddenbooleanfalseFlag to show if the expanded content of the DataList item is visible
rowidstring''Id for the row

DataListDragButton

*required
NameTypeDefaultDescription
classNamestring''Additional classes added to the drag button
isDisabledbooleanfalseFlag indicating if drag is disabled for the item
type'button' | 'submit' | 'reset'Sets button type

DataListControl

*required
NameTypeDefaultDescription
childrenReact.ReactNodeChildren of the data list control
classNamestring''Additional classes added to the DataList item control

CSS variables

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

View source on GitHub