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

Copied to clipboard

Sortable table

Copied to clipboard

Selectable table

Copied to clipboard

Simple actions table

Copied to clipboard

Actions table

Copied to clipboard

First cell as header table

Copied to clipboard

Compact table

Copied to clipboard

Compact table borderless rows

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

Collapsible table

Copied to clipboard

Compound Expandable table

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
sortByshapeundefinedSettings for sorting, which index and direction is sorted by.
onSelectfuncundefinedFunction called when user wants to select row.
onSortfuncundefinedFunction called when user wants to sort table.
actionsarrayOfundefinedAdditional cell displayed at the end of each row with dropdown of action items.
actionResolverfuncundefinedFunction should resolve an array of actions for each row in the same format as actions.
areActionsDisabledfuncundefinedFunction should resolve if action kebap is disabled for each row
bodyWrapperfuncundefinedOverride to the default BodyWrapper renderer
rowWrapperfuncundefinedOverride 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.
headercustomundefinedHeader to display above table for accessibility reasons.
captioncustomundefinedCaption to display in table for accessibility reasons.
aria-labelcustomundefinedaria-label in table for accessibility reasons.
rolestring'grid'

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_FontWeight600
--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