Patternfly Logo

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

Examples

Basic

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

Row click handler

Row Click Handler Table
RepositoriesBranchesPull requestsWorkspaces
Repositories oneBranches onePull requests oneWorkspaces one
Repositories twoBranches twoPull requests twoWorkspaces two
Repositories threeBranches threePull requests threeWorkspaces three

Custom row wrapper

Table with custom row wrapper that styles odd rows
RepositoriesBranchesPull requestsWorkspaces
Repositories oneBranches onePull requests oneWorkspaces one
Repositories twoBranches twoPull requests twoWorkspaces two
Repositories threeBranches threePull requests threeWorkspaces three

Sortable

BranchesWorkspacesLast Commit
onetwoafourfive
atwokfourfive
ptwobfourfive

Sortable with wrapping headers

onetwoafourfive
atwokfourfive
ptwobfourfive

Selectable

RepositoriesBranchesPull requestsWorkspacesLast Commit
one
twoafourfive
a
twokfourfive
p
twobfourfive

Selectable radio input

RepositoriesBranchesPull requestsWorkspacesLast Commit
one
twoafourfive
a
twokfourfive
p
twobfourfive

Simple actions

RepositoriesBranchesPull requestsWorkspacesLast Commit
one
twoafourfive
a
twokfourfive
p
twobfourfive

Actions

RepositoriesBranchesPull requestsWorkspacesLast Commit
one
twoafourfive
a
twokfourfive
p
twobfourfive
5
2bfourfive

First cell as header

Header cellBranchesPull requestsWorkspacesLast Commit
one
twothreefourfive

Compact

Header cellBranchesPull requests
onetwothreefour
onetwothreefour
onetwothreefour

Compact borderless rows

Header cellBranchesPull requests
onetwothreefour
onetwothreefour
onetwothreefour

Compact expandable

Header cellBranchesPull requests
onetwothreefour
parent - 1twothreefour
single cell
parent - 2twothreefour
single cell - fullWidth
parent - 3twothreefour
single cell - noPadding
parent - 4twothreefour
single cell - fullWidth & noPadding
parent - 5twothreefour
spans 'Header cell' and 'Branches'
spans 'Pull requests' and the empty column
parent - 6twothreefour
fullWidth, spans the collapsible column and 'Header cell'
fullWidth, spans 'Branches' and 'Pull requests'fullWidth, spans the empty column

Expandable

Header cellBranchesPull requestsWorkspacesLast Commit
onetwothreefourfive
parent - 1twothreefourfive
child - 1
parent - 2twothreefourfive
parent - 3twothreefourfive

Compound expandable

RepositoriesBranchesPull requestsWorkspacesLast Commit
siemur/test-space20 minutesOpen in Github
BranchesWorkspacesLast Commit
parent-0compound-1threefourfive
atwokfourfive
ptwobfourfive
siemur/test-space20 minutesOpen in Github

With width modifiers

Header cellBranchesPull requestsWorkspacesLast Commit
onetwothreefourfive

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

Controlling text

Truncate (width 20%)Break wordWrapping table header text. This th text will wrap instead of truncate.Fit content
This text will truncate instead of wrap.http://thisisaverylongurlthatneedstobreakusethebreakwordmodifier.org

By default, thead cells will truncate and tbody cells will wrap. Use .pf-m-wrap on a th to change its behavior.

This cell's content will adjust itself to the parent th width. This modifier only affects table layouts.No wrap

Modifiers with table text

Truncating textWrapping table header text. This th text will wrap instead of truncate.
This text will truncate instead of wrap.This is a link that needs to be on one line and fully readable.

Empty state

Empty State Table Example
RepositoriesBranchesPull requestsWorkspacesLast 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 1Disabled text input col 2Text input col 3Text input col 4
Row 1 cell 1 content
Row 1 cell 2, disabled content
Row 1 cell 3 content
Option 1
Row 2 cell 1 content
Row 2 cell 2, disabled content
Row 2 cell 3 content
Placeholder...
Row 3 cell 1 content
Row 3 cell 2, disabled content
Row 3 cell 3 content
Option 3
1

Props

Table properties
NameTypeRequiredDefaultDescription
actionResolver(rowData: IRowData, extraData: IExtraData) => (IAction | ISeparator)[]NoResolver for the given action
actions(IAction | ISeparator)[]NoActions to add to the Table
areActionsDisabled(rowData: IRowData, extraData: IExtraData) => booleanNoSpecifies if the Kebab for actions is disabled
aria-labelstringNoundefinedAdds an accessible name for the Table
bodyWrapperFunctionNoWrapper for the body
bordersbooleanNotrueRender borders
canSelectAllbooleanNotrueEnables or Disables the ability to select all - this is mutually exclusive with radio button select variant
captionReact.ReactNodeNoundefinedComponent used for caption
cells(ICell | string)[]YesCell data
childrenReact.ReactNodeNonullContent rendered inside the Table
classNamestringNo''Additional classes added to the Table
contentIdstringNo'expanded-content'ID for content
dropdownDirection'up' | 'down'NoDropdownDirection.downThe desired direction to show the dropdown when clicking on the actions Kebab. Can only be used together with `actions` property
dropdownPosition'right' | 'left'NoDropdownPosition.rightThe desired position to show the dropdown when clicking on the actions Kebab. Can only be used together with `actions` property
expandIdstringNo'expandable-toggle'ID for expand
gridBreakPoint'' | 'grid' | 'grid-md' | 'grid-lg' | 'grid-xl' | 'grid-2xl'NoTableGridBreakpoint.gridMdSpecifies the grid breakpoints
headerReact.ReactNodeNoundefinedComponent to place in the header
isStickyHeaderbooleanNofalseIf set to true, the table header sticks to the top of its container
onCollapse( event: React.MouseEvent, rowIndex: number, isOpen: boolean, rowData: IRowData, extraData: IExtraData ) => voidNoFunction 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 ) => voidNoFunction triggered when a compound expandable item is clicked
onRowEditBeta( event: React.MouseEvent<HTMLButtonElement>, type: RowEditType, isEditable?: boolean, rowIndex?: number, validationErrors?: RowErrors ) => voidNoFunction triggered when a row's inline edit is activated. Adds a column for inline edit when present.
onSelect( event: React.FormEvent<HTMLInputElement>, isSelected: boolean, rowIndex: number, rowData: IRowData, extraData: IExtraData ) => voidNoFunction triggered when a row's checkbox is selected. When this is used, one checkbox/radio button will be positioned in the first or second cell of a non-expandable row
onSort( event: React.MouseEvent, columnIndex: number, sortByDirection: SortByDirection, extraData: IExtraColumnData ) => voidNoFunction triggered when sort icon is clicked
ouiaSafeNo type infoNotrue
rolestringNo'grid'A valid WAI-ARIA role to be applied to the table element
rowLabeledBystringNo'simple-node'label for row
rows(IRow | string[])[]YesRow data
rowWrapper(props: RowWrapperProps) => JSX.ElementNoWrapper for the row
selectVariant'checkbox' | 'radio'No'checkbox'Specifies the type of the select element variant - can be one of checkbox or radio button
sortByISortByNoSpecifies the initial sorting pattern for the table - asc/desc and the index of the column to sort by
variantliteralNonullStyle variant for the Table
TableHeader properties
NameTypeRequiredDefaultDescription
classNamestringNoAdditional classes added to the TableHeader
TableBody properties
NameTypeRequiredDefaultDescription
childrenReact.ReactNodeNonullThis prop should not be set manually
classNamestringNo''Additional classes added to the TableBody
headerDataIRow[]NoThis prop should not be set manually
onRowFunctionNo(...args: any) => ObjectThis prop should not be set manually
onRowClick( event: React.MouseEvent, row: IRow, rowProps: IExtraRowData, computedData: IComputedData ) => voidNo(event: React.MouseEvent, row: IRow, rowProps: IExtraRowData, computedData: IComputedData) => /* eslint-enable @typescript-eslint/no-unused-vars */ undefined as OnRowClickThis prop should not be set manually
rowKeyRowKeyTypeNo'id'This prop should not be set manually
rowsIRow[]NoThis prop should not be set manually
EditableSelectInputCell properties
NameTypeRequiredDefaultDescription
cellIndexnumberYesCell index of this select input cell
clearSelection(rowIndex: number, cellIndex: number, event?: React.MouseEvent) => voidNoEvent handler which fires when the user clears the selections
isDisabledbooleanNoFlag indicating the select input is disabled
isOpenbooleanNofalseFlag indicating the select menu is open
onSelect( newValue: string | SelectOptionObject, event: React.MouseEvent | React.ChangeEvent, rowIndex: number, cellIndex: number, isPlaceholder?: boolean ) => voidNo() => {}Event handler which fires when user selects an option in this cell
onToggle(isExpanded: boolean) => voidNo() => {}Event handler which fires when the select toggle is toggled
optionsReact.ReactElement[]No[]Options to display in the expandable select menu
props{ name: string; value: string | string[]; isSelectOpen: boolean; selected: string | SelectOptionObject | (string | SelectOptionObject)[]; options: React.ReactElement[]; editableSelectProps?: SelectProps; [key: string]: any; }YesData structure containing: value - to display in the cell, name - of the select input, isSelectOpen - flag controlling isOpen state of select, selected - string or SelectOptionObject, or an array of strings or SelectOptionObjects representing current selections options - Array of react elements to display in the select menu, editableSelectProps - props to be passed down to the Select component housed inside this editable select input cell arbitrary data to pass to the internal select component in the editable select input cell
rowIndexnumberYesRow index of this select input cell
selectionsstring | SelectOptionObject | (string | SelectOptionObject)[]No['']Current selected options to display as the read only value of the table cell
EditableTextCell properties
NameTypeRequiredDefaultDescription
cellIndexnumberYesCell index of this text cell
handleTextInputChange( newValue: string, event: React.FormEvent<HTMLInputElement>, rowIndex: number, cellIndex: number ) => voidYesEvent handler which fires when user changes the text in this cell
inputAriaLabelstringYesaccessible label of the text input
isDisabledbooleanNofalseflag indicating if the text input is disabled
props{ name: string; value: string; [key: string]: any; }YesData structure containing: value - to display in the cell, name - of the text input, arbitrary data to pass to the internal text input in the editable text cell
rowIndexnumberYesRow index of this text cell
valuestringYesThe current value of the text input
RowErrors properties
NameTypeRequiredDefaultDescription
[name: string]No type infoYes
IHeaderRow properties
NameTypeRequiredDefaultDescription
IRowData properties
NameTypeRequiredDefaultDescription
disableActionsNo type infoNo
IColumn properties
NameTypeRequiredDefaultDescription
extraParamsNo type infoYes
IExtraRowData properties
NameTypeRequiredDefaultDescription
rowIndexNo type infoNo
rowKeyNo type infoNo
IExtraColumnData properties
NameTypeRequiredDefaultDescription
columnNo type infoNo
columnIndexNo type infoNo
propertyNo type infoNo
ISortBy properties
NameTypeRequiredDefaultDescription
directionNo type infoNo
indexNo type infoNo
IAction properties
NameTypeRequiredDefaultDescription
isSeparatorNo type infoNo
itemKeyNo type infoNo
onClickNo type infoNo
titleNo type infoNo
ISeparator properties
NameTypeRequiredDefaultDescription
isSeparatorNo type infoYes
ICell properties
NameTypeRequiredDefaultDescription
cellNo type infoNo
cellFormattersNo type infoNo
cellTransformsNo type infoNo
columnTransformsNo type infoNo
dataNo type infoNo
dataLabelNo type infoNo
formattersNo type infoNo
headerNo type infoNo
propsNo type infoNo
titleNo type infoNo
transformsNo type infoNo
IRowCell properties
NameTypeRequiredDefaultDescription
formattersNo type infoNo
propsNo type infoNo
titleNo type infoNo
IValidatorDef properties
NameTypeRequiredDefaultDescription
errorTextNo type infoYes
nameNo type infoYes
validatorNo type infoYes
IRow properties
NameTypeRequiredDefaultDescription
cellsNo type infoNo
compoundParentNo type infoNo
disableCheckboxNo type infoNodeprecated - Use disableSelection instead - Whether the row checkbox is disabled
disableSelectionNo type infoNoWhether the row checkbox/radio button is disabled
fullWidthNo type infoNo
heightAutoNo type infoNo
isEditableNo type infoNo
isExpandedNo type infoNo
isFirstVisibleNo type infoNo
isLastVisibleNo type infoNo
isOpenNo type infoNo
isValidNo type infoNo
noPaddingNo type infoNo
parentNo type infoNo
propsNo type infoNo
rowCancelBtnAriaLabelNo type infoNoAria label for cancel button in inline edit
rowEditBtnAriaLabelNo type infoNoAria label for edit button in inline edit
rowEditValidationRulesNo type infoNoAn array of validation functions to run against every cell for a given row
rowSaveBtnAriaLabelNo type infoNoAria label for save button in inline edit
selectedNo type infoNoWhether the row checkbox/radio button is selected
showSelectNo type infoNo

CSS variables

.pf-c-table--pf-global--Color--100
#151515
.pf-c-table--pf-global--Color--200
#6a6e73
.pf-c-table--pf-global--BorderColor--100
#d2d2d2
.pf-c-table--pf-global--primary-color--100
#06c
.pf-c-table--pf-global--link--Color
#06c
.pf-c-table--pf-global--link--Color--hover
#004080
.pf-c-table--pf-global--BackgroundColor--100
#fff
.pf-c-table--pf-c-table--BackgroundColor
#fff
.pf-c-table--pf-c-table--BorderColor
#d2d2d2
.pf-c-table--pf-c-table--border-width--base
1px
.pf-c-table--pf-c-table-caption--FontSize
0.875rem
.pf-c-table--pf-c-table-caption--Color
#6a6e73
.pf-c-table--pf-c-table-caption--PaddingTop
1rem
.pf-c-table--pf-c-table-caption--PaddingRight
1.5rem
.pf-c-table--pf-c-table-caption--PaddingBottom
1rem
.pf-c-table--pf-c-table-caption--PaddingLeft
1.5rem
.pf-c-table--pf-c-table-caption--xl--PaddingRight
1rem
.pf-c-table--pf-c-table-caption--xl--PaddingLeft
1rem
.pf-c-table--pf-c-table--thead--cell--FontSize
0.875rem
.pf-c-table--pf-c-table--thead--cell--FontWeight
700
.pf-c-table--pf-c-table--tbody--cell--PaddingTop
1.5rem
.pf-c-table--pf-c-table--tbody--cell--PaddingBottom
1.5rem
.pf-c-table--pf-c-table--cell--FontSize
1rem
.pf-c-table--pf-c-table--cell--FontWeight
400
.pf-c-table--pf-c-table--cell--Color
#151515
.pf-c-table--pf-c-table--cell--PaddingTop
1rem
.pf-c-table--pf-c-table--cell--PaddingRight
1rem
.pf-c-table--pf-c-table--cell--PaddingBottom
1rem
.pf-c-table--pf-c-table--cell--PaddingLeft
1rem
.pf-c-table--pf-c-table--cell--first-last-child--PaddingLeft
1rem
.pf-c-table--pf-c-table--cell--first-last-child--PaddingRight
1rem
.pf-c-table--pf-c-table--cell--first-last-child--xl--PaddingLeft
1.5rem
.pf-c-table--pf-c-table--cell--first-last-child--xl--PaddingRight
1.5rem
.pf-c-table--pf-c-table--cell--MinWidth
0
.pf-c-table--pf-c-table--cell--MaxWidth
none
.pf-c-table--pf-c-table--cell--Width
auto
.pf-c-table--pf-c-table--cell--Overflow
visible
.pf-c-table--pf-c-table--cell--TextOverflow
clip
.pf-c-table--pf-c-table--cell--WhiteSpace
normal
.pf-c-table--pf-c-table--cell--WordBreak
normal
.pf-c-table--pf-c-table--cell--m-help--MinWidth
11ch
.pf-c-table--pf-c-table--m-truncate--cell--MaxWidth
1px
.pf-c-table--pf-c-table--m-truncate--cell--MinWidth
calc(5ch + 1rem + 1rem)
.pf-c-table--pf-c-table--cell--hidden-visible--Display
table-cell
.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--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--Rotate
360deg
.pf-c-table--pf-c-table__button--BackgroundColor
transparent
.pf-c-table--pf-c-table__button--Color
#151515
.pf-c-table--pf-c-table__button--hover--Color
#151515
.pf-c-table--pf-c-table__button--focus--Color
#151515
.pf-c-table--pf-c-table__button--active--Color
#151515
.pf-c-table--pf-c-table__button--OutlineOffset
calc(3px * -1)
.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.25rem
.pf-c-table--pf-c-table__check--input--FontSize
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--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--pf-c-table__expandable-row-content--PaddingTop
1.5rem
.pf-c-table--pf-c-table__expandable-row-content--PaddingBottom
1.5rem
.pf-c-table--pf-c-table__expandable-row--after--Top
calc(1px * -1)
.pf-c-table--pf-c-table__expandable-row--after--Bottom
calc(1px * -1)
.pf-c-table--pf-c-table__expandable-row--after--border-width--base
3px
.pf-c-table--pf-c-table__expandable-row--after--BorderLeftWidth
0
.pf-c-table--pf-c-table__expandable-row--after--BorderColor
#06c
.pf-c-table--pf-c-table__icon-inline--MarginRight
0.5rem
.pf-c-table--pf-c-table__sort--MinWidth
calc(6ch + 1rem + 1rem + 1rem)
.pf-c-table--pf-c-table__sort__button--PaddingTop
0.375rem
.pf-c-table--pf-c-table__sort__button--PaddingRight
0.5rem
.pf-c-table--pf-c-table__sort__button--PaddingBottom
0.375rem
.pf-c-table--pf-c-table__sort__button--PaddingLeft
0.5rem
.pf-c-table--pf-c-table__sort__button--MarginTop
calc(0.375rem * -1)
.pf-c-table--pf-c-table__sort__button--MarginBottom
calc(0.375rem * -1)
.pf-c-table--pf-c-table__sort__button--MarginLeft
calc(0.5rem * -1)
.pf-c-table--pf-c-table__sort__button--Color
#151515
.pf-c-table--pf-c-table__sort--m-selected__button--Color
#06c
.pf-c-table--pf-c-table__sort--m-help--MinWidth
15ch
.pf-c-table--pf-c-table__sort-indicator--Color
#d2d2d2
.pf-c-table--pf-c-table__sort-indicator--MarginLeft
1rem
.pf-c-table--pf-c-table__sort--m-selected__sort-indicator--Color
#06c
.pf-c-table--pf-c-table__sort__button--hover__sort-indicator--Color
#151515
.pf-c-table--pf-c-table__sort__button--active__sort-indicator--Color
#151515
.pf-c-table--pf-c-table__sort__button--focus__sort-indicator--Color
#151515
.pf-c-table--pf-c-table--th--m-help--MinWidth
11ch
.pf-c-table--pf-c-table__column-help--MarginLeft
0.25rem
.pf-c-table--pf-c-table__column-help--TranslateY
0.125rem
.pf-c-table--pf-c-table__column-help--c-button--MarginTop
calc(0.375rem * -1)
.pf-c-table--pf-c-table__column-help--c-button--MarginBottom
calc(0.375rem * -1)
.pf-c-table--pf-c-table__column-help--c-button--PaddingRight
0.5rem
.pf-c-table--pf-c-table__column-help--c-button--PaddingLeft
0.5rem
.pf-c-table--pf-c-table__compound-expansion-toggle__button--Color
#06c
.pf-c-table--pf-c-table__compound-expansion-toggle__button--hover--Color
#004080
.pf-c-table--pf-c-table__compound-expansion-toggle__button--focus--Color
#004080
.pf-c-table--pf-c-table__compound-expansion-toggle__button--active--Color
#004080
.pf-c-table--pf-c-table__compound-expansion-toggle__button--before--border-width--base
1px
.pf-c-table--pf-c-table__compound-expansion-toggle__button--before--BorderColor
#d2d2d2
.pf-c-table--pf-c-table__compound-expansion-toggle__button--before--BorderRightWidth
0
.pf-c-table--pf-c-table__compound-expansion-toggle__button--before--BorderLeftWidth
0
.pf-c-table--pf-c-table__compound-expansion-toggle__button--before--Bottom
calc(1px * -1)
.pf-c-table--pf-c-table__compound-expansion-toggle__button--before--Left
calc(1px * -1)
.pf-c-table--pf-c-table__compound-expansion-toggle__button--after--border-width--base
3px
.pf-c-table--pf-c-table__compound-expansion-toggle__button--after--BorderColor
#06c
.pf-c-table--pf-c-table__compound-expansion-toggle__button--after--BorderTopWidth
0
.pf-c-table--pf-c-table__compound-expansion-toggle__button--after--Top
calc(1px * -1)
.pf-c-table--pf-c-table__compound-expansion-toggle__button--after--Left
calc(1px * -1)
.pf-c-table--pf-c-table--m-compact-th--PaddingTop
calc(0.5rem + 0.25rem)
.pf-c-table--pf-c-table--m-compact-th--PaddingBottom
0.5rem
.pf-c-table--pf-c-table--m-compact--cell--PaddingTop
0.5rem
.pf-c-table--pf-c-table--m-compact--cell--PaddingRight
0.5rem
.pf-c-table--pf-c-table--m-compact--cell--PaddingBottom
0.5rem
.pf-c-table--pf-c-table--m-compact--cell--PaddingLeft
0.5rem
.pf-c-table--pf-c-table--m-compact--cell--first-last-child--PaddingLeft
1rem
.pf-c-table--pf-c-table--m-compact--cell--first-last-child--PaddingRight
1rem
.pf-c-table--pf-c-table--m-compact--cell--first-last-child--xl--PaddingLeft
1.5rem
.pf-c-table--pf-c-table--m-compact--cell--first-last-child--xl--PaddingRight
1.5rem
.pf-c-table--pf-c-table--m-compact--FontSize
0.875rem
.pf-c-table--pf-c-table--m-compact__expandable-row-content--PaddingTop
1.5rem
.pf-c-table--pf-c-table--m-compact__expandable-row-content--PaddingRight
1.5rem
.pf-c-table--pf-c-table--m-compact__expandable-row-content--PaddingBottom
1.5rem
.pf-c-table--pf-c-table--m-compact__expandable-row-content--PaddingLeft
1.5rem
.pf-c-table--pf-c-table--nested--first-last-child--PaddingRight
4rem
.pf-c-table--pf-c-table--nested--first-last-child--PaddingLeft
4rem
.pf-c-table--pf-c-table__expandable-row--m-expanded--BorderBottomColor
#d2d2d2
.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-c-table tr > *--pf-hidden-visible--Visibility
visible
.pf-c-table tr > *--pf-hidden-visible--visible--Display
table-cell
.pf-c-table tr > .pf-m-hidden--pf-hidden-visible--Display
none
.pf-c-table tr > .pf-m-hidden--pf-hidden-visible--Visibility
hidden
.pf-c-table tr > *:first-child--pf-c-table--cell--PaddingLeft
1rem
.pf-c-table tr > *:last-child--pf-c-table--cell--PaddingRight
1rem
.pf-c-table tr > *.pf-m-help--pf-c-table--cell--MinWidth
11ch
.pf-c-table thead--pf-c-table--cell--FontSize
0.875rem
.pf-c-table thead--pf-c-table--cell--FontWeight
700
.pf-c-table thead--pf-c-table--cell--MinWidth
calc(5ch + 1rem + 1rem)
.pf-c-table thead--pf-c-table--cell--MaxWidth
1px
.pf-c-table thead--pf-c-table--cell--Overflow
hidden
.pf-c-table thead--pf-c-table--cell--TextOverflow
ellipsis
.pf-c-table thead--pf-c-table--cell--WhiteSpace
nowrap
.pf-c-table tbody--pf-c-table--cell--PaddingTop
1.5rem
.pf-c-table tbody--pf-c-table--cell--PaddingBottom
1.5rem
.pf-c-table .pf-m-wrap--pf-c-table--cell--MinWidth
0
.pf-c-table .pf-m-wrap--pf-c-table--cell--MaxWidth
none
.pf-c-table .pf-m-wrap--pf-c-table--cell--Overflow
visible
.pf-c-table .pf-m-wrap--pf-c-table--cell--TextOverflow
clip
.pf-c-table .pf-m-wrap--pf-c-table--cell--WhiteSpace
normal
.pf-c-table .pf-m-nowrap--pf-c-table--cell--MinWidth
0
.pf-c-table .pf-m-nowrap--pf-c-table--cell--MaxWidth
none
.pf-c-table .pf-m-nowrap--pf-c-table--cell--Overflow
visible
.pf-c-table .pf-m-nowrap--pf-c-table--cell--TextOverflow
clip
.pf-c-table .pf-m-nowrap--pf-c-table--cell--WhiteSpace
nowrap
.pf-c-table .pf-c-table__icon--pf-c-table--cell--MinWidth
fit-content
.pf-c-table .pf-c-table__icon--pf-c-table--cell--MaxWidth
fit-content
.pf-c-table .pf-c-table__icon--pf-c-table--cell--Width
1%
.pf-c-table .pf-c-table__icon--pf-c-table--cell--Overflow
visible
.pf-c-table .pf-c-table__icon--pf-c-table--cell--TextOverflow
clip
.pf-c-table .pf-c-table__icon--pf-c-table--cell--WhiteSpace
nowrap
.pf-c-table .pf-m-break-word--pf-c-table--cell--WordBreak
break-word
.pf-c-table .pf-m-break-word--pf-c-table--cell--WhiteSpace
normal
.pf-c-table__text--pf-c-table--cell--MaxWidth
100%
.pf-c-table__text.pf-m-truncate--pf-c-table--cell--MinWidth
100%
.pf-c-table__sort .pf-c-table__text--pf-c-table--cell--MinWidth
0
.pf-c-table .pf-c-table__toggle--pf-c-table--cell--PaddingBottom
0
.pf-c-table .pf-c-table__check--pf-c-table--cell--MinWidth
0
.pf-c-table .pf-c-table__check--pf-c-table--cell--Width
1%
.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__action--pf-c-table--cell--PaddingTop
0
.pf-c-table__action--pf-c-table--cell--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__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-table__button--Color
#06c
.pf-c-table__compound-expansion-toggle--pf-c-table__button--hover--Color
#004080
.pf-c-table__compound-expansion-toggle--pf-c-table__button--focus--Color
#004080
.pf-c-table__compound-expansion-toggle--pf-c-table__button--active--Color
#004080
.pf-c-table__compound-expansion-toggle:hover--pf-c-table__compound-expansion-toggle__button--before--BorderRightWidth
1px
.pf-c-table__compound-expansion-toggle:hover--pf-c-table__compound-expansion-toggle__button--before--BorderLeftWidth
1px
.pf-c-table__compound-expansion-toggle:hover--pf-c-table__compound-expansion-toggle__button--after--BorderTopWidth
3px
.pf-c-table__compound-expansion-toggle:first-child--pf-c-table__compound-expansion-toggle__button--before--Left
0
.pf-c-table__compound-expansion-toggle:first-child--pf-c-table__compound-expansion-toggle__button--after--Left
0
.pf-c-table__compound-expansion-toggle.pf-m-expanded:first-child--pf-c-table__compound-expansion-toggle__button--before--BorderLeftWidth
0
.pf-c-table__compound-expansion-toggle.pf-m-expanded:first-child--pf-c-table__expandable-row--after--BorderLeftWidth
3px
.pf-c-table__column-help-action .pf-c-button--pf-c-button--PaddingRight
0.5rem
.pf-c-table__column-help-action .pf-c-button--pf-c-button--PaddingLeft
0.5rem
.pf-c-table__sort .pf-c-table__button--pf-c-table--cell--PaddingTop
0.375rem
.pf-c-table__sort .pf-c-table__button--pf-c-table--cell--PaddingRight
0.5rem
.pf-c-table__sort .pf-c-table__button--pf-c-table--cell--PaddingBottom
0.375rem
.pf-c-table__sort .pf-c-table__button--pf-c-table--cell--PaddingLeft
0.5rem
.pf-c-table__sort .pf-c-table__button:hover--pf-c-table__sort-indicator--Color
#151515
.pf-c-table__sort .pf-c-table__button:focus--pf-c-table__sort-indicator--Color
#151515
.pf-c-table__sort .pf-c-table__button:active--pf-c-table__sort-indicator--Color
#151515
.pf-c-table__sort.pf-m-selected .pf-c-table__button--pf-c-table__sort-indicator--Color
#06c
.pf-c-table__sort.pf-m-help--pf-c-table--th--m-help--MinWidth
15ch
.pf-c-table__expandable-row--pf-c-table--cell--PaddingTop
0
.pf-c-table__expandable-row--pf-c-table--cell--PaddingBottom
0