React

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)

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.

Props

DataList properties
NameTypeRequiredDefaultDescription
childrenReact.ReactNodenull
classNamestring''
aria-labelstring
DataListAction properties
NameTypeRequiredDefaultDescription
childrenReact.ReactNodeContent rendered as DataList Action (e.g <Button> or <Dropdown>)
classNamestring''Additional classes added to the DataList Action
idstringIdentify the DataList toggle number
aria-labelledbystringAdds accessible text to the DataList Action
aria-labelstringAdds accessible text to the DataList Action
DataListCell properties
NameTypeRequiredDefaultDescription
childrenReact.ReactNodenullContent rendered inside the DataList cell
classNamestring''Additional classes added to the DataList cell
width1 | 2 | 3 | 4 | 51Width (from 1-5) to the DataList cell
isFilledbooleantrueEnables the body Content to fill the height of the card
alignRightbooleanfalseAligns the cell content to the right of its parent.
isIconbooleanfalseSet to true if the cell content is an Icon
DataListCheck properties
NameTypeRequiredDefaultDescription
classNamestring''Additional classes added to the DataList item checkbox
isValidbooleantrueFlag to show if the DataList checkbox selection is valid or invalid
isDisabledbooleanfalseFlag to show if the DataList checkbox is disabled
isCheckedbooleannullFlag to show if the DataList checkbox is checked
checkedbooleannullAlternate Flag to show if the DataList checkbox is checked
onChange(checked: boolean, event: React.FormEvent<HTMLInputElement>) => voidA callback for when the DataList checkbox selection changes
aria-labelledbystringAria-labelledby of the DataList checkbox
DataListItem properties
NameTypeRequiredDefaultDescription
isExpandedbooleanfalseFlag to show if the expanded content of the DataList item is visible
childrenReact.ReactNodeContent rendered inside the DataList item
classNamestring''Additional classes added to the DataList item should be either <DataListItemRow> or <DataListContent>
aria-labelledbystringAdds accessible text to the DataList item
DataListItemCells properties
NameTypeRequiredDefaultDescription
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 properties
NameTypeRequiredDefaultDescription
childrenReact.ReactNode
classNamestring''
rowidstring''
DataListToggle properties
NameTypeRequiredDefaultDescription
classNamestring''Additional classes added to the DataList cell
isExpandedbooleanfalseFlag to show if the expanded content of the DataList item is visible
idstringIdentify the DataList toggle number
rowidstring''Id for the row
aria-labelledbystring''Adds accessible text to the DataList toggle
aria-labelstring'Details'Adds accessible text to the DataList toggle
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.
DataListContent properties
NameTypeRequiredDefaultDescription
childrenReact.ReactNodenullContent rendered inside the DataList item
classNamestring''Additional classes added to the DataList cell
idstring''Identify the DataListContent item
rowidstring''Id for the row
isHiddenbooleanfalseFlag to show if the expanded content of the DataList item is visible
noPaddingbooleanfalseFlag to remove padding from the expandable content
aria-labelstringAdds 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
2rem
--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
1.5rem
--pf-c-data-list__cell--PaddingTopc_data_list__cell_PaddingTop
1.5rem
--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
2rem
--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
1.5rem
--pf-c-data-list__item-action--PaddingTopc_data_list__item_action_PaddingTop
1.5rem
--pf-c-data-list__item--before--BackgroundColorc_data_list__item_before_BackgroundColor
#06c
--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
1.5rem
--pf-c-data-list__item-control--MarginRightc_data_list__item_control_MarginRight
2rem
--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
1.5rem
--pf-c-data-list__item-control--PaddingTopc_data_list__item_control_PaddingTop
1.5rem
--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
1px
--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-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--sm--BorderTopColorc_data_list_sm_BorderTopColor
#ededed
--pf-c-data-list--sm--BorderTopWidthc_data_list_sm_BorderTopWidth
0.5rem