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

Copied to clipboard

Data list checkboxes, actions and additional cells

Copied to clipboard

Data list actions: single and multiple

Copied to clipboard

Data list expandable

Copied to clipboard

Data list width modifiers

Copied to clipboard

Props

DataListAction props

The DataListAction component accepts the following props.

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 props

The DataListCell component accepts the following props.

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

DataList props

The DataList component accepts the following props.

NameTypeRequiredDefaultDescription
childrenReact.ReactNodenull
classNamestring''
aria-labelstring

DataListCheck props

The DataListCheck component accepts the following props.

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

DataListContent props

The DataListContent component accepts the following props.

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

DataListItem props

The DataListItem component accepts the following props.

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 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
dataListCellsReact.ReactNodeArray of <DataListCell> nodes that are rendered one after the other.
rowidstring''Id for the row

DataListToggle props

The DataListToggle component accepts the following props.

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.

DataListItemRow props

The DataListItemRow component accepts the following props.

NameTypeRequiredDefaultDescription
childrenReact.ReactNode
classNamestring''
rowidstring''

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_BorderBottomWidth0
--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_PaddingBottom1.5rem
--pf-c-data-list__cell--PaddingTopc_data_list__cell_PaddingTop1.5rem
--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_PaddingTop1.5rem
--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#d2d2d2
--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(1.5rem * -1)
--pf-c-data-list__expandable-content--MarginRightc_data_list__expandable_content_MarginRightcalc(1.5rem * -1)
--pf-c-data-list__expandable-content-body--PaddingBottomc_data_list__expandable_content_body_PaddingBottom1.5rem
--pf-c-data-list__expandable-content-body--PaddingLeftc_data_list__expandable_content_body_PaddingLeft1.5rem
--pf-c-data-list__expandable-content-body--PaddingRightc_data_list__expandable_content_body_PaddingRight1.5rem
--pf-c-data-list__expandable-content-body--PaddingTopc_data_list__expandable_content_body_PaddingTop1.5rem
--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--Displayc_data_list__item_action_Displayflex
--pf-c-data-list__item-action--MarginLeftc_data_list__item_action_MarginLeft2rem
--pf-c-data-list__item-action--PaddingBottomc_data_list__item_action_PaddingBottom1.5rem
--pf-c-data-list__item-action--PaddingTopc_data_list__item_action_PaddingTop1.5rem
--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_Heightinitial
--pf-c-data-list__item--before--Topc_data_list__item_before_Top0
--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_PaddingBottom1.5rem
--pf-c-data-list__item-control--MarginRightc_data_list__item_control_MarginRight2rem
--pf-c-data-list__item-control--PaddingBottomc_data_list__item_control_PaddingBottom1.5rem
--pf-c-data-list__item-control--PaddingTopc_data_list__item_control_PaddingTop1.5rem
--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_Heightinitial
--pf-c-data-list__item-item--before--Topc_data_list__item_item_before_Topcalc(1px * -1)
--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_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-icon--Transformc_data_list__item_m_expanded__toggle_c_button_icon_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_PaddingLeft1.5rem
--pf-c-data-list__item-row--PaddingRightc_data_list__item_row_PaddingRight1.5rem
--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-icon--Transitionc_data_list__toggle_icon_Transition.2s ease-in 0s
--pf-c-data-list--sm--BorderTopColorc_data_list_sm_BorderTopColor#ededed
--pf-c-data-list--sm--BorderTopWidthc_data_list_sm_BorderTopWidth0.5rem