HTML

Table

ExamplesDocumentationCSS Variables

Examples

Simple table

This is the table caption
Repositories Branches Pull requests Workspaces Last Commit
Repository 1 10 25 5 2 days ago
Repository 2 10 25 5 2 days ago
Repository 3 10 25 5 2 days ago
Repository 4 10 25 5 2 days ago
Copied to clipboard

Sortable table

Workspaces Last Commit
Repository 1 10 25 5 2 days ago
Repository 2 10 25 5 2 days ago
Repository 3 10 25 5 2 days ago
Repository 4 10 25 5 2 days ago
Copied to clipboard

Table with checkboxes and actions

Repositories Branches Pull requests Workspaces Last Commit
Node 1
10 25 5 2 days ago
10 25 5 2 days ago
10 25 5 2 days ago
10 25 5 2 days ago
Copied to clipboard

Expandable table

10 25 Link 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
10 25 Link 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
10 25 Link 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
10 25 Link 4
Expandable row content has no padding.
Copied to clipboard

Table with compound expansion

Work Spaces Last Commit
siemur/test-space 20 minutes Open in Github
Date Status
Item One May 9, 2018 Active
Item Two May 9, 2018 Warning
Item Three May 9, 2018 Active
Item Four May 9, 2018 Active
Item Five May 9, 2018 Active
Date Status
Item One May 9, 2018 Active
Item Two May 9, 2018 Warning
Item Three May 9, 2018 Active
Item Four May 9, 2018 Active
Item Five May 9, 2018 Active
Date Status
Item One May 9, 2018 Active
Item Two May 9, 2018 Warning
Item Three May 9, 2018 Active
Item Four May 9, 2018 Active
Item Five May 9, 2018 Active
siemur/test-space 1 day ago Open in Github
Date Status
Item One May 9, 2018 Active
Item Two May 9, 2018 Warning
Item Three May 9, 2018 Active
Item Four May 9, 2018 Active
Item Five May 9, 2018 Active
Date Status
Item One May 9, 2018 Active
Item Two May 9, 2018 Warning
Item Three May 9, 2018 Active
Item Four May 9, 2018 Active
Item Five May 9, 2018 Active
Date Status
Item One May 9, 2018 Active
Item Two May 9, 2018 Warning
Item Three May 9, 2018 Active
Item Four May 9, 2018 Active
Item Five May 9, 2018 Active
siemur/test-space 2 days ago Open in Github
Date Status
Item One May 9, 2018 Active
Item Two May 9, 2018 Warning
Item Three May 9, 2018 Active
Item Four May 9, 2018 Active
Item Five May 9, 2018 Active
Date Status
Item One May 9, 2018 Active
Item Two May 9, 2018 Warning
Item Three May 9, 2018 Active
Item Four May 9, 2018 Active
Item Five May 9, 2018 Active
Date Status
Item One May 9, 2018 Active
Item Two May 9, 2018 Warning
Item Three May 9, 2018 Active
Item Four May 9, 2018 Active
Item Five May 9, 2018 Active
Copied to clipboard

Compact table

Contributor Position Location Last Seen Numbers Icons
Sam Jones CSS Guru Not too sure May 9, 2018 0556 Action Link
Amy Miller Visual Design Raleigh May 9, 2018 9492 Action Link
Steve Wilson Visual Design Lead Westford May 9, 2018 9929 Action Link
Emma Jackson Interaction Design Westford May 9, 2018 2217 Action Link
Copied to clipboard

Compact table with no borders

Contributor Position Location Last Seen Numbers Icons
Sam Jones CSS Guru Not too sure May 9, 2018 0556 Action Link
Amy Miller Visual Design Raleigh May 9, 2018 9492 Action Link
Steve Wilson Visual Design Lead Westford May 9, 2018 9929 Action Link
Emma Jackson Interaction Design Westford May 9, 2018 2217 Action Link
Copied to clipboard

Compact expandable table

Repositories Branches Pull requests

Node 1

10 25 Link
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Node 2

10 25 Link
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Node 3

10 25 Link
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Node 4

10 25 Link
This content has no padding.

Node 5

10 25 Link
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Copied to clipboard

Table with width modifiers

Workspaces Last Commit
Node 1
10 25 5 2 days ago
10 25 5 2 days ago
10 25 5 2 days ago
10 25 5 2 days ago
Copied to clipboard

Table with hidden/visible breakpoint modifiers

Repositories Branches Pull requests Workspaces Last Commit
Visible only on md breakpoint 10 Hidden only on md breakpoint 5 Hidden on xs breakpoint
Repository 2 10 25 5 2 days ago
Repository 3 10 25 5 2 days ago
Repository 4 10 25 5 2 days ago
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-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.

Extra modifiers

Class Applied To Outcome
.pf-m-wrap <th>, <td> Modifies content to wrap.

CSS Variables

--pf-c-table--BackgroundColorc_table_BackgroundColor#fff
--pf-c-table--BorderColorc_table_BorderColortransparent
--pf-c-table--BorderWidthc_table_BorderWidth0
--pf-c-table--FontFamilyc_table_FontFamilyoverpass,overpass,open sans,-apple-system,blinkmacsystemfont,Segoe UI,roboto,Helvetica Neue,arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol
--pf-c-table--FontWeightc_table_FontWeight400
--pf-c-table--LineHeightc_table_LineHeight1.5
--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--c-button--MarginTopc_table__toggle_c_button_MarginTop-0.375rem
--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_PaddingLeft2rem
--pf-c-table--m-compact-cell--first-last-child--PaddingRightc_table_m_compact_cell_first_last_child_PaddingRight2rem
--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