Skip to content
PatternFly logo

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)

Accessibility

Attribute
Applied to
Outcome
role="list"
.pf-c-data-list
Indicates that the data list is a list. Required
aria-label
.pf-c-data-list
Provides an accessible name for the data list. Required
aria-labelledby
.pf-c-data-list__item
Provides an accessible description for data list item. Required
id
.pf-c-data-list__cell, .pf-c-data-list__cell *
Provides a reference for data list item description. Required

Usage

Class
Applied to
Outcome
.pf-c-data-list
<ul>
Initiates a data list. Required
.pf-c-data-list__item
<li>
Initiates a data list item. Required
.pf-c-data-list__item-row
<div>
Initiates a data list item row. Required
.pf-c-data-list__item-content
<div>
Initiates a container for data list content. Required
.pf-c-data-list__cell
*
Initiates a data list content cell. Required
.pf-c-data-list__cell-text
<span>
Initiates a data list content cell text element.
.pf-m-align-left
.pf-c-data-list__cell
Modifies a data list cell to not grow and align-left when its the first data-list__cell element.
.pf-m-no-fill
.pf-c-data-list__cell
Modifies a data list cell to not fill the available horizontal space.
.pf-m-align-right
.pf-c-data-list__cell
Modifies a data list cell to align-right.

With headings

  • Primary content

    Secondary content

  • Secondary content (pf-m-no-fill)

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

Usage

When a list item includes more than one block of content, it can be difficult for some screen reader users to discern where one list item ends and the next one begins. A simple way to provide better separation of list items is to define the primary content section as a heading. Headings are useful for indicating a new section of contents, but also provide an easy way for screen reader users to navigate to specific sections on the page. The heading level should be based on the context in which the DataList component is being used. For example, if the heading for the section that contains the DataList is a level 3, then h4 elements should be used in the DataList list items.

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.

Accessibility

Attribute
Applied to
Outcome
aria-label="[descriptive text]"
.pf-c-data-list__action > .pf-c-button
Provides an accessible label buttons. Required
aria-labelledby="{title_cell_id}"
.pf-c-data-list__check > .pf-c-check__input
Creates an accessible label for the checkbox based on the title cell. Required
aria-labelledby="{title_cell_id} {data_list_action_id}"
.pf-c-data-list__action > .pf-c-button
Creates an accessible label for the action button using the title cell and button label Required
id
.pf-c-data-list__cell > *, .pf-c-data-list__check > .pf-c-check__input, .pf-c-data-list__action > .pf-c-button
Provides a reference for interactive elements. Required

Usage

Class
Applied to
Outcome
.pf-c-data-list__item-control
<div>
Initiates a container for data list controls. For example, add .pf-c-data-list__check here. Required
.pf-c-data-list__item-action
<div>
Initiates a container for the data list actions. For example, add .pf-c-data-list__action here. Required
.pf-c-data-list__check
<div>
Initiates a data list check cell. Required
.pf-c-data-list__action
<div>
Initiates a data list action button cell. Required
.pf-m-hidden{-on-[breakpoint]}
.pf-c-data-list__item-action
Hides an actions container at optional breakpoint, or hides it at all breakpoints with .pf-m-hidden.
.pf-m-visible{-on-[breakpoint]}
.pf-c-data-list__item-action
Shows an actions container at optional breakpoint.

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.

Expandable compact

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

Expandable nested

  • 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.
    • Nested row 1
      Nested row 1 expanded content.
    • Nested row 2
    • Nested row 3
      Nested row 3 expanded content.
  • 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.

Compact

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

Accessibility

Attribute
Applied to
Outcome
aria-expanded="true"
.pf-c-data-list__toggle > .pf-c-button
Indicates that the expandable content is visible. Required
hidden
.pf-c-data-list__expandable-content
Indicates that the expandable content is hidden. Required
aria-label="[descriptive text]"
.pf-c-data-list__toggle > .pf-c-button
Provides an accessible name for toggle button. Required
aria-labelledby="{title_cell_id} {button_id}"
.pf-c-data-list__toggle > .pf-c-button
Establishes relationship between aria-label text and toggle button. Required
id="{button_id}"
.pf-c-data-list__toggle > .pf-c-button
Provides a reference for toggle button description. Required
aria-controls="[id of element controlled]"
.pf-c-data-list__toggle > .pf-c-button
Identifies the section controlled by the toggle button. Required

Usage

Class
Applied to
Outcome
.pf-c-data-list__item-control
<div>
Initiates a container for data list controls. For example, add .pf-c-data-list__toggle here. Required
.pf-c-data-list__toggle
<div>
Initiates a toggle button.
.pf-c-data-list__toggle-icon
<span>
Initiates a toggle icon.
.pf-c-data-list__expandable-content
<div>
Initiates an expandable content container.
.pf-c-data-list__expandable-content-body
<div>
Initiates an expandable content container body. Required when .pf-c-data-list__expandable-content is used.
.pf-m-expanded
.pf-c-data-list__item
Modifies for expanded state.
.pf-m-compact
.pf-c-data-list
Modifies for compact variation.
.pf-m-no-padding
.pf-c-data-list__expandable-content-body
Removes padding for the expandable content body.
.pf-m-icon
.pf-c-data-list__cell
Modifies a data list cell to not grow and align-left when its the first data-list__cell element.

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

  • .pf-m-flex-2

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

    .pf-m-flex-4

    Lorem ipsum dolor sit amet.

Flex modifiers - example 3

  • .pf-m-flex-5

    Lorem ipsum dolor sit amet, consectetur adipisicing elit.

    .pf-m-flex-2

    Lorem ipsum dolor sit amet, consectetur adipisicing elit.

    .pf-m-flex-3

    Lorem ipsum dolor sit amet, consectetur adipisicing elit.

    .pf-m-flex-3

    Lorem ipsum dolor sit amet, consectetur adipisicing elit.

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

Accessibility

Attribute
Applied to
Outcome
aria-controls="[id of element controlled]"
.pf-c-data-list__toggle > .pf-c-button
Identifies the section controlled by the toggle button. Required

Usage

Class
Applied to
Outcome
.pf-m-flex-{1, 2, 3, 4, 5}
.pf-c-data-list__cell
Percentage based modifier for .pf-c-data-list__cell widths.

Selectable rows

  • Primary content
  • Secondary content (selected)
  • Tertiary content

Accessibility

Attribute
Applied to
Outcome
tabindex="0"
.pf-c-data-list__item.pf-m-selectable
Inserts the selectable row into the tab order of the page so that it is focusable. Required

Usage

Class
Applied to
Outcome
.pf-m-selectable
.pf-c-data-list__item
Modifies a data list item so that it is selectable.
.pf-m-selected
.pf-c-data-list__item
Modifies a data list item for the selected state.

Selectable expandable rows

  • Primary content (selected, expanded)
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  • Secondary content
  • Tertiary content (not selected, expanded)
    This expanded section has no padding.
  • Quaternary content (selected)

Draggable

Activate the reorder button and use the arrow keys to reorder the list or use your mouse to drag/reorder. Press escape to cancel the reordering.
  • Draggable icon disabled
  • List item
  • Ghost row
  • List item
This is the aria-live section that provides real-time feedback to the user.

Accessibility

Attribute
Applied to
Outcome
aria-pressed="true or false"
.pf-c-data-list__item-draggable-button
Indicates that the button is a toggle. When set to "true", pf-m-active should also be set so that the button displays in an active state.
aria-live
[element with live text]
Gives screen reader users live feedback about what's happening during interaction with the data list, both during drag and drop interactions and keyboard interactions. Highly Recommended
aria-describedby="[id value of applicable content]"
.pf-c-data-list__item-draggable-button
Gives the draggable button an accessible description by referring to the textual content that describes how to use the button to drag elements. The example here uses a <div id="draggable-help"></div>. Highly recommended
aria-labelledby="[id value of .pf-c-data-list__item-draggable-button] [id value of .pf-c-data-list__cell-text]"
.pf-c-data-list__item-draggable-button
Provides an accessible name for the draggable button.
id="[]"
.pf-c-data-list__item-draggable-button, .pf-c-data-list__cell-text
Gives the button and the text element accessible IDs

Usage

Class
Applied to
Outcome
.pf-c-data-list__item-draggable-button
<button>
Initiates the draggable button. Use for drag and drop.
.pf-c-data-list__item-draggable-icon
<span>
Initiates the draggable button icon.
.pf-m-draggable
.pf-c-data-list__item
Modifies a data list item so that it is draggable.
.pf-m-ghost-row
.pf-c-data-list__item.pf-m-draggable
Modifies a draggable data list item to be the ghost row.
.pf-m-disabled
.pf-c-data-list__item.pf-m-draggable
Modifies a data list draggable item for the disabled state.
.pf-m-drag-over
.pf-c-data-list
Modifies the data list to indicate that a draggable item is being dragged over the data list.

Text modifiers

  • This text will wrap to the next line because it has the default behavior of the data list cell.
    This text will truncate because it is very very long.
    http://thisisaverylongurlthatneedstobreakusethebreakwordmodifier.org
    This text will not break or wrap.
    This text will truncate because it is very very long. This text will truncate because it is very very long.
    This text will truncate because it is very very long. This text will truncate because it is very very long.
    This text will truncate because it is very very long. This text will truncate because it is very very long.
    This text will truncate because it is very very long. This text will truncate because it is very very long.
    http://thisisaverylongurlthatneedstobreakusethebreakwordmodifier.org
    http://thisisaverylongurlthatneedstobreakusethebreakwordmodifier.org
    http://thisisaverylongurlthatneedstobreakusethebreakwordmodifier.org
    http://thisisaverylongurlthatneedstobreakusethebreakwordmodifier.org
    This text will not break or wrap.
    This text will not break or wrap.
    This text will not break or wrap.
    This text will not break or wrap.

Text-modifiers-data-list-text

  • This text will wrap to the next line because it has the default behavior of the data list cell. This is data list text, you can apply `pf-m-truncate` directly to the text. This is data list text, you can apply `pf-m-truncate` directly to the text.
    This text will wrap to the next line because it has the default behavior of the data list cell. http://thisisaverylongdatalisttextthatneedstobreakusethebreakwordmodifier.org
    This text will wrap to the next line because it has the default behavior of the data list cell. This is data list text, you can apply `pf-m-nowrap` directly to the text.

Usage

Class
Applied to
Outcome
.pf-c-data-list__text
*
Inserts the data list text element. Use this class to modify specific text directly.
.pf-m-truncate
.pf-c-data-list, .pf-c-data-list__item-row, .pf-c-data-list__cell, .pf-c-data-list__text
Modifies the data list element so that text is truncated.
.pf-m-break-word
.pf-c-data-list, .pf-c-data-list__item-row, .pf-c-data-list__cell, .pf-c-data-list__text
Modifies the data list element so that text breaks to the next line.
.pf-m-nowrap
.pf-c-data-list, .pf-c-data-list__item-row, .pf-c-data-list__cell, .pf-c-data-list__text
Modifies the data list element so that text does not wrap to the next line.

Documentation

Overview

The DataList component provides a flexible alternative to the Table component, wherein individual data points may or may not exist within each row. DataList relies upon PatternFly layouts to achieve desired presentation within pf-c-data-list__cells. DataLists do not have headers. If headers are required, use the table component.

Grid

  • Cell 1
    Cell 2
    Cell 3
    Cell 4
    Cell 5
    Cell 6
  • Cell 1
    Cell 2
    Cell 3
    Cell 4
    Cell 5
    Cell 6

Grid (small breakpoint)

  • Cell 1
    Cell 2
    Cell 3
    Cell 4
    Cell 5
    Cell 6
  • Cell 1
    Cell 2
    Cell 3
    Cell 4
    Cell 5
    Cell 6

Grid none

  • Cell 1
    Cell 2
    Cell 3
    Cell 4
    Cell 5
    Cell 6
  • Cell 1
    Cell 2
    Cell 3
    Cell 4
    Cell 5
    Cell 6

Usage

Class
Applied to
Outcome
.pf-m-grid{-[none, sm, md, lg, xl, 2xl]}
.pf-c-data-list
Modifies the data list to switch to a grid layout at a specified breakpoint. .pf-m-grid will display the grid layout at all breakpoints. .pf-m-grid-none will display the desktop layout at all breakpoints. Note: Without a grid modifier, the data list will display the grid layout by default and switch to the desktop layout at a medium breakpoint.

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__toggle-icon--Rotate
0
.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__toggle-icon--Rotate
90deg
.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

QUICKLINKS

CONTRIBUTE

STAY IN TOUCH

PatternFly is an open source design system built to drive consistency and unify teams. From documentation and components to code examples and tutorials, PatternFly is a place where design and development can thrive. We’re on a mission to help teams build consistent, accessible, and scalable enterprise product experiences—the open source way.

Red Hat logo
Copyright © 2022 Red Hat, Inc.
Privacy statementTerms of useAll policies and guidelines