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

Table with headers that wrap

Copied to clipboard

Props

TableBody props

The TableBody component accepts the following props.

NameTypeRequiredDefaultDescription
classNamestring'' as string
childrenReact.ReactNodenull as React.ReactNode
headerDataIRow[]
rowsIRow[]
rowKeyRowKeyType'id' as string
onRowClickFunction(...args: any) => undefined as any
onRowFunction(...args: any) => Object

TableHeader props

The TableHeader component accepts the following props.

NameTypeRequiredDefaultDescription
classNamestring

Table props

The Table component accepts the following props.

NameTypeRequiredDefaultDescription
aria-labelstringundefined as string
childrenReact.ReactNodenull as React.ReactNodeContent rendered inside the Table
classNamestring''Additional classes added to the Table
variantliteralnull as TableVariant
bordersbooleantrue
gridBreakPoint'' | 'grid' | 'grid-md' | 'grid-lg' | 'grid-xl' | 'grid-2xl'TableGridBreakpoint.gridMd
sortByISortBySpecifies the initial sorting pattern for the table - asc/desc and the index of the column to sort by
onCollapse(event: React.MouseEvent, rowIndex: number, isOpen: boolean, rowData: IRowData, extraData: IExtraData) => voidFunction triggered when an expandable content is collapsed. When this is used, one expandable toggle button will be positioned in the first cell of a non-expandable row, preceding an expandable row
onExpand(event: React.MouseEvent, rowIndex: number, colIndex: number, isOpen: boolean, rowData: IRowData, extraData: IExtraData) => voidFunction triggered when a compound expandable item is clicked
onSelect(event: React.MouseEvent, isSelected: boolean, rowIndex: number, rowData: IRowData, extraData: IExtraData) => voidFunction triggered when a row's checkbox is selected. When this is used, one checkbox will be positioned in the first or second cell of a non-expandable row
canSelectAllbooleantrue
onSort(event: React.MouseEvent, columnIndex: number, sortByDirection: SortByDirection, extraData: IExtraColumnData) => voidFunction triggered when sort icon is clicked
actions(IAction | ISeparator)[]
actionResolver(rowData: IRowData, extraData: IExtraData) => (IAction | ISeparator)[]
areActionsDisabled(rowData: IRowData, extraData: IExtraData) => booleanSpecifies if the Kebab for actions is disabled
headerReact.ReactNodeundefined as React.ReactNode
captionReact.ReactNodeundefined as React.ReactNode
rowLabeledBystring'simple-node'
expandIdstring'expandable-toggle'
contentIdstring'expanded-content'
dropdownPosition'right' | 'left'DropdownPosition.rightThe desired position to show the dropdown when clicking on the actions Kebab. Can only be used together with `actions` property
dropdownDirection'up' | 'down'DropdownDirection.downThe desired direction to show the dropdown when clicking on the actions Kebab. Can only be used together with `actions` property
rows(IRow | string[])[]
cells(ICell | string)[]
bodyWrapperFunction
rowWrapperFunction
rolestring'grid'A valid WAI-ARIA role to be applied to the table element

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