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

Simple data list

  • Primary content
    Secondary content
  • Secondary content (pf-m-no-fill)
    Secondary content (pf-m-align-right pf-m-no-fill)
Copied to clipboard

Data list 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.
Copied to clipboard

Data list actions: single and multiple

  • Single actionable Primary content
    Single actionable Secondary content
  • Multi actions Primary content
    Multi actions Secondary content
Copied to clipboard

Data list 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.
Copied to clipboard

Data list 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.

Copied to clipboard

Props

DataList Props

The DataList component accepts the following props.

NameTypeRequiredDefaultDescription
childrennodenullContent rendered inside the DataList list
classNamestring''Additional classes added to the DataList list
aria-labelstringAdds accessible text to the DataList list
anyAdditional props are spread to the container <ul>

DataListAction Props

The DataListAction component accepts the following props.

NameTypeRequiredDefaultDescription
childrenunionContent 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
anyAdditional props are spread to the container <div>

DataListCell Props

The DataListCell component accepts the following props.

NameTypeRequiredDefaultDescription
childrennodenullContent rendered inside the DataList cell
classNamestring''Additional classes added to the DataList cell
widthenum1Width (from 1-5) to the DataList cell
isFilledbooltrueEnables the body Content to fill the height of the card
alignRightboolfalseAligns the cell content to the right of its parent.
isIconboolfalseSet to true if the cell content is an Icon
anyAdditional props are spread to the container <div>

DataListCheck Props

The DataListCheck component accepts the following props.

NameTypeRequiredDefaultDescription
classNamestring''Additional classes added to the DataList item checkbox
isValidbooltrueFlag to show if the DataList checkbox selection is valid or invalid
isDisabledboolfalseFlag to show if the DataList checkbox is disabled
isCheckedboolnullFlag to show if the DataList checkbox is checked
onChangefunc() => undefinedA callback for when the DataList checkbox selection changes
aria-labelledbystringAria-labelledby of the DataList checkbox
anyAdditional props are spread to the <input>

DataListContent Props

The DataListContent component accepts the following props.

NameTypeRequiredDefaultDescription
childrennodenullContent rendered inside the DataList item
classNamestring''Additional classes added to the DataList cell
idstring''Identify the DataListContent item
isHiddenboolfalseFlag to show if the expanded content of the DataList item is visible
noPaddingboolfalseFlag to remove padding from the expandable content
aria-labelstringAdds accessible text to the DataList toggle
anyAdditional props are spread to the container <section>

DataListItem Props

The DataListItem component accepts the following props.

NameTypeRequiredDefaultDescription
isExpandedboolfalseFlag to show if the expanded content of the DataList item is visible
childrennodeContent 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
anyAdditional props are spread to the container <li>

DataListItemCells Props

The DataListItemCells component accepts the following props.

NameTypeRequiredDefaultDescription
classNamestring''Additional classes added to the DataList item Content Wrapper. Children should be one ore more <DataListCell> nodes
dataListCellsarrayOfArray of <DataListCell> nodes that are rendered one after the other.
anyAdditional props are spread to the container <div>

DataListItemRow Props

The DataListItemRow component accepts the following props.

NameTypeRequiredDefaultDescription
childrenunionContent rendered inside the DataList item Row. Can be <DataListItemCells>, <DataListAction>, <DataListCheck> or <DataListToggle>
classNamestring''Additional classes added to the DataList item Row
anyAdditional props are spread to the container <div>

DataListToggle Props

The DataListToggle component accepts the following props.

NameTypeRequiredDefaultDescription
classNamestring''Additional classes added to the DataList cell
isExpandedboolfalseFlag to show if the expanded content of the DataList item is visible
idstringIdentify the DataList toggle number
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.
anyAdditional props are spread to the container <div>

CSS Variables

--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_BorderBottomWidth1px
--pf-c-data-list--BorderTopColorc_data_list_BorderTopColor#d2d2d2
--pf-c-data-list--BorderTopWidthc_data_list_BorderTopWidth1px
--pf-c-data-list__action--MarginTopc_data_list__action_MarginTopcalc(0.375rem * -1)
--pf-c-data-list__cell--PaddingBottomc_data_list__cell_PaddingBottom2rem
--pf-c-data-list__cell--PaddingTopc_data_list__cell_PaddingTop2rem
--pf-c-data-list__cell-cell--MarginRightc_data_list__cell_cell_MarginRight2rem
--pf-c-data-list__cell-cell--PaddingTopc_data_list__cell_cell_PaddingTop0
--pf-c-data-list__cell-cell--md--PaddingTopc_data_list__cell_cell_md_PaddingTop2rem
--pf-c-data-list__cell--m-icon--MarginRightc_data_list__cell_m_icon_MarginRight1rem
--pf-c-data-list__cell--md--PaddingBottomc_data_list__cell_md_PaddingBottom0
--pf-c-data-list__expandable-content--BorderTopColorc_data_list__expandable_content_BorderTopColor#ededed
--pf-c-data-list__expandable-content--BoxShadowc_data_list__expandable_content_BoxShadow0 0.3125rem 0.625rem -0.25rem rgba(3,3,3,.25)
--pf-c-data-list__expandable-content--MarginLeftc_data_list__expandable_content_MarginLeftcalc(2rem * -1)
--pf-c-data-list__expandable-content--MarginRightc_data_list__expandable_content_MarginRightcalc(2rem * -1)
--pf-c-data-list__expandable-content-body--PaddingBottomc_data_list__expandable_content_body_PaddingBottom2rem
--pf-c-data-list__expandable-content-body--PaddingLeftc_data_list__expandable_content_body_PaddingLeft2rem
--pf-c-data-list__expandable-content-body--PaddingRightc_data_list__expandable_content_body_PaddingRight2rem
--pf-c-data-list__expandable-content-body--PaddingTopc_data_list__expandable_content_body_PaddingTop2rem
--pf-c-data-list__expandable-content-body--md--PaddingBottomc_data_list__expandable_content_body_md_PaddingBottom1rem
--pf-c-data-list__expandable-content-body--md--PaddingLeftc_data_list__expandable_content_body_md_PaddingLeft1rem
--pf-c-data-list__expandable-content-body--md--PaddingRightc_data_list__expandable_content_body_md_PaddingRight1rem
--pf-c-data-list__expandable-content-body--md--PaddingTopc_data_list__expandable_content_body_md_PaddingTop1rem
--pf-c-data-list__expandable-content--md--MaxHeightc_data_list__expandable_content_md_MaxHeight37.5rem
--pf-c-data-list__item-action--MarginLeftc_data_list__item_action_MarginLeft2rem
--pf-c-data-list__item-action--PaddingBottomc_data_list__item_action_PaddingBottom2rem
--pf-c-data-list__item-action--PaddingTopc_data_list__item_action_PaddingTop2rem
--pf-c-data-list__item-action--md--MarginLeftc_data_list__item_action_md_MarginLeft1rem
--pf-c-data-list__item-action--not-last-child--MarginRightc_data_list__item_action_not_last_child_MarginRight1rem
--pf-c-data-list__item-action--not-last-child--lg--MarginBottomc_data_list__item_action_not_last_child_lg_MarginBottom1rem
--pf-c-data-list__item--before--BackgroundColorc_data_list__item_before_BackgroundColor#06c
--pf-c-data-list__item--before--Heightc_data_list__item_before_Heightcalc(100% + 1px)
--pf-c-data-list__item--before--Topc_data_list__item_before_Topcalc(1px * -1)
--pf-c-data-list__item--before--Transitionc_data_list__item_before_Transitionall 250ms cubic-bezier(0.42,0,0.58,1)
--pf-c-data-list__item--before--Widthc_data_list__item_before_Width3px
--pf-c-data-list__item--before--ZIndexc_data_list__item_before_ZIndex500
--pf-c-data-list__item-content--PaddingBottomc_data_list__item_content_PaddingBottom2rem
--pf-c-data-list__item-control--MarginRightc_data_list__item_control_MarginRight2rem
--pf-c-data-list__item-control--PaddingBottomc_data_list__item_control_PaddingBottom2rem
--pf-c-data-list__item-control--PaddingTopc_data_list__item_control_PaddingTop2rem
--pf-c-data-list__item-control--md--MarginRightc_data_list__item_control_md_MarginRight1rem
--pf-c-data-list__item-control--not-last-child--MarginRightc_data_list__item_control_not_last_child_MarginRight1rem
--pf-c-data-list__item-item--BorderTopColorc_data_list__item_item_BorderTopColor#d2d2d2
--pf-c-data-list__item-item--BorderTopWidthc_data_list__item_item_BorderTopWidth1px
--pf-c-data-list__item-item--before--Heightc_data_list__item_item_before_Heightcalc(100% + 1px)
--pf-c-data-list__item-item--before--Topc_data_list__item_item_before_Topcalc(1px * -1)
--pf-c-data-list__item-item--sm--BorderTopWidthc_data_list__item_item_sm_BorderTopWidth0.5rem
--pf-c-data-list__item--m-expanded__expandable-content--BorderTopWidthc_data_list__item_m_expanded__expandable_content_BorderTopWidth1px
--pf-c-data-list__item--m-expanded__toggle--c-button--Transformc_data_list__item_m_expanded__toggle_c_button_Transformrotate(90deg)
--pf-c-data-list__item--m-expanded--before--BackgroundColorc_data_list__item_m_expanded_before_BackgroundColor#06c
--pf-c-data-list__item-row--PaddingLeftc_data_list__item_row_PaddingLeft2rem
--pf-c-data-list__item-row--PaddingRightc_data_list__item_row_PaddingRight2rem
--pf-c-data-list__item-row--md--PaddingLeftc_data_list__item_row_md_PaddingLeft1rem
--pf-c-data-list__item-row--md--PaddingRightc_data_list__item_row_md_PaddingRight1rem
--pf-c-data-list__toggle--MarginLeftc_data_list__toggle_MarginLeftcalc(0.5rem * -1)
--pf-c-data-list__toggle--MarginTopc_data_list__toggle_MarginTopcalc(0.375rem * -1)
--pf-c-data-list__toggle--c-button--Transformc_data_list__toggle_c_button_Transformrotate(90deg)
--pf-c-data-list__toggle--c-button--Transitionc_data_list__toggle_c_button_Transitionall 250ms cubic-bezier(0.42,0,0.58,1)
--pf-c-data-list--sm--BorderTopWidthc_data_list_sm_BorderTopWidth0.5rem