HTML

Data list

ExamplesDocumentationCSS variables

Examples

Data list simple

Copied to clipboard

Data list simple with headings

Copied to clipboard

Data list checkboxes, actions and additional cells

Copied to clipboard

Data list expandable

Copied to clipboard

Data list width modifiers

Copied to clipboard

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.

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