Skip to content

Data list

A data list displays large data sets and interactive content in a flexible layout.

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
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
checkedbooleanFlag 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.
classNamestringAdditional 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.
idstringId of the DataList checkbox.
isCheckedbooleanFlag 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) => voidA 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-v6-c-data-list--pf-v6-c-data-list--FontSize
var( --pf-t--global--font--size--body)
.pf-v6-c-data-list--pf-v6-c-data-list--LineHeight
1.5
.pf-v6-c-data-list--pf-v6-c-data-list--BorderBlockStartColor
(In light theme) #c7c7c7
.pf-v6-c-data-list--pf-v6-c-data-list--BorderBlockStartWidth
2px
.pf-v6-c-data-list--pf-v6-c-data-list--sm--BorderBlockStartWidth
1px
.pf-v6-c-data-list--pf-v6-c-data-list--sm--BorderBlockStartColor
(In light theme) #c7c7c7
.pf-v6-c-data-list--pf-v6-c-data-list--MarginInlineStart
1rem
.pf-v6-c-data-list--pf-v6-c-data-list__item--BackgroundColor
var( --pf-t--global--background--color--primary--default)
.pf-v6-c-data-list--pf-v6-c-data-list__item--hover--BackgroundColor
(In light theme) #f2f2f2
.pf-v6-c-data-list--pf-v6-c-data-list__item--m-selected--BackgroundColor
(In light theme) #f2f2f2
.pf-v6-c-data-list--pf-v6-c-data-list__item--m-clickable--OutlineOffset
calc(-1 * 0.25rem)
.pf-v6-c-data-list--pf-v6-c-data-list__item--BorderBlockEndColor
(In light theme) #c7c7c7
.pf-v6-c-data-list--pf-v6-c-data-list__item--BorderBlockEndWidth
2px
.pf-v6-c-data-list--pf-v6-c-data-list__item--sm--BorderBlockEndWidth
1px
.pf-v6-c-data-list--pf-v6-c-data-list__item--sm--BorderBlockEndColor
(In light theme) #c7c7c7
.pf-v6-c-data-list--pf-v6-c-data-list__item-row--PaddingInlineEnd
1rem
.pf-v6-c-data-list--pf-v6-c-data-list__item-row--PaddingInlineStart
1rem
.pf-v6-c-data-list--pf-v6-c-data-list__item-row--xl--PaddingInlineEnd
1.5rem
.pf-v6-c-data-list--pf-v6-c-data-list__item-row--xl--PaddingInlineStart
1.5rem
.pf-v6-c-data-list--pf-v6-c-data-list__item-content--md--PaddingBlockEnd
1.5rem
.pf-v6-c-data-list--pf-v6-c-data-list__cell--PaddingBlockStart
1.5rem
.pf-v6-c-data-list--pf-v6-c-data-list__cell--PaddingBlockEnd
1.5rem
.pf-v6-c-data-list--pf-v6-c-data-list__cell--MarginInlineEnd
2rem
.pf-v6-c-data-list--pf-v6-c-data-list__cell--md--PaddingBlockEnd
0
.pf-v6-c-data-list--pf-v6-c-data-list__cell--m-icon--MarginInlineEnd
1rem
.pf-v6-c-data-list--pf-v6-c-data-list__cell--cell--PaddingBlockStart
0
.pf-v6-c-data-list--pf-v6-c-data-list__cell--cell--md--PaddingBlockStart
1.5rem
.pf-v6-c-data-list--pf-v6-c-data-list__cell--m-icon--cell--PaddingBlockStart
1.5rem
.pf-v6-c-data-list--pf-v6-c-data-list--cell--MinWidth
initial
.pf-v6-c-data-list--pf-v6-c-data-list--cell--Overflow
visible
.pf-v6-c-data-list--pf-v6-c-data-list--cell--TextOverflow
clip
.pf-v6-c-data-list--pf-v6-c-data-list--cell--WhiteSpace
normal
.pf-v6-c-data-list--pf-v6-c-data-list--cell--WordBreak
normal
.pf-v6-c-data-list--pf-v6-c-data-list--cell--m-truncate--MinWidth
5ch
.pf-v6-c-data-list--pf-v6-c-data-list__toggle--MarginInlineStart
calc(0.5rem * -1)
.pf-v6-c-data-list--pf-v6-c-data-list__toggle--MarginBlockStart
calc(0.5rem * -1)
.pf-v6-c-data-list--pf-v6-c-data-list__toggle--MarginBlockEnd
calc(0.5rem * -1)
.pf-v6-c-data-list--pf-v6-c-data-list__toggle-icon--Height
calc(var( --pf-t--global--font--size--body) * 1.5)
.pf-v6-c-data-list--pf-v6-c-data-list__toggle-icon--Transition
.2s ease-in 0s
.pf-v6-c-data-list--pf-v6-c-data-list__toggle-icon--Rotate
0
.pf-v6-c-data-list--pf-v6-c-data-list__item--m-expanded__toggle-icon--Rotate
90deg
.pf-v6-c-data-list--pf-v6-c-data-list__item-draggable-button--BackgroundColor
transparent
.pf-v6-c-data-list--pf-v6-c-data-list__item-draggable-button--PaddingInlineStart
1rem
.pf-v6-c-data-list--pf-v6-c-data-list__item-draggable-button--PaddingInlineEnd
1rem
.pf-v6-c-data-list--pf-v6-c-data-list__item-draggable-button--MarginBlockStart
calc(1.5rem * -1)
.pf-v6-c-data-list--pf-v6-c-data-list__item-draggable-button--MarginBlockEnd
calc(1.5rem * -1)
.pf-v6-c-data-list--pf-v6-c-data-list__item-draggable-button--PaddingBlockStart
1.5rem
.pf-v6-c-data-list--pf-v6-c-data-list__item-draggable-button--PaddingBlockEnd
1.5rem
.pf-v6-c-data-list--pf-v6-c-data-list__item-draggable-button--MarginInlineStart
calc(1rem * -1)
.pf-v6-c-data-list--pf-v6-c-data-list__item-draggable-button-icon--Color
(In light theme) #707070
.pf-v6-c-data-list--pf-v6-c-data-list__item-draggable-button--m-disabled__draggable-icon--Color
(In light theme) #a3a3a3
.pf-v6-c-data-list--pf-v6-c-data-list__item-draggable-button--hover__draggable-icon--Color
(In light theme) #1f1f1f
.pf-v6-c-data-list--pf-v6-c-data-list__item-draggable-button--focus__draggable-icon--Color
(In light theme) #1f1f1f
.pf-v6-c-data-list--pf-v6-c-data-list__item--m-ghost-row--after--BackgroundColor
(In light theme) #ffffff
.pf-v6-c-data-list--pf-v6-c-data-list__item--m-ghost-row--after--Opacity
.6
.pf-v6-c-data-list--pf-v6-c-data-list__item-control--PaddingBlockStart
1.5rem
.pf-v6-c-data-list--pf-v6-c-data-list__item-control--PaddingBlockEnd
1.5rem
.pf-v6-c-data-list--pf-v6-c-data-list__item-control--MarginInlineEnd
1rem
.pf-v6-c-data-list--pf-v6-c-data-list__item-control--md--MarginInlineEnd
2rem
.pf-v6-c-data-list--pf-v6-c-data-list__item-control--not-last-child--MarginInlineEnd
1rem
.pf-v6-c-data-list--pf-v6-c-data-list__check--Height
calc(var( --pf-t--global--font--size--body) * 1.5)
.pf-v6-c-data-list--pf-v6-c-data-list__check--MarginBlockStart
-0.0625rem
.pf-v6-c-data-list--pf-v6-c-data-list__item-action--Display
flex
.pf-v6-c-data-list--pf-v6-c-data-list__item-action--PaddingBlockStart
1.5rem
.pf-v6-c-data-list--pf-v6-c-data-list__item-action--PaddingBlockEnd
1.5rem
.pf-v6-c-data-list--pf-v6-c-data-list__item-action--PaddingBlockStart--offset
0.5rem
.pf-v6-c-data-list--pf-v6-c-data-list__item-action--PaddingBlockEnd--offset
0.5rem
.pf-v6-c-data-list--pf-v6-c-data-list__item-action--MarginInlineStart
1rem
.pf-v6-c-data-list--pf-v6-c-data-list__item-action--md--MarginInlineStart
2rem
.pf-v6-c-data-list--pf-v6-c-data-list__item-action--Gap
1rem
.pf-v6-c-data-list--pf-v6-c-data-list__expandable-content--BackgroundColor
var( --pf-t--global--background--color--primary--default)
.pf-v6-c-data-list--pf-v6-c-data-list__expandable-content--MarginBlockEnd
1rem
.pf-v6-c-data-list--pf-v6-c-data-list__expandable-content--MarginInlineStart
1rem
.pf-v6-c-data-list--pf-v6-c-data-list__expandable-content--MarginInlineEnd
1rem
.pf-v6-c-data-list--pf-v6-c-data-list__expandable-content--MaxHeight
37.5rem
.pf-v6-c-data-list--pf-v6-c-data-list__expandable-content-body--PaddingBlockStart
1rem
.pf-v6-c-data-list--pf-v6-c-data-list__expandable-content-body--PaddingInlineEnd
1rem
.pf-v6-c-data-list--pf-v6-c-data-list__expandable-content-body--PaddingBlockEnd
1rem
.pf-v6-c-data-list--pf-v6-c-data-list__expandable-content-body--PaddingInlineStart
1rem
.pf-v6-c-data-list--pf-v6-c-data-list__expandable-content-body--md--PaddingBlockStart
1.5rem
.pf-v6-c-data-list--pf-v6-c-data-list__expandable-content-body--xl--PaddingInlineEnd
1.5rem
.pf-v6-c-data-list--pf-v6-c-data-list__expandable-content-body--md--PaddingBlockEnd
1.5rem
.pf-v6-c-data-list--pf-v6-c-data-list__expandable-content-body--xl--PaddingInlineStart
1.5rem
.pf-v6-c-data-list--pf-v6-c-data-list__expandable-content-body--BorderRadius
6px
.pf-v6-c-data-list--pf-v6-c-data-list--m-compact--FontSize
0.75rem
.pf-v6-c-data-list--pf-v6-c-data-list--m-compact--LineHeight
1.5
.pf-v6-c-data-list--pf-v6-c-data-list--m-compact__check--FontSize
0.875rem
.pf-v6-c-data-list--pf-v6-c-data-list--m-compact__cell--PaddingBlockStart
0.5rem
.pf-v6-c-data-list--pf-v6-c-data-list--m-compact__cell--PaddingBlockEnd
0.5rem
.pf-v6-c-data-list--pf-v6-c-data-list--m-compact__cell--md--PaddingBlockEnd
0
.pf-v6-c-data-list--pf-v6-c-data-list--m-compact__cell-cell--PaddingBlockStart
0
.pf-v6-c-data-list--pf-v6-c-data-list--m-compact__cell-cell--md--PaddingBlockStart
0.5rem
.pf-v6-c-data-list--pf-v6-c-data-list--m-compact__cell--cell--MarginInlineEnd
1rem
.pf-v6-c-data-list--pf-v6-c-data-list--m-compact__item-control--PaddingBlockStart
0.5rem
.pf-v6-c-data-list--pf-v6-c-data-list--m-compact__item-control--PaddingBlockEnd
0.5rem
.pf-v6-c-data-list--pf-v6-c-data-list--m-compact__item-control--MarginInlineEnd
1rem
.pf-v6-c-data-list--pf-v6-c-data-list--m-compact__item-action--PaddingBlockStart
0.5rem
.pf-v6-c-data-list--pf-v6-c-data-list--m-compact__item-action--PaddingBlockEnd
0.5rem
.pf-v6-c-data-list--pf-v6-c-data-list--m-compact__item-action--MarginInlineStart
1rem
.pf-v6-c-data-list--pf-v6-c-data-list--m-compact__item-content--PaddingBlockEnd
0.5rem
.pf-v6-c-data-list--pf-v6-c-data-list--m-compact__item-draggable-button--MarginBlockStart
calc(0.5rem * -1)
.pf-v6-c-data-list--pf-v6-c-data-list--m-compact__item-draggable-button--MarginBlockEnd
calc(0.5rem * -1)
.pf-v6-c-data-list--pf-v6-c-data-list--m-compact__item-draggable-button--PaddingBlockStart
0.5rem
.pf-v6-c-data-list--pf-v6-c-data-list--m-compact__item-draggable-button--PaddingBlockEnd
0.5rem
.pf-v6-c-data-list--pf-v6-c-data-list--m-compact__cell--m-icon--cell--PaddingBlockStart
0.5rem
.pf-v6-c-data-list.pf-m-compact--pf-v6-c-data-list__check--FontSize
0.875rem
.pf-v6-c-data-list.pf-m-compact--pf-v6-c-data-list--FontSize
0.75rem
.pf-v6-c-data-list.pf-m-compact--pf-v6-c-data-list__item-action--MarginInlineStart
1rem
.pf-v6-c-data-list.pf-m-compact--pf-v6-c-data-list__item-action--PaddingBlockStart
0.5rem
.pf-v6-c-data-list.pf-m-compact--pf-v6-c-data-list__item-action--PaddingBlockEnd
0.5rem
.pf-v6-c-data-list.pf-m-compact--pf-v6-c-data-list__item-control--MarginInlineEnd
1rem
.pf-v6-c-data-list.pf-m-compact--pf-v6-c-data-list__item-control--PaddingBlockStart
0.5rem
.pf-v6-c-data-list.pf-m-compact--pf-v6-c-data-list__item-control--PaddingBlockEnd
0.5rem
.pf-v6-c-data-list.pf-m-compact--pf-v6-c-data-list__item-content--md--PaddingBlockEnd
0.5rem
.pf-v6-c-data-list.pf-m-compact--pf-v6-c-data-list__item-draggable-button--MarginBlockStart
calc(0.5rem * -1)
.pf-v6-c-data-list.pf-m-compact--pf-v6-c-data-list__item-draggable-button--MarginBlockEnd
calc(0.5rem * -1)
.pf-v6-c-data-list.pf-m-compact--pf-v6-c-data-list__item-draggable-button--PaddingBlockStart
0.5rem
.pf-v6-c-data-list.pf-m-compact--pf-v6-c-data-list__item-draggable-button--PaddingBlockEnd
0.5rem
.pf-v6-c-data-list.pf-m-compact--pf-v6-c-data-list__cell--m-icon--cell--PaddingBlockStart
0.5rem
.pf-v6-c-data-list.pf-m-compact .pf-v6-c-data-list__cell--pf-v6-c-data-list__cell--PaddingBlockStart
0.5rem
.pf-v6-c-data-list.pf-m-compact .pf-v6-c-data-list__cell--pf-v6-c-data-list__cell--PaddingBlockEnd
0.5rem
.pf-v6-c-data-list.pf-m-compact .pf-v6-c-data-list__cell--pf-v6-c-data-list__cell--MarginInlineEnd
1rem
.pf-v6-c-data-list.pf-m-compact .pf-v6-c-data-list__cell--pf-v6-c-data-list__cell--cell--PaddingBlockStart
0
.pf-v6-c-data-list.pf-m-truncate--pf-v6-c-data-list--cell--MinWidth
5ch
.pf-v6-c-data-list.pf-m-truncate--pf-v6-c-data-list--cell--Overflow
hidden
.pf-v6-c-data-list.pf-m-truncate--pf-v6-c-data-list--cell--TextOverflow
ellipsis
.pf-v6-c-data-list.pf-m-truncate--pf-v6-c-data-list--cell--WhiteSpace
nowrap
.pf-v6-c-data-list.pf-m-break-word--pf-v6-c-data-list--cell--WordBreak
break-word
.pf-v6-c-data-list.pf-m-nowrap--pf-v6-c-data-list--cell--WhiteSpace
nowrap
.pf-v6-c-data-list__item.pf-m-expanded--pf-v6-c-data-list__toggle-icon--Rotate
90deg
.pf-v6-c-data-list__item-draggable-button:hover--pf-v6-c-data-list__item-draggable-button-icon--Color
(In light theme) #1f1f1f
.pf-v6-c-data-list__item-draggable-button:focus--pf-v6-c-data-list__item-draggable-button-icon--Color
(In light theme) #1f1f1f
.pf-v6-c-data-list__item-draggable-button.pf-m-disabled--pf-v6-c-data-list__item-draggable-button-icon--Color
(In light theme) #a3a3a3
.pf-v6-c-data-list__item-action--pf-v6-hidden-visible--visible--Display
flex
.pf-v6-c-data-list__item-action--pf-v6-hidden-visible--hidden--Display
none
.pf-v6-c-data-list__item-action--pf-v6-hidden-visible--Display
flex
.pf-v6-c-data-list__item-action.pf-m-hidden--pf-v6-hidden-visible--Display
none
.pf-v6-c-data-list__expandable-content .pf-v6-c-data-list__expandable-content-body .pf-v6-c-data-list__item-row--pf-v6-c-data-list__item-row--PaddingInlineStart
0
.pf-v6-c-data-list__expandable-content .pf-v6-c-data-list__expandable-content-body .pf-v6-c-data-list__expandable-content-body--pf-v6-c-data-list__expandable-content-body--PaddingInlineStart
0

View source on GitHub
Red Hat
Copyright © 2014-2024 Red Hat, Inc.
Privacy statementTerms of useAll policies and guidelines