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
To enable drag and drop, wrap the <DataList> component with <DragDropSort>, define the variant property as "DataList", and pass both the sortable items and onDrop callback to <DragDropSort>. <DragDropSort> will create the component's usual children internally based on the items property, so children should not be passed to the wrapped component.
Full drag and drop details can be found on the drag and drop component page.
- item-0
- item-1
- item-2
- item-3
- item-4
- item-5
- item-6
- item-7
- item-8
- item-9
Draggable with multiple drop zones
To enable multiple drop zones, and create the desired amount of <Droppable> components within a <DragDropContainer>.
Each <Droppable> should define the wrapper property as the component that acts as the drop zone, <DataList>, and the items property of their respective draggable items as an array of <DraggableObject> data. <DragDropContainer> should be passed the onDrop, onContainerMove, and onCancel callbacks to handle items being dropped, items moving between droppable containers, and what happens if the drag is cancelled respectively. <DragDropContainer> should also be given a Record representing all sortable drop zones' items. Both components should define the variant property as "DataList".
Full drag and drop details can be found on the drag and drop component page.
group 1
- item-0
- item-1
- item-2
- item-3
- item-4
group 2
- item-5
- item-6
- item-7
- item-8
- item-9
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 | |
| 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 | 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. | |
| id | string | Id of the DataList checkbox. | |
| isChecked | boolean | 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 | 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 | |
|---|---|---|---|---|
| .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--PaddingBlockStart--offset | 0.25rem | ||
| ||||
| .pf-v6-c-data-list | --pf-v6-c-data-list--m-compact__item-action--PaddingBlockEnd--offset | 0.25rem | ||
| ||||
| .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 | ||