React

Table

A table is used to display large data sets that can be easily laid out in a simple grid with column headers. Related design guidelines: Lists and tables

ExamplesPropsCSS Variables

Examples

Note: Table lives in its own package at @patternfly/react-table!

Simple table

Simple Table
RepositoriesBranchesPull requestsWorkspacesLast Commit
onetwothreefourfive
one - 2
four - 2five - 2
one - 3two - 3three - 3four - 3five - 3 (not centered)
Copied to clipboard

Sortable table

Sortable Table
BranchesWorkspacesLast Commit
onetwoafourfive
atwokfourfive
ptwobfourfive
Copied to clipboard

Selectable table

Selectable Table
RepositoriesBranchesPull requestsWorkspacesLast Commit
one
twoafourfive
a
twokfourfive
p
twobfourfive
Copied to clipboard

Simple actions table

Actions Table
RepositoriesBranchesPull requestsWorkspacesLast Commit
one
twoafourfive
a
twokfourfive
p
twobfourfive
Copied to clipboard

Actions table

Actions Table
RepositoriesBranchesPull requestsWorkspacesLast Commit
one
twoafourfive
a
twokfourfive
p
twobfourfive
5
2bfourfive
Copied to clipboard

First cell as header table

First cell as Header
Header cellBranchesPull requestsWorkspacesLast Commit
one
twothreefourfive
Copied to clipboard

Compact table

Compact Table
Header cellBranchesPull requests
onetwothreefour
onetwothreefour
onetwothreefour
Copied to clipboard

Compact table borderless rows

Compact Table with border
Header cellBranchesPull requests
onetwothreefour
onetwothreefour
onetwothreefour
Copied to clipboard

Compact expandable table

Compact expandable table
Header cellBranchesPull requests
onetwothreefour
parent - 1twothreefour
child - 1
parent - 2twothreefour
parent - 3twothreefour
Copied to clipboard

Table with width modifiers

Table with Width Modifiers
Header cellBranchesPull requestsWorkspacesLast Commit
onetwothreefourfive
Copied to clipboard

Table with hidden/visible breakpoint modifiers

Table with hidden/visible breakpoint modifiers
RepositoriesBranchesPull requestsWorkspacesLast Commit
Visible only on md breakpoint10Hidden only on md breakpoint5Hidden on xs breakpoint
Repository 2102552 days ago
Repository 3102552 days ago
Repository 4102552 days ago
Copied to clipboard

Collapsible table

Collapsible table
Header cellBranchesPull requestsWorkspacesLast Commit
one
twothreefourfive
parent - 1
twothreefourfive
child - 1
parent - 2
twothreefourfive
parent - 3
twothreefourfive
Copied to clipboard

Compound Expandable table

Compound expandable table
RepositoriesBranchesPull requestsWorkspacesLast Commit
siemur/test-space20 minutesOpen in Github
BranchesWorkspacesLast Commit
parent-0compound-1threefourfive
atwokfourfive
ptwobfourfive
siemur/test-space20 minutesOpen in Github
Copied to clipboard

Props

TableBody Props

The TableBody component accepts the following props.

NameTypeRequiredDefaultDescription
classNamestring''Additional classes for table body.
rowKeystring'id'Specify key which should be used for labeling each row.
onRowClickfunc() => undefinedFunction that is fired when user clicks on row.

TableHeader Props

The TableHeader component accepts the following props.

NameTypeRequiredDefaultDescription
classNamestring''Additional classes for header.

Table Props

The Table component accepts the following props.

NameTypeRequiredDefaultDescription
childrennodenullTable elements [Head, Body and Footer].
classNamestring''Addional classes for Table.
onCollapsefuncnullFunction called when user wants to collapse row.
onExpandfuncnullFunction called when user wants to compound expand row.
variantenumnullTable variant, defaults to large.
gridBreakPointenum'grid-md'Size at which table is broken into tiles.
bordersbooltrueIndicates if border is visible on a compacat table. Note that this can not be applied when using expandable
sortByshapeSettings for sorting, which index and direction is sorted by.
onSelectfuncFunction called when user wants to select row.
onSortfuncFunction called when user wants to sort table.
actionsarrayOfAdditional cell displayed at the end of each row with dropdown of action items.
actionResolverfuncFunction should resolve an array of actions for each row in the same format as actions.
areActionsDisabledfuncFunction should resolve if action kebap is disabled for each row
bodyWrapperfuncOverride to the default BodyWrapper renderer
rowWrapperfuncOverride to the default RowWrapper renderer
rowsarrayOfActual rows to display in table. Either array of strings or row objects. <br/> If you want to use components in row cells you can pass them as title prop in cells definition. <br/> <pre>Ex: rows:[ {cells:[ {title: &lt;div>Some component&lt;/div>} ... ]} ] </pre>
cellsarrayOfHeader cells to display in table. Either array of strings or array of string or cell object.
rowLabeledBystring'simple-node'Aria labeled by this property collapse and select.
expandIdstring'expandable-toggle'Id prefix for expand buttons.
contentIdstring'expanded-content'Id prefix for expanded content.
dropdownPositionenumDropdownPosition.rightPosition of dropdown from actions will be displayed.
dropdownDirectionenumDropdownDirection.downDirection of from actions will be displayed.
headercustomHeader to display above table for accessibility reasons.
captioncustomCaption to display in table for accessibility reasons.
aria-labelcustomaria-label in table for accessibility reasons.

DemoSortableTable Props

The DemoSortableTable component accepts the following props.

NameTypeRequiredDefaultDescription
firstColumnRowsarray
idstring

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