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.ReactNode
classNamestring''
variantliteralnull as TableVariant
bordersbooleantrue
gridBreakPoint'' | 'grid' | 'grid-md' | 'grid-lg' | 'grid-xl' | 'grid-2xl'TableGridBreakpoint.gridMd
sortByISortBy
onCollapse(event: React.MouseEvent, rowIndex: number, isOpen: boolean, rowData: IRowData, extraData: IExtraData) => void
onExpand(event: React.MouseEvent, rowIndex: number, colIndex: number, isOpen: boolean, rowData: IRowData, extraData: IExtraData) => void
onSelect(event: React.MouseEvent, isSelected: boolean, rowIndex: number, rowData: IRowData, extraData: IExtraData) => void
onSort(event: React.MouseEvent, columnIndex: number, sortByDirection: SortByDirection, extraData: IExtraColumnData) => void
actions(IAction | ISeparator)[]
actionResolver(rowData: IRowData, extraData: IExtraData) => (IAction | ISeparator)[]
areActionsDisabled(rowData: IRowData, extraData: IExtraData) => boolean
headerReact.ReactNodeundefined as React.ReactNode
captionReact.ReactNodeundefined as React.ReactNode
rowLabeledBystring'simple-node'
expandIdstring'expandable-toggle'
contentIdstring'expanded-content'
dropdownPosition'right' | 'left'DropdownPosition.right
dropdownDirection'up' | 'down'DropdownDirection.down
rows(IRow | string[])[]
cells(ICell | string)[]
bodyWrapperFunction
rowWrapperFunction
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_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