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

Examples Props CSS Variables

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

Examples

Basic

Repositories	Branches	Pull requests	Workspaces	Last Commit
one	two	three	four	five
one - 2			four - 2	five - 2
one - 3	two - 3	three - 3	four - 3	five - 3 (not centered)

Row click handler

Row Click Handler Table
Repositories	Branches	Pull requests	Workspaces
Repositories one	Branches one	Pull requests one	Workspaces one
Repositories two	Branches two	Pull requests two	Workspaces two
Repositories three	Branches three	Pull requests three	Workspaces three

Custom row wrapper

Table with custom row wrapper that styles odd rows
Repositories	Branches	Pull requests	Workspaces
Repositories one	Branches one	Pull requests one	Workspaces one
Repositories two	Branches two	Pull requests two	Workspaces two
Repositories three	Branches three	Pull requests three	Workspaces three

Sortable

	Branches		Workspaces	Last Commit
one	two	a	four	five
a	two	k	four	five
p	two	b	four	five

Sortable with wrapping headers


one	two	a	four	five
a	two	k	four	five
p	two	b	four	five

Simple actions

Repositories	Branches	Pull requests	Workspaces	Last Commit
one	two	a	four	five
a	two	k	four	five
p	two	b	four	five

Actions

Repositories	Branches	Pull requests	Workspaces	Last Commit
one	two	a	four	five
a	two	k	four	five
p	two	b	four	five
5	2	b	four	five

First cell as header

Header cell	Branches	Pull requests	Workspaces	Last Commit
one	two	three	four	five

Compact

Header cell	Branches	Pull requests
one	two	three	four
one	two	three	four
one	two	three	four

Compact borderless rows

Header cell	Branches	Pull requests
one	two	three	four
one	two	three	four
one	two	three	four

Compact expandable

	Header cell	Branches	Pull requests
	one	two	three	four
	parent - 1	two	three	four
child - 1
	parent - 2	two	three	four
	child - 2
	parent - 3	two	three	four
child - 3

With width modifiers

Header cell	Branches	Pull requests	Workspaces	Last Commit
one	two	three	four	five

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

Collapsible

	Header cell	Branches	Pull requests	Workspaces	Last Commit
	one	two	three	four	five
	parent - 1	two	three	four	five
child - 1
	parent - 2	two	three	four	five
	child - 2
	parent - 3	two	three	four	five
child - 3

Compound expandable

Repositories

Branches

Pull requests

Workspaces

Last Commit

siemur/test-space

20 minutes

	Branches		Workspaces	Last Commit
parent-0	compound-1	three	four	five
a	two	k	four	five
p	two	b	four	five

siemur/test-space

20 minutes

Wrapping headers

This is a really long table header that goes on for a long time 1.	This is a really long table header that goes on for a long time 2.	This is a really long table header that goes on for a long time 3.	This is a really long table header that goes on for a long time 4.	This is a really long table header that goes on for a long time 5.
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

Empty state

Empty State Table Example
Repositories	Branches	Pull requests	Workspaces	Last Commit

No results found

No results match the filter criteria. Remove all filters or clear all filters to show results.

Editable rows Beta

Text input col 1	Disabled text input col 2	Text input col 3	Text input col 4
Row 1 cell 1 content	Row 1 cell 2, disabled content	Row 1 cell 3 content	Row 1 cell 4 content
Row 2 cell 1 content	Row 2 cell 2, disabled content	Row 2 cell 3 content	Row 2 cell 4 content
Row 3 cell 1 content	Row 3 cell 2, disabled content	Row 3 cell 3 content	Row 3 cell 4 content

Props

Table properties
Name	Type	Required	Default	Description
aria-label	string	No	undefined	Adds an accessible name for the Table
children	React.ReactNode	No	null	Content rendered inside the Table
className	string	No	''	Additional classes added to the Table
variant	literal	No	null	Style variant for the Table
borders	boolean	No	true	Render borders
gridBreakPoint	'' \| 'grid' \| 'grid-md' \| 'grid-lg' \| 'grid-xl' \| 'grid-2xl'	No	TableGridBreakpoint.gridMd	Specifies the grid breakpoints
sortBy	ISortBy	No		Specifies 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 ) => void	No		Function 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 ) => void	No		Function triggered when a compound expandable item is clicked
onSelect	( event: React.FormEvent<HTMLInputElement>, isSelected: boolean, rowIndex: number, rowData: IRowData, extraData: IExtraData ) => void	No		Function 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
canSelectAll	boolean	No	true	Enables or Disables the ability to select all
onRowEditBeta	( event: React.MouseEvent<HTMLButtonElement>, type: RowEditType, isEditable?: boolean, rowIndex?: number, validationErrors?: RowErrors ) => void	No		Function triggered when a row's inline edit is activated. Adds a column for inline edit when present.
onSort	( event: React.MouseEvent, columnIndex: number, sortByDirection: SortByDirection, extraData: IExtraColumnData ) => void	No		Function triggered when sort icon is clicked
actions	(IAction \| ISeparator)[]	No		Actions to add to the Table
actionResolver	(rowData: IRowData, extraData: IExtraData) => (IAction \| ISeparator)[]	No		Resolver for the given action
areActionsDisabled	(rowData: IRowData, extraData: IExtraData) => boolean	No		Specifies if the Kebab for actions is disabled
header	React.ReactNode	No	undefined	Component to place in the header
caption	React.ReactNode	No	undefined	Component used for caption
rowLabeledBy	string	No	'simple-node'	label for row
expandId	string	No	'expandable-toggle'	ID for expand
contentId	string	No	'expanded-content'	ID for content
dropdownPosition	'right' \| 'left'	No	DropdownPosition.right	The desired position to show the dropdown when clicking on the actions Kebab. Can only be used together with `actions` property
dropdownDirection	'up' \| 'down'	No	DropdownDirection.down	The desired direction to show the dropdown when clicking on the actions Kebab. Can only be used together with `actions` property
rows	(IRow \| string[])[]	Yes		Row data
cells	(ICell \| string)[]	Yes		Cell data
bodyWrapper	Function	No		Wrapper for the body
rowWrapper	(props: RowWrapperProps) => JSX.Element	No		Wrapper for the row
role	string	No	'grid'	A valid WAI-ARIA role to be applied to the table element

TableHeader properties
Name	Type	Required	Default	Description
className	string	No		Additional classes added to the TableHeader

TableBody properties
Name	Type	Required	Default	Description
className	string	No	''	Additional classes added to the TableBody
children	React.ReactNode	No	null	This prop should not be set manually
headerData	IRow[]	No		This prop should not be set manually
rows	IRow[]	No		This prop should not be set manually
rowKey	RowKeyType	No	'id'	This prop should not be set manually
onRowClick	( event: React.MouseEvent, row: IRow, rowProps: IExtraRowData, computedData: IComputedData ) => void	No	(event: React.MouseEvent, row: IRow, rowProps: IExtraRowData, computedData: IComputedData) => /* eslint-enable @typescript-eslint/no-unused-vars */ undefined as OnRowClick	This prop should not be set manually
onRow	Function	No	(...args: any) => Object	This prop should not be set manually

CSS Variables


	.pf-c-table	--pf-global--Color--100		#151515
--pf-global--Color--100 --pf-global--Color--dark-100 $pf-global--Color--dark-100 $pf-color-black-900 #151515
	.pf-c-table	--pf-global--Color--200		#6a6e73
--pf-global--Color--200 --pf-global--Color--dark-200 $pf-global--Color--dark-200 $pf-color-black-600 #6a6e73
	.pf-c-table	--pf-global--BorderColor--100		#d2d2d2
--pf-global--BorderColor--100 --pf-global--BorderColor--dark-100 $pf-global--BorderColor--dark-100 $pf-color-black-300 #d2d2d2
	.pf-c-table	--pf-global--primary-color--100		#06c
--pf-global--primary-color--100 --pf-global--primary-color--dark-100 $pf-global--primary-color--dark-100 $pf-color-blue-400 #06c
	.pf-c-table	--pf-global--link--Color		#06c
--pf-global--link--Color --pf-global--link--Color--dark $pf-global--link--Color--dark $pf-global--primary-color--100 $pf-color-blue-400 #06c
	.pf-c-table	--pf-global--link--Color--hover		#004080
--pf-global--link--Color--hover --pf-global--link--Color--dark--hover $pf-global--link--Color--dark--hover $pf-global--primary-color--200 $pf-color-blue-500 #004080
	.pf-c-table	--pf-global--BackgroundColor--100		#fff
--pf-global--BackgroundColor--100 --pf-global--BackgroundColor--light-100 $pf-global--BackgroundColor--light-100 $pf-color-white #fff
	.pf-c-table	--pf-c-table--BackgroundColor		#fff
--pf-c-table--BackgroundColor --pf-global--BackgroundColor--100 $pf-global--BackgroundColor--100 $pf-color-white #fff
	.pf-c-table	--pf-c-table--BorderColor		#d2d2d2
--pf-c-table--BorderColor --pf-global--BorderColor--100 $pf-global--BorderColor--100 $pf-color-black-300 #d2d2d2
	.pf-c-table	--pf-c-table--BorderWidth		1px
--pf-c-table--BorderWidth --pf-global--BorderWidth--sm $pf-global--BorderWidth--sm 1px
	.pf-c-table	--pf-c-table-cell--FontWeight		400
--pf-c-table-cell--FontWeight --pf-global--FontWeight--normal $pf-global--FontWeight--normal 400
	.pf-c-table	--pf-c-table-caption--FontSize		0.875rem
--pf-c-table-caption--FontSize --pf-global--FontSize--sm $pf-global--FontSize--sm pf-font-prem(14px) 0.875rem
	.pf-c-table	--pf-c-table-caption--Color		#6a6e73
--pf-c-table-caption--Color --pf-global--Color--200 $pf-global--Color--200 $pf-color-black-600 #6a6e73
	.pf-c-table	--pf-c-table-caption--PaddingTop		1rem
--pf-c-table-caption--PaddingTop --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-table	--pf-c-table-caption--PaddingRight		1.5rem
--pf-c-table-caption--PaddingRight --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-table	--pf-c-table-caption--xl--PaddingRight		1rem
--pf-c-table-caption--xl--PaddingRight --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-table	--pf-c-table-caption--PaddingBottom		1rem
--pf-c-table-caption--PaddingBottom --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-table	--pf-c-table-caption--PaddingLeft		1.5rem
--pf-c-table-caption--PaddingLeft --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-table	--pf-c-table-caption--xl--PaddingLeft		1rem
--pf-c-table-caption--xl--PaddingLeft --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-table	--pf-c-table-thead--FontSize		0.875rem
--pf-c-table-thead--FontSize --pf-global--FontSize--sm $pf-global--FontSize--sm pf-font-prem(14px) 0.875rem
	.pf-c-table	--pf-c-table-thead--FontWeight		600
--pf-c-table-thead--FontWeight --pf-global--FontWeight--bold $pf-global--FontWeight--bold 600
	.pf-c-table	--pf-c-table-thead-cell--PaddingTop		1rem
--pf-c-table-thead-cell--PaddingTop --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-table	--pf-c-table-thead-cell--PaddingBottom		1rem
--pf-c-table-thead-cell--PaddingBottom --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-table	--pf-c-table-cell--hidden-visible--Display		table-cell
	.pf-c-table	--pf-c-table-tbody-cell--PaddingTop		1.5rem
--pf-c-table-tbody-cell--PaddingTop --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-table	--pf-c-table-tbody-cell--PaddingBottom		1.5rem
--pf-c-table-tbody-cell--PaddingBottom --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-table	--pf-c-table-cell--PaddingTop		1rem
--pf-c-table-cell--PaddingTop --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-table	--pf-c-table-cell--PaddingRight		1rem
--pf-c-table-cell--PaddingRight --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-table	--pf-c-table-cell--PaddingBottom		1rem
--pf-c-table-cell--PaddingBottom --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-table	--pf-c-table-cell--PaddingLeft		1rem
--pf-c-table-cell--PaddingLeft --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-table	--pf-c-table-cell--FontSize		1rem
--pf-c-table-cell--FontSize --pf-global--FontSize--md $pf-global--FontSize--md pf-font-prem(16px) 1rem
	.pf-c-table	--pf-c-table-cell--first-last-child--PaddingLeft		1.5rem
--pf-c-table-cell--first-last-child--PaddingLeft --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-table	--pf-c-table-cell--first-last-child--PaddingRight		1.5rem
--pf-c-table-cell--first-last-child--PaddingRight --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-table	--pf-c-table-cell--first-last-child--xl--PaddingLeft		1rem
--pf-c-table-cell--first-last-child--xl--PaddingLeft --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-table	--pf-c-table-cell--first-last-child--xl--PaddingRight		1rem
--pf-c-table-cell--first-last-child--xl--PaddingRight --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-table	--pf-c-table__toggle--c-button--MarginTop		calc(0.375rem * -1)
	.pf-c-table	--pf-c-table__toggle--c-button__toggle-icon--Transform		rotate(270deg)
	.pf-c-table	--pf-c-table__toggle--c-button__toggle-icon--Transition		.2s ease-in 0s
	.pf-c-table	--pf-c-table__toggle--c-button--m-expanded__toggle-icon--Transform		rotate(360deg)
	.pf-c-table	--pf-c-table--m-compact__toggle--PaddingTop		0
	.pf-c-table	--pf-c-table--m-compact__toggle--PaddingBottom		0
	.pf-c-table	--pf-c-table__check--input--MarginTop		0.1875rem
	.pf-c-table	--pf-c-table__check--input--FontSize		1rem
--pf-c-table__check--input--FontSize --pf-global--FontSize--md $pf-global--FontSize--md pf-font-prem(16px) 1rem
	.pf-c-table	--pf-c-table__action--PaddingTop		0
	.pf-c-table	--pf-c-table__action--PaddingRight		0
	.pf-c-table	--pf-c-table__action--PaddingBottom		0
	.pf-c-table	--pf-c-table__action--PaddingLeft		0
	.pf-c-table	--pf-c-table__inline-edit-action--PaddingTop		0
	.pf-c-table	--pf-c-table__inline-edit-action--PaddingRight		0
	.pf-c-table	--pf-c-table__inline-edit-action--PaddingBottom		0
	.pf-c-table	--pf-c-table__inline-edit-action--PaddingLeft		0
	.pf-c-table	--pf-c-table__expandable-row--Transition		all 250ms cubic-bezier(.42, 0, .58, 1)
--pf-c-table__expandable-row--Transition --pf-global--Transition $pf-global--Transition all 250ms cubic-bezier(.42, 0, .58, 1)
	.pf-c-table	--pf-c-table__expandable-row--before--Width		3px
--pf-c-table__expandable-row--before--Width --pf-global--BorderWidth--lg $pf-global--BorderWidth--lg 3px
	.pf-c-table	--pf-c-table__expandable-row--before--BackgroundColor		#06c
--pf-c-table__expandable-row--before--BackgroundColor --pf-global--active-color--100 $pf-global--active-color--100 $pf-color-blue-400 #06c
	.pf-c-table	--pf-c-table__expandable-row--before--ZIndex		200
--pf-c-table__expandable-row--before--ZIndex --pf-global--ZIndex--sm $pf-global--ZIndex--sm 200
	.pf-c-table	--pf-c-table__expandable-row--before--Top		calc(1px * -1)
--pf-c-table__expandable-row--before--Top calc(--pf-c-table--BorderWidth * -1) calc(--pf-global--BorderWidth--sm * -1) calc($pf-global--BorderWidth--sm * -1) calc(1px * -1)
	.pf-c-table	--pf-c-table__expandable-row--before--Bottom		calc(1px * -1)
--pf-c-table__expandable-row--before--Bottom calc(--pf-c-table--BorderWidth * -1) calc(--pf-global--BorderWidth--sm * -1) calc($pf-global--BorderWidth--sm * -1) calc(1px * -1)
	.pf-c-table	--pf-c-table__expandable-row--MaxHeight		28.125rem
	.pf-c-table	--pf-c-table__expandable-row-content--Transition		all 250ms cubic-bezier(.42, 0, .58, 1)
--pf-c-table__expandable-row-content--Transition --pf-global--Transition $pf-global--Transition all 250ms cubic-bezier(.42, 0, .58, 1)
	.pf-c-table	--pf-c-table__expandable-row-content--PaddingTop		1.5rem
--pf-c-table__expandable-row-content--PaddingTop --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-table	--pf-c-table__expandable-row-content--PaddingBottom		1.5rem
--pf-c-table__expandable-row-content--PaddingBottom --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-table	--pf-c-table__sort-indicator--MarginLeft		1rem
--pf-c-table__sort-indicator--MarginLeft --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-table	--pf-c-table__sort-indicator--Color		#d2d2d2
--pf-c-table__sort-indicator--Color --pf-global--disabled-color--200 $pf-global--disabled-color--200 $pf-color-black-300 #d2d2d2
	.pf-c-table	--pf-c-table__sort-indicator--hover--Color		#151515
--pf-c-table__sort-indicator--hover--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-table	--pf-c-table__sort--c-button--Color		#151515
--pf-c-table__sort--c-button--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-table	--pf-c-table__sort-indicator--LineHeight		1.5
--pf-c-table__sort-indicator--LineHeight --pf-c-button--LineHeight --pf-global--LineHeight--md $pf-global--LineHeight--md 1.5
	.pf-c-table	--pf-c-table__icon-inline--MarginRight		0.5rem
--pf-c-table__icon-inline--MarginRight --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-table	--pf-c-table--nested--first-last-child--PaddingRight		4rem
--pf-c-table--nested--first-last-child--PaddingRight --pf-global--spacer--3xl $pf-global--spacer--3xl pf-size-prem(64px) 4rem
	.pf-c-table	--pf-c-table--nested--first-last-child--PaddingLeft		4rem
--pf-c-table--nested--first-last-child--PaddingLeft --pf-global--spacer--3xl $pf-global--spacer--3xl pf-size-prem(64px) 4rem
	.pf-c-table	--pf-c-table--m-compact-th--PaddingTop		calc(0.5rem + 0.25rem)
--pf-c-table--m-compact-th--PaddingTop calc(--pf-global--spacer--sm + --pf-global--spacer--xs) calc($pf-global--spacer--sm + $pf-global--spacer--xs) calc(pf-size-prem(8px) + pf-size-prem(4px)) calc(0.5rem + 0.25rem)
	.pf-c-table	--pf-c-table--m-compact-th--PaddingBottom		0.5rem
--pf-c-table--m-compact-th--PaddingBottom --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-table	--pf-c-table--m-compact-cell--PaddingTop		0.5rem
--pf-c-table--m-compact-cell--PaddingTop --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-table	--pf-c-table--m-compact-cell--PaddingRight		0.5rem
--pf-c-table--m-compact-cell--PaddingRight --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-table	--pf-c-table--m-compact-cell--PaddingBottom		0.5rem
--pf-c-table--m-compact-cell--PaddingBottom --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-table	--pf-c-table--m-compact-cell--PaddingLeft		0.5rem
--pf-c-table--m-compact-cell--PaddingLeft --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-table	--pf-c-table--m-compact-cell--first-last-child--PaddingLeft		1.5rem
--pf-c-table--m-compact-cell--first-last-child--PaddingLeft --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-table	--pf-c-table--m-compact-cell--first-last-child--PaddingRight		1.5rem
--pf-c-table--m-compact-cell--first-last-child--PaddingRight --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-table	--pf-c-table--m-compact-cell--first-last-child--xl--PaddingLeft		1rem
--pf-c-table--m-compact-cell--first-last-child--xl--PaddingLeft --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-table	--pf-c-table--m-compact-cell--first-last-child--xl--PaddingRight		1rem
--pf-c-table--m-compact-cell--first-last-child--xl--PaddingRight --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-table	--pf-c-table--m-compact--FontSize		0.875rem
--pf-c-table--m-compact--FontSize --pf-global--FontSize--sm $pf-global--FontSize--sm pf-font-prem(14px) 0.875rem
	.pf-c-table	--pf-c-table--m-compact__expandable-row-content--PaddingTop		1.5rem
--pf-c-table--m-compact__expandable-row-content--PaddingTop --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-table	--pf-c-table--m-compact__expandable-row-content--PaddingRight		1.5rem
--pf-c-table--m-compact__expandable-row-content--PaddingRight --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-table	--pf-c-table--m-compact__expandable-row-content--PaddingBottom		1.5rem
--pf-c-table--m-compact__expandable-row-content--PaddingBottom --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-table	--pf-c-table--m-compact__expandable-row-content--PaddingLeft		1.5rem
--pf-c-table--m-compact__expandable-row-content--PaddingLeft --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-table	--pf-c-table__compound-expansion-toggle--BorderTop--BorderWidth		3px
--pf-c-table__compound-expansion-toggle--BorderTop--BorderWidth --pf-global--BorderWidth--lg $pf-global--BorderWidth--lg 3px
	.pf-c-table	--pf-c-table__compound-expansion-toggle--BorderTop--BorderColor		#06c
--pf-c-table__compound-expansion-toggle--BorderTop--BorderColor --pf-global--primary-color--100 $pf-global--primary-color--100 $pf-color-blue-400 #06c
	.pf-c-table	--pf-c-table__compound-expansion-toggle--BorderRight--BorderWidth		1px
--pf-c-table__compound-expansion-toggle--BorderRight--BorderWidth --pf-global--BorderWidth--sm $pf-global--BorderWidth--sm 1px
	.pf-c-table	--pf-c-table__compound-expansion-toggle--BorderLeft--BorderWidth		1px
--pf-c-table__compound-expansion-toggle--BorderLeft--BorderWidth --pf-global--BorderWidth--sm $pf-global--BorderWidth--sm 1px
	.pf-c-table	--pf-c-table__compound-expansion-toggle--BorderRight--BorderColor		#d2d2d2
--pf-c-table__compound-expansion-toggle--BorderRight--BorderColor --pf-global--BorderColor--100 $pf-global--BorderColor--100 $pf-color-black-300 #d2d2d2
	.pf-c-table	--pf-c-table__compound-expansion-toggle--BorderLeft--BorderColor		#d2d2d2
--pf-c-table__compound-expansion-toggle--BorderLeft--BorderColor --pf-global--BorderColor--100 $pf-global--BorderColor--100 $pf-color-black-300 #d2d2d2
	.pf-c-table	--pf-c-table__compound-expansion-toggle--BorderBottom--BorderWidth		1px
--pf-c-table__compound-expansion-toggle--BorderBottom--BorderWidth --pf-global--BorderWidth--sm $pf-global--BorderWidth--sm 1px
	.pf-c-table	--pf-c-table__compound-expansion-toggle--BorderBottom--BorderColor		#fff
--pf-c-table__compound-expansion-toggle--BorderBottom--BorderColor --pf-global--BackgroundColor--light-100 $pf-global--BackgroundColor--light-100 $pf-color-white #fff
	.pf-c-table	--pf-c-table__expandable-row--m-expanded--BorderBottomColor		#d2d2d2
--pf-c-table__expandable-row--m-expanded--BorderBottomColor --pf-global--BorderColor--100 $pf-global--BorderColor--100 $pf-color-black-300 #d2d2d2
	.pf-c-table	--pf-c-table__sort--sorted--Color		#06c
--pf-c-table__sort--sorted--Color --pf-global--active-color--100 $pf-global--active-color--100 $pf-color-blue-400 #06c
	.pf-c-table tr > *	--pf-hidden-visible--visible--Visibility		visible
	.pf-c-table tr > *	--pf-hidden-visible--hidden--Display		none
	.pf-c-table tr > *	--pf-hidden-visible--hidden--Visibility		hidden
	.pf-c-table tr > *	--pf-hidden-visible--Display		table-cell
--pf-hidden-visible--Display --pf-hidden-visible--visible--Display --pf-c-table-cell--hidden-visible--Display table-cell
	.pf-c-table tr > *	--pf-hidden-visible--Visibility		visible
--pf-hidden-visible--Visibility --pf-hidden-visible--visible--Visibility visible
	.pf-c-table tr > *	--pf-hidden-visible--visible--Display		table-cell
--pf-hidden-visible--visible--Display --pf-c-table-cell--hidden-visible--Display table-cell
	.pf-c-table tr > .pf-m-hidden	--pf-hidden-visible--Display		none
--pf-hidden-visible--Display --pf-hidden-visible--hidden--Display none
	.pf-c-table tr > .pf-m-hidden	--pf-hidden-visible--Visibility		hidden
--pf-hidden-visible--Visibility --pf-hidden-visible--hidden--Visibility hidden
	.pf-c-table tr > *:first-child	--pf-c-table-cell--PaddingLeft		1.5rem
--pf-c-table-cell--PaddingLeft --pf-c-table-cell--first-last-child--PaddingLeft --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-table tr > *:last-child	--pf-c-table-cell--PaddingRight		1.5rem
--pf-c-table-cell--PaddingRight --pf-c-table-cell--first-last-child--PaddingRight --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-table thead	--pf-c-table-cell--PaddingTop		1rem
--pf-c-table-cell--PaddingTop --pf-c-table-thead-cell--PaddingTop --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-table thead	--pf-c-table-cell--PaddingBottom		1rem
--pf-c-table-cell--PaddingBottom --pf-c-table-thead-cell--PaddingBottom --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-table thead	--pf-c-table-cell--FontSize		0.875rem
--pf-c-table-cell--FontSize --pf-c-table-thead--FontSize --pf-global--FontSize--sm $pf-global--FontSize--sm pf-font-prem(14px) 0.875rem
	.pf-c-table thead	--pf-c-table-cell--FontWeight		600
--pf-c-table-cell--FontWeight --pf-c-table-thead--FontWeight --pf-global--FontWeight--bold $pf-global--FontWeight--bold 600
	.pf-c-table tbody	--pf-c-table-cell--PaddingTop		1.5rem
--pf-c-table-cell--PaddingTop --pf-c-table-tbody-cell--PaddingTop --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-table tbody	--pf-c-table-cell--PaddingBottom		1.5rem
--pf-c-table-cell--PaddingBottom --pf-c-table-tbody-cell--PaddingBottom --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-table .pf-c-table__toggle	--pf-c-table-cell--PaddingBottom		0
	.pf-c-table__toggle	--pf-c-table-cell--PaddingRight		0
	.pf-c-table__toggle	--pf-c-table-cell--PaddingLeft		0
	.pf-c-table__check	--pf-c-table-cell--FontSize		1rem
--pf-c-table-cell--FontSize --pf-c-table__check--input--FontSize --pf-global--FontSize--md $pf-global--FontSize--md pf-font-prem(16px) 1rem
	.pf-c-table__action	--pf-c-table-cell--PaddingTop		0
	.pf-c-table__action	--pf-c-table-cell--PaddingRight		0
--pf-c-table-cell--PaddingRight --pf-c-table__action--PaddingRight 0
	.pf-c-table__action	--pf-c-table-cell--PaddingBottom		0
	.pf-c-table__action	--pf-c-table-cell--PaddingLeft		0
--pf-c-table-cell--PaddingLeft --pf-c-table__action--PaddingLeft 0
	.pf-c-table__inline-edit-action	--pf-c-table-cell--PaddingLeft		0
	.pf-c-table__inline-edit-action	--pf-c-table-cell--PaddingRight		0
	.pf-c-table__compound-expansion-toggle .pf-c-button	--pf-c-button--BorderRadius		0
	.pf-c-table__expandable-row	--pf-c-table-cell--PaddingTop		0
	.pf-c-table__expandable-row	--pf-c-table-cell--PaddingBottom		0
	.pf-c-table .pf-c-table tr > *:first-child	--pf-c-table-cell--PaddingLeft		4rem
--pf-c-table-cell--PaddingLeft --pf-c-table--nested--first-last-child--PaddingLeft --pf-global--spacer--3xl $pf-global--spacer--3xl pf-size-prem(64px) 4rem
	.pf-c-table .pf-c-table tr > *:last-child	--pf-c-table-cell--PaddingRight		4rem
--pf-c-table-cell--PaddingRight --pf-c-table--nested--first-last-child--PaddingRight --pf-global--spacer--3xl $pf-global--spacer--3xl pf-size-prem(64px) 4rem
	.pf-c-table.pf-m-compact	--pf-c-table-cell--FontSize		0.875rem
--pf-c-table-cell--FontSize --pf-c-table--m-compact--FontSize --pf-global--FontSize--sm $pf-global--FontSize--sm pf-font-prem(14px) 0.875rem
	.pf-c-table.pf-m-compact.pf-m-no-border-rows:not(.pf-m-expandable) tbody	--pf-c-table--BorderWidth		0
	.pf-c-table.pf-m-compact.pf-m-no-border-rows:not(.pf-m-expandable) tbody	--pf-c-table--BorderColor		transparent
	.pf-c-table.pf-m-compact tr	--pf-c-table-cell--PaddingLeft		0.5rem
--pf-c-table-cell--PaddingLeft --pf-c-table--m-compact-cell--PaddingLeft --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-table.pf-m-compact tr	--pf-c-table-cell--PaddingRight		0.5rem
--pf-c-table-cell--PaddingRight --pf-c-table--m-compact-cell--PaddingRight --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-table.pf-m-compact tr:not(.pf-c-table__expandable-row)	--pf-c-table-cell--FontSize		0.875rem
--pf-c-table-cell--FontSize --pf-c-table--m-compact--FontSize --pf-global--FontSize--sm $pf-global--FontSize--sm pf-font-prem(14px) 0.875rem
	.pf-c-table.pf-m-compact tr:not(.pf-c-table__expandable-row)	--pf-c-table-cell--PaddingTop		0.5rem
--pf-c-table-cell--PaddingTop --pf-c-table--m-compact-cell--PaddingTop --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-table.pf-m-compact tr:not(.pf-c-table__expandable-row)	--pf-c-table-cell--PaddingBottom		0.5rem
--pf-c-table-cell--PaddingBottom --pf-c-table--m-compact-cell--PaddingBottom --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-table.pf-m-compact tr:not(.pf-c-table__expandable-row) > *:first-child	--pf-c-table-cell--PaddingLeft		1.5rem
--pf-c-table-cell--PaddingLeft --pf-c-table--m-compact-cell--first-last-child--PaddingLeft --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-table.pf-m-compact tr:not(.pf-c-table__expandable-row) > *:last-child	--pf-c-table-cell--PaddingRight		1.5rem
--pf-c-table-cell--PaddingRight --pf-c-table--m-compact-cell--first-last-child--PaddingRight --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-table.pf-m-compact thead	--pf-c-table--m-compact-cell--PaddingTop		calc(0.5rem + 0.25rem)
--pf-c-table--m-compact-cell--PaddingTop --pf-c-table--m-compact-th--PaddingTop calc(--pf-global--spacer--sm + --pf-global--spacer--xs) calc($pf-global--spacer--sm + $pf-global--spacer--xs) calc(pf-size-prem(8px) + pf-size-prem(4px)) calc(0.5rem + 0.25rem)
	.pf-c-table.pf-m-compact thead	--pf-c-table--m-compact-cell--PaddingBottom		0.5rem
--pf-c-table--m-compact-cell--PaddingBottom --pf-c-table--m-compact-th--PaddingBottom --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-table.pf-m-compact .pf-c-table__action	--pf-c-table-cell--PaddingTop		0
--pf-c-table-cell--PaddingTop --pf-c-table__action--PaddingTop 0
	.pf-c-table.pf-m-compact .pf-c-table__action	--pf-c-table-cell--PaddingBottom		0
--pf-c-table-cell--PaddingBottom --pf-c-table__action--PaddingBottom 0
	.pf-c-table.pf-m-compact .pf-c-table__action	--pf-c-table-cell--PaddingLeft		0
--pf-c-table-cell--PaddingLeft --pf-c-table__action--PaddingLeft 0
	.pf-c-table.pf-m-compact .pf-c-table__toggle	--pf-c-table-cell--PaddingTop		0
--pf-c-table-cell--PaddingTop --pf-c-table--m-compact__toggle--PaddingTop 0
	.pf-c-table.pf-m-compact .pf-c-table__toggle	--pf-c-table-cell--PaddingBottom		0
--pf-c-table-cell--PaddingBottom --pf-c-table--m-compact__toggle--PaddingBottom 0
	.pf-c-table .pf-c-table.pf-m-compact tr > *:first-child	--pf-c-table-cell--PaddingLeft		4rem
--pf-c-table-cell--PaddingLeft --pf-c-table--nested--first-last-child--PaddingLeft --pf-global--spacer--3xl $pf-global--spacer--3xl pf-size-prem(64px) 4rem
	.pf-c-table .pf-c-table.pf-m-compact tr > *:last-child	--pf-c-table-cell--PaddingRight		4rem
--pf-c-table-cell--PaddingRight --pf-c-table--nested--first-last-child--PaddingRight --pf-global--spacer--3xl $pf-global--spacer--3xl pf-size-prem(64px) 4rem
	.pf-c-table.pf-m-compact .pf-c-table__expandable-row-content	--pf-c-table__expandable-row-content--PaddingTop		1.5rem
--pf-c-table__expandable-row-content--PaddingTop --pf-c-table--m-compact__expandable-row-content--PaddingTop --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-table.pf-m-compact .pf-c-table__expandable-row-content	--pf-c-table__expandable-row-content--PaddingBottom		1.5rem
--pf-c-table__expandable-row-content--PaddingBottom --pf-c-table--m-compact__expandable-row-content--PaddingBottom --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem

QUICKLINKS

CONTRIBUTE

STAY IN TOUCH

Copyright © 2019 Red Hat, Inc.

Privacy statement Terms of use All policies and guidelines