HTML

Table

ExamplesDocumentationCSS variables

Examples

Simple table

Copied to clipboard

Sortable table

Copied to clipboard

Table with checkboxes and actions

Copied to clipboard

Expandable table

Copied to clipboard

Table with compound expansion

Copied to clipboard

Compact table

Copied to clipboard

Compact table with no borders

Copied to clipboard

Compact expandable table

Copied to clipboard

Table with width modifiers

Copied to clipboard

Table with hidden/visible breakpoint modifiers

Copied to clipboard

Table with headers that wrap

Copied to clipboard

Documentation

Overview

Because the table component is not used for layout and presents tabular data only, it requires the use of role="grid". Expandable table content (.pf-c-table__expandable-content) is placed within a singular <td> per expandable row, that can span multiple columns.

Role="grid"

Applying role="grid" to tables enhances accessible interaction while in table layout, however the responsive, css grid based layout can cause unexpected interactions. Therefore, for css grid layout, it is recommended that role="grid" be removed.

Sortable tables

Table columns may shift when expanding/collapsing. To address this, set .pf-m-fit-content, or assign a width .pf-m-width-[width] to the corresponding <th> defining the column or <td> within the column. Width values are [10, 15, 20, 25, 30, 35, 40, 45, 50, 60, 70, 80, 90] or max.

Table header cells

By default, all table header cells are set to white-space: nowrap. If a <th>'s content needs to wrap, apply .pf-m-wrap.

Implementation support

  • One expandable toggle button, positioned in the first cell of a non-expandable row, preceding an expandable row.
  • One checkbox, positioned in the first or second cell of a non-expandable row.
  • One action button, positioned in the last cell of a non-expandable row.
  • Tabular data.
  • Compact presentation modifier (not compatible with expandable table).

Responsive layout modifiers

Class Applied to Outcome
.pf-m-grid-md, .pf-m-grid-lg, .pf-m-grid-xl, .pf-m-grid-2xl .pf-c-table Changes tabular layout to responsive, grid based layout at suffixed breakpoint.
.pf-m-grid .pf-c-table Changes tabular layout to responsive, grid based layout. This approach requires JavaScript to set this class at some prescribed viewport width value.

CSS variables

--pf-c-table--BackgroundColorc_table_BackgroundColor#fff
--pf-c-table--BorderColorc_table_BorderColortransparent
--pf-c-table--BorderWidthc_table_BorderWidth0
--pf-c-table--FontWeightc_table_FontWeight700
--pf-c-table__action--PaddingBottomc_table__action_PaddingBottom0
--pf-c-table__action--PaddingLeftc_table__action_PaddingLeft0.5rem
--pf-c-table__action--PaddingRightc_table__action_PaddingRight0.5rem
--pf-c-table__action--PaddingTopc_table__action_PaddingTop0
--pf-c-table__action--responsive--MarginLeftc_table__action_responsive_MarginLeft2rem
--pf-c-table__check--input--MarginTopc_table__check_input_MarginTop0.1875rem
--pf-c-table__check--responsive--MarginLeftc_table__check_responsive_MarginLeft0.5rem
--pf-c-table__check--responsive--MarginTopc_table__check_responsive_MarginTop0.375rem
--pf-c-table__compound-expansion-toggle--BorderBottom--BorderColorc_table__compound_expansion_toggle_BorderBottom_BorderColor#fff
--pf-c-table__compound-expansion-toggle--BorderBottom--BorderWidthc_table__compound_expansion_toggle_BorderBottom_BorderWidth1px
--pf-c-table__compound-expansion-toggle--BorderLeft--BorderColorc_table__compound_expansion_toggle_BorderLeft_BorderColor#d2d2d2
--pf-c-table__compound-expansion-toggle--BorderLeft--BorderWidthc_table__compound_expansion_toggle_BorderLeft_BorderWidth1px
--pf-c-table__compound-expansion-toggle--BorderRight--BorderColorc_table__compound_expansion_toggle_BorderRight_BorderColor#d2d2d2
--pf-c-table__compound-expansion-toggle--BorderRight--BorderWidthc_table__compound_expansion_toggle_BorderRight_BorderWidth1px
--pf-c-table__compound-expansion-toggle--BorderTop--BorderColorc_table__compound_expansion_toggle_BorderTop_BorderColor#06c
--pf-c-table__compound-expansion-toggle--BorderTop--BorderWidthc_table__compound_expansion_toggle_BorderTop_BorderWidth3px
--pf-c-table__expandable-row--MaxHeightc_table__expandable_row_MaxHeight28.125rem
--pf-c-table__expandable-row--Transitionc_table__expandable_row_Transitionall 250ms cubic-bezier(0.42,0,0.58,1)
--pf-c-table__expandable-row--before--BackgroundColorc_table__expandable_row_before_BackgroundColor#06c
--pf-c-table__expandable-row--before--Bottomc_table__expandable_row_before_Bottomcalc(1px * -1)
--pf-c-table__expandable-row--before--Topc_table__expandable_row_before_Topcalc(1px * -1)
--pf-c-table__expandable-row--before--Widthc_table__expandable_row_before_Width3px
--pf-c-table__expandable-row--before--ZIndexc_table__expandable_row_before_ZIndex200
--pf-c-table__expandable-row-content--BackgroundColorc_table__expandable_row_content_BackgroundColor#fff
--pf-c-table__expandable-row-content--PaddingBottomc_table__expandable_row_content_PaddingBottom1.5rem
--pf-c-table__expandable-row-content--PaddingTopc_table__expandable_row_content_PaddingTop1.5rem
--pf-c-table__expandable-row-content--Transitionc_table__expandable_row_content_Transitionall 250ms cubic-bezier(0.42,0,0.58,1)
--pf-c-table__expandable-row-content--responsive--PaddingLeftc_table__expandable_row_content_responsive_PaddingLeft1.5rem
--pf-c-table__expandable-row-content--responsive--PaddingRightc_table__expandable_row_content_responsive_PaddingRight1.5rem
--pf-c-table__expandable-row--m-expanded--BorderBottomColorc_table__expandable_row_m_expanded_BorderBottomColor#fff
--pf-c-table__expandable-row--m-expanded--BoxShadowc_table__expandable_row_m_expanded_BoxShadow0 0.3125rem 0.625rem -0.25rem rgba(3,3,3,.25)
--pf-c-table__icon-inline--MarginRightc_table__icon_inline_MarginRight0.5rem
--pf-c-table__sort--c-button--Colorc_table__sort_c_button_Color#151515
--pf-c-table__sort-indicator--Colorc_table__sort_indicator_Color#d2d2d2
--pf-c-table__sort-indicator--MarginLeftc_table__sort_indicator_MarginLeft1rem
--pf-c-table__sort-indicator--hover--Colorc_table__sort_indicator_hover_Color#151515
--pf-c-table__sort--sorted--Colorc_table__sort_sorted_Color#06c
--pf-c-table__toggle__icon--Transitionc_table__toggle__icon_Transition.2s ease-in 0s
--pf-c-table__toggle--c-button--MarginTopc_table__toggle_c_button_MarginTop-0.375rem
--pf-c-table__toggle--c-button__toggle-icon--Transformc_table__toggle_c_button__toggle_icon_Transformrotate(270deg)
--pf-c-table__toggle--c-button__toggle-icon--Transitionc_table__toggle_c_button__toggle_icon_Transition.2s ease-in 0s
--pf-c-table__toggle--c-button--m-expanded__toggle-icon--Transformc_table__toggle_c_button_m_expanded__toggle_icon_Transformrotate(360deg)
--pf-c-table__toggle--m-expanded__icon--Transformc_table__toggle_m_expanded__icon_Transformrotate(180deg)
--pf-c-table--m-compact--FontSizec_table_m_compact_FontSize0.875rem
--pf-c-table--m-compact__expandable-row-content--PaddingBottomc_table_m_compact__expandable_row_content_PaddingBottom1.5rem
--pf-c-table--m-compact__expandable-row-content--PaddingLeftc_table_m_compact__expandable_row_content_PaddingLeft1.5rem
--pf-c-table--m-compact__expandable-row-content--PaddingRightc_table_m_compact__expandable_row_content_PaddingRight1.5rem
--pf-c-table--m-compact__expandable-row-content--PaddingTopc_table_m_compact__expandable_row_content_PaddingTop1.5rem
--pf-c-table--m-compact__toggle--PaddingBottomc_table_m_compact__toggle_PaddingBottom0
--pf-c-table--m-compact__toggle--PaddingTopc_table_m_compact__toggle_PaddingTop0
--pf-c-table--m-compact-cell--PaddingBottomc_table_m_compact_cell_PaddingBottom1rem
--pf-c-table--m-compact-cell--PaddingLeftc_table_m_compact_cell_PaddingLeft0.5rem
--pf-c-table--m-compact-cell--PaddingRightc_table_m_compact_cell_PaddingRight0.5rem
--pf-c-table--m-compact-cell--PaddingTopc_table_m_compact_cell_PaddingTop1rem
--pf-c-table--m-compact-cell--first-last-child--PaddingLeftc_table_m_compact_cell_first_last_child_PaddingLeft1.5rem
--pf-c-table--m-compact-cell--first-last-child--PaddingRightc_table_m_compact_cell_first_last_child_PaddingRight1.5rem
--pf-c-table--m-compact-th--PaddingBottomc_table_m_compact_th_PaddingBottom1rem
--pf-c-table--m-compact-th--PaddingTopc_table_m_compact_th_PaddingTop1rem
--pf-c-table--m-compact-tr-td--responsive--PaddingBottomc_table_m_compact_tr_td_responsive_PaddingBottom0.5rem
--pf-c-table--m-compact-tr-td--responsive--PaddingTopc_table_m_compact_tr_td_responsive_PaddingTop0.5rem
--pf-c-table--nested--first-last-child--PaddingLeftc_table_nested_first_last_child_PaddingLeft4rem
--pf-c-table--nested--first-last-child--PaddingRightc_table_nested_first_last_child_PaddingRight4rem
--pf-c-table--responsive--BorderColorc_table_responsive_BorderColor#ededed