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. Related design guidelines: Lists and tables

ExamplesPropsCSS Variables

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.

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.

Selectable rows

  • Single actionable Primary content
    Single actionable Secondary content
  • Selectable actions Primary content
    Selectable actions Secondary content

Props

DataList properties
NameTypeRequiredDefaultDescription
childrenReact.ReactNodeNonull
classNamestringNo''
aria-labelstringYes
onSelectDataListItem(id: string) => voidNo
selectedDataListItemIdstringNo''
isCompactbooleanNofalseFlag indicating if DataList should have compact styling
DataListAction properties
NameTypeRequiredDefaultDescription
childrenReact.ReactNodeYesContent rendered as DataList Action (e.g <Button> or <Dropdown>)
classNamestringNo''Additional classes added to the DataList Action
idstringYesIdentify the DataList toggle number
aria-labelledbystringYesAdds accessible text to the DataList Action
aria-labelstringYesAdds accessible text to the DataList Action
DataListCell properties
NameTypeRequiredDefaultDescription
childrenReact.ReactNodeNonullContent rendered inside the DataList cell
classNamestringNo''Additional classes added to the DataList cell
width1 | 2 | 3 | 4 | 5No1Width (from 1-5) to the DataList cell
isFilledbooleanNotrueEnables the body Content to fill the height of the card
alignRightbooleanNofalseAligns the cell content to the right of its parent.
isIconbooleanNofalseSet to true if the cell content is an Icon
DataListCheck properties
NameTypeRequiredDefaultDescription
classNamestringNo''Additional classes added to the DataList item checkbox
isValidbooleanNotrueFlag to show if the DataList checkbox selection is valid or invalid
isDisabledbooleanNofalseFlag to show if the DataList checkbox is disabled
isCheckedbooleanNonullFlag to show if the DataList checkbox is checked
checkedbooleanNonullAlternate Flag to show if the DataList checkbox is checked
onChange(checked: boolean, event: React.FormEvent<HTMLInputElement>) => voidNo(checked: boolean, event: React.FormEvent<HTMLInputElement>) => {}A callback for when the DataList checkbox selection changes
aria-labelledbystringYesAria-labelledby of the DataList checkbox
DataListItem properties
NameTypeRequiredDefaultDescription
isExpandedbooleanNofalseFlag to show if the expanded content of the DataList item is visible
childrenReact.ReactNodeYesContent rendered inside the DataList item
classNamestringNo''Additional classes added to the DataList item should be either <DataListItemRow> or <DataListContent>
aria-labelledbystringYesAdds accessible text to the DataList item
idstringNo''Unique id for the DataList item
DataListItemCells properties
NameTypeRequiredDefaultDescription
classNamestringNo''Additional classes added to the DataList item Content Wrapper. Children should be one ore more <DataListCell> nodes
dataListCellsReact.ReactNodeNoArray of <DataListCell> nodes that are rendered one after the other.
rowidstringNo''Id for the row
DataListItemRow properties
NameTypeRequiredDefaultDescription
childrenReact.ReactNodeYes
classNamestringNo''
rowidstringNo''
DataListToggle properties
NameTypeRequiredDefaultDescription
classNamestringNo''Additional classes added to the DataList cell
isExpandedbooleanNofalseFlag to show if the expanded content of the DataList item is visible
idstringYesIdentify the DataList toggle number
rowidstringNo''Id for the row
aria-labelledbystringNo''Adds accessible text to the DataList toggle
aria-labelstringNo'Details'Adds accessible text to the DataList toggle
aria-controlsstringNo''Allows users of some screen readers to shift focus to the controlled element. Should be used when the controlled contents are not adjacent to the toggle that controls them.
DataListContent properties
NameTypeRequiredDefaultDescription
childrenReact.ReactNodeNonullContent rendered inside the DataList item
classNamestringNo''Additional classes added to the DataList cell
idstringNo''Identify the DataListContent item
rowidstringNo''Id for the row
isHiddenbooleanNofalseFlag to show if the expanded content of the DataList item is visible
noPaddingbooleanNofalseFlag to remove padding from the expandable content
aria-labelstringYesAdds accessible text to the DataList toggle

CSS Variables

--pf-c-data-list__action--MarginTopc_data_list__action_MarginTop
calc(0.375rem*-1)
--pf-c-data-list__cell-cell--MarginRightc_data_list__cell_cell_MarginRight
1rem
--pf-c-data-list__cell-cell--md--PaddingTopc_data_list__cell_cell_md_PaddingTop
1.5rem
--pf-c-data-list__cell-cell--PaddingTopc_data_list__cell_cell_PaddingTop
0
--pf-c-data-list__cell--m-icon--MarginRightc_data_list__cell_m_icon_MarginRight
1rem
--pf-c-data-list__cell--md--PaddingBottomc_data_list__cell_md_PaddingBottom
0
--pf-c-data-list__cell--PaddingBottomc_data_list__cell_PaddingBottom
0.5rem
--pf-c-data-list__cell--PaddingTopc_data_list__cell_PaddingTop
0.5rem
--pf-c-data-list__expandable-content--before--Topc_data_list__expandable_content_before_Top
calc(1px*-1)
--pf-c-data-list__expandable-content-body--md--PaddingBottomc_data_list__expandable_content_body_md_PaddingBottom
1rem
--pf-c-data-list__expandable-content-body--md--PaddingLeftc_data_list__expandable_content_body_md_PaddingLeft
1rem
--pf-c-data-list__expandable-content-body--md--PaddingRightc_data_list__expandable_content_body_md_PaddingRight
1rem
--pf-c-data-list__expandable-content-body--md--PaddingTopc_data_list__expandable_content_body_md_PaddingTop
1rem
--pf-c-data-list__expandable-content-body--PaddingBottomc_data_list__expandable_content_body_PaddingBottom
1.5rem
--pf-c-data-list__expandable-content-body--PaddingLeftc_data_list__expandable_content_body_PaddingLeft
1.5rem
--pf-c-data-list__expandable-content-body--PaddingRightc_data_list__expandable_content_body_PaddingRight
1.5rem
--pf-c-data-list__expandable-content-body--PaddingTopc_data_list__expandable_content_body_PaddingTop
1.5rem
--pf-c-data-list__expandable-content--BorderTopColorc_data_list__expandable_content_BorderTopColor
#d2d2d2
--pf-c-data-list__expandable-content--BoxShadowc_data_list__expandable_content_BoxShadow
0 0.3125rem 0.625rem -0.25rem rgba(3,3,3,0.25)
--pf-c-data-list__expandable-content--MarginLeftc_data_list__expandable_content_MarginLeft
calc(1.5rem*-1)
--pf-c-data-list__expandable-content--MarginRightc_data_list__expandable_content_MarginRight
calc(1.5rem*-1)
--pf-c-data-list__expandable-content--md--MaxHeightc_data_list__expandable_content_md_MaxHeight
37.5rem
--pf-c-data-list__item-action--Displayc_data_list__item_action_Display
flex
--pf-c-data-list__item-action--MarginLeftc_data_list__item_action_MarginLeft
1rem
--pf-c-data-list__item-action--md--MarginLeftc_data_list__item_action_md_MarginLeft
1rem
--pf-c-data-list__item-action--not-last-child--lg--MarginBottomc_data_list__item_action_not_last_child_lg_MarginBottom
1rem
--pf-c-data-list__item-action--not-last-child--MarginRightc_data_list__item_action_not_last_child_MarginRight
1rem
--pf-c-data-list__item-action--PaddingBottomc_data_list__item_action_PaddingBottom
0.5rem
--pf-c-data-list__item-action--PaddingTopc_data_list__item_action_PaddingTop
0.5rem
--pf-c-data-list__item--before--BackgroundColorc_data_list__item_before_BackgroundColor
#73bcf7
--pf-c-data-list__item--before--Bottomc_data_list__item_before_Bottom
0
--pf-c-data-list__item--before--Heightc_data_list__item_before_Height
initial
--pf-c-data-list__item--before--Topc_data_list__item_before_Top
0
--pf-c-data-list__item--before--Transitionc_data_list__item_before_Transition
all 250ms ease-in-out
--pf-c-data-list__item--before--Widthc_data_list__item_before_Width
3px
--pf-c-data-list__item--before--ZIndexc_data_list__item_before_ZIndex
500
--pf-c-data-list__item-content--PaddingBottomc_data_list__item_content_PaddingBottom
0.5rem
--pf-c-data-list__item-control--MarginRightc_data_list__item_control_MarginRight
1rem
--pf-c-data-list__item-control--md--MarginRightc_data_list__item_control_md_MarginRight
1rem
--pf-c-data-list__item-control--not-last-child--MarginRightc_data_list__item_control_not_last_child_MarginRight
1rem
--pf-c-data-list__item-control--PaddingBottomc_data_list__item_control_PaddingBottom
0
--pf-c-data-list__item-control--PaddingTopc_data_list__item_control_PaddingTop
0.5rem
--pf-c-data-list__item--hover--item--BorderTopColorc_data_list__item_hover_item_BorderTopColor
#d2d2d2
--pf-c-data-list__item--hover--item--BorderTopWidthc_data_list__item_hover_item_BorderTopWidth
1px
--pf-c-data-list__item-item--before--Heightc_data_list__item_item_before_Height
initial
--pf-c-data-list__item-item--before--Topc_data_list__item_item_before_Top
calc(1px*-1)
--pf-c-data-list__item-item--BorderTopColorc_data_list__item_item_BorderTopColor
#d2d2d2
--pf-c-data-list__item-item--BorderTopWidthc_data_list__item_item_BorderTopWidth
0
--pf-c-data-list__item-item--sm--BorderTopColorc_data_list__item_item_sm_BorderTopColor
#ededed
--pf-c-data-list__item-item--sm--BorderTopWidthc_data_list__item_item_sm_BorderTopWidth
0.5rem
--pf-c-data-list__item--m-expanded__expandable-content--BorderTopWidthc_data_list__item_m_expanded__expandable_content_BorderTopWidth
1px
--pf-c-data-list__item--m-expanded__toggle--c-button-icon--Transformc_data_list__item_m_expanded__toggle_c_button_icon_Transform
rotate(90deg)
--pf-c-data-list__item--m-expanded--before--BackgroundColorc_data_list__item_m_expanded_before_BackgroundColor
#06c
--pf-c-data-list__item--m-expanded--m-selectable--before--BackgroundColorc_data_list__item_m_expanded_m_selectable_before_BackgroundColor
#73bcf7
--pf-c-data-list__item--m-selectable--active--BoxShadowc_data_list__item_m_selectable_active_BoxShadow
0 -0.25rem 0.625rem -0.25rem rgba(3,3,3,0.12),0 0.25rem 0.625rem -0.25rem rgba(3,3,3,0.12)
--pf-c-data-list__item--m-selectable--focus--BoxShadowc_data_list__item_m_selectable_focus_BoxShadow
0 -0.25rem 0.625rem -0.25rem rgba(3,3,3,0.12),0 0.25rem 0.625rem -0.25rem rgba(3,3,3,0.12)
--pf-c-data-list__item--m-selectable--hover--BoxShadowc_data_list__item_m_selectable_hover_BoxShadow
0 -0.25rem 0.625rem -0.25rem rgba(3,3,3,0.12),0 0.25rem 0.625rem -0.25rem rgba(3,3,3,0.12)
--pf-c-data-list__item--m-selectable--hover--ZIndexc_data_list__item_m_selectable_hover_ZIndex
100
--pf-c-data-list__item--m-selectable--OutlineOffsetc_data_list__item_m_selectable_OutlineOffset
-0.25rem
--pf-c-data-list__item--m-selected--before--BackgroundColorc_data_list__item_m_selected_before_BackgroundColor
#06c
--pf-c-data-list__item--m-selected--BoxShadowc_data_list__item_m_selected_BoxShadow
0 -0.25rem 0.625rem -0.25rem rgba(3,3,3,0.12),0 0.25rem 0.625rem -0.25rem rgba(3,3,3,0.12)
--pf-c-data-list__item-row--md--PaddingLeftc_data_list__item_row_md_PaddingLeft
1rem
--pf-c-data-list__item-row--md--PaddingRightc_data_list__item_row_md_PaddingRight
1rem
--pf-c-data-list__item-row--PaddingLeftc_data_list__item_row_PaddingLeft
1.5rem
--pf-c-data-list__item-row--PaddingRightc_data_list__item_row_PaddingRight
1.5rem
--pf-c-data-list__toggle-icon--Transitionc_data_list__toggle_icon_Transition
.2s ease-in 0s
--pf-c-data-list__toggle--MarginLeftc_data_list__toggle_MarginLeft
calc(0.5rem*-1)
--pf-c-data-list__toggle--MarginTopc_data_list__toggle_MarginTop
calc(0.375rem*-1)
--pf-c-data-list--BackgroundColorc_data_list_BackgroundColor
#fff
--pf-c-data-list--BorderBottomColorc_data_list_BorderBottomColor
#d2d2d2
--pf-c-data-list--BorderBottomWidthc_data_list_BorderBottomWidth
0
--pf-c-data-list--BorderTopColorc_data_list_BorderTopColor
#d2d2d2
--pf-c-data-list--BorderTopWidthc_data_list_BorderTopWidth
1px
--pf-c-data-list--m-compact__cell-cell--MarginRightc_data_list_m_compact__cell_cell_MarginRight
1rem
--pf-c-data-list--m-compact__cell-cell--md--PaddingTopc_data_list_m_compact__cell_cell_md_PaddingTop
0.5rem
--pf-c-data-list--m-compact__cell-cell--PaddingTopc_data_list_m_compact__cell_cell_PaddingTop
0
--pf-c-data-list--m-compact__cell--md--PaddingBottomc_data_list_m_compact__cell_md_PaddingBottom
0
--pf-c-data-list--m-compact__cell--PaddingBottomc_data_list_m_compact__cell_PaddingBottom
0.5rem
--pf-c-data-list--m-compact__cell--PaddingTopc_data_list_m_compact__cell_PaddingTop
0.5rem
--pf-c-data-list--m-compact__item-action--MarginLeftc_data_list_m_compact__item_action_MarginLeft
1rem
--pf-c-data-list--m-compact__item-action--PaddingBottomc_data_list_m_compact__item_action_PaddingBottom
0.5rem
--pf-c-data-list--m-compact__item-action--PaddingTopc_data_list_m_compact__item_action_PaddingTop
0.5rem
--pf-c-data-list--m-compact__item-content--PaddingBottomc_data_list_m_compact__item_content_PaddingBottom
0.5rem
--pf-c-data-list--m-compact__item-control--MarginRightc_data_list_m_compact__item_control_MarginRight
1rem
--pf-c-data-list--m-compact__item-control--PaddingBottomc_data_list_m_compact__item_control_PaddingBottom
0
--pf-c-data-list--m-compact__item-control--PaddingTopc_data_list_m_compact__item_control_PaddingTop
0.5rem
--pf-c-data-list--sm--BorderTopColorc_data_list_sm_BorderTopColor
#ededed
--pf-c-data-list--sm--BorderTopWidthc_data_list_sm_BorderTopWidth
0.5rem