Skip to content
Patternfly Logo

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

Table examples

Basic

The Table component is a configuration based component that takes a less declarative and more implicit approach about laying out the table structure, such as the rows and cells within it. For a more explicit and declarative approach, you can use the TableComposable component.

RepositoriesBranchesPull requestsWorkspacesLast commit
Repository oneBranch onePR oneWorkspace oneCommit one
Repository twoBranch twoPR twoWorkspace twoCommit two
Repository threeBranch threePR threeWorkspace threeCommit three

Row click handler and header cell tooltips/popovers

Array items for columns provided to the Table's cells prop, can be simple strings or objects.

cells: (ICell | string)[];

ICell (excerpt):

interface ICell { /* cell contents */ title?: string | React.ReactNode; /** transformations applied to the header cell */ transforms?: ITransform[]; /** transformations applied to the cells within the column's body */ cellTransforms?: ITransform[]; /** Additional header props, it contains the info prop as well which can be used to add tooltip/popover */ header?: HeaderType; }

If you wish to pass additional props, formatters, or add a tooltip/popover, use objects. Examples:

// simple columns: ['Repositories', 'Branches', 'Pull requests', 'Workspaces', 'Last commit'] // with tooltip columns: [ { title: 'Repositories', transforms: [ info({ tooltip: 'More information about repositories' }) ] } ] // center header and body cells within the column columns: [ { title: 'Last commit', transforms: [textCenter], cellTransforms: [textCenter] } ]

Similarly, the rows array can contain string arrays, or object arrays

rows: (IRow | string[])[]

IRow (excerpt):

interface IRow extends RowType { cells?: (React.ReactNode | IRowCell)[]; props?: any; fullWidth?: boolean; noPadding?: boolean; } interface IRowCell { title?: string | React.ReactNode; props?: any; formatters?: IFormatter[]; }
Row click handler table
Repositories
Branches
Pull requests
WorkspacesLast commit
Repository oneBranch onePR oneWorkspace oneCommit one
one - 2
four - 2five - 2
one - 3two - 3three - 3four - 3five - 3 (not centered)

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 & wrapping headers

Note: If you want to add a tooltip/popover to a sortable header, in the transforms array the info transform has to precede the sortable transform.

Last commit
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

Actions and first cell in body rows as th

To use actions you can either specify an array of actions and pass that into the Table's actions prop, or for more control you can use the actionResolver callback prop to add actions conditionally.

RepositoriesBranchesPull requestsWorkspacesLast commit
a
two1fourfive
disable actions
two3fourfive
green actions
two4fourfive
extra action props
two5fourfive
blue actions
two6fourfive

Expandable

IDBranchesPull 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

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 and breakpoint visibility modifiers

Header cellBranches (visible only on md)Pull requests (hidden only on md)Workspaces (hidden on xs)Last commit
one - 1two - 1 (visible only on md)three - 1 (hidden only on md)four - 1 (hidden on xs)five - 1
one - 2two - 2 (visible only on md)three - 2 (hidden only on md)four - 2 (hidden on xs)five - 2

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,theadcells will truncate andtbodycells will wrap. Use.pf-m-wrapon athto 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

TableComposable examples

Composable: Basic Beta

A basic example using the composable table components. The TableComposable component differs from the regular Table component, in that it allows you to compose the table by nesting the relevant Thead, Tbody, Tr, Th and Td components within it. For a less declarative and more implicit approach, use the Table component instead.

Some general notes:

  • Provide dataLabel prop to the Td components so that in mobile view the cell has a label to provide context.
  • If you want a table caption, simply place a <Caption>My caption</Caption> as the first child within a TableComposable.
  • You can set the TableComposable variant to compact
Simple table using composable components
RepositoriesBranchesPull requestsWorkspacesLast commit
onetwothreefourfive
one - 2four - 2five - 2
one - 3two - 3three - 3four - 3five - 3

Composable: Row click handler, custom row wrapper, header tooltips & popovers Beta

This example demonstrates customizing rows, adding tooltip and popover information to header items, and some other misc. props.

  • If you add the noWrap prop to Thead, it won't wrap it if there is no space
  • You can add the textCenter prop to Th or Td to center the contents
  • You can pass onClick, className, style and more to Tr
Repositories
Branches
Pull requests
WorkspacesLast commit
onetwothreefourfive
one - 2four - 2five - 2
one - 3two - 3three - 3four - 3five - 3 (not centered)

Composable: Sortable & wrapping headers Beta

This example demonstrates making columns sortable, and wrapping header text.

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 4.This is a really long table header that goes on for a long time 5.
onetwoafourfive
atwokfourfive
ptwobfourfive

Composable: Selectable Beta

This example demonstrates row selection. The selection column is just another column, but with selection specific props added. We add it as the first header cell and also as the first body cell for each row. Be sure to also add rowIndex to Td.

RepositoriesBranchesPull requestsWorkspacesLast commit
onetwoafourfive
atwokfourfive
ptwobfourfive

Composable: Selectable radio input Beta

Similarly to the selectable example above, the radio buttons use the first column. The first header cell is empty, and each body row's first cell has radio button props. Just as with selectable, be sure to also add rowIndex to Td.

RepositoriesBranchesPull requestsWorkspacesLast commit
onetwoafourfive
atwokfourfive
ptwobfourfive

Composable: Actions Beta

This example demonstrates adding actions as the last column. The header's last cell is an empty cell, and each body row's last cell is an action cell.

RepositoriesBranchesPull requestsWorkspacesLast commit
onetwoafourfive
atwokfourfive
ptwobfourfive
42bfourfive
52bfourfive

Composable: Expandable Beta

This example demonstrates having expandable rows.

  • Each parent/child row pair is enclosed in a Tbody component.
  • You can make the table more compact by setting the TableComposable variant to compact.
RepositoriesBranchesPull requestsWorkspacesLast commit
onetwoafourfive
parent 1twokfourfive
single cell
parent 2twobfourfive
single cell - fullWidth
parent 32bfourfive
single cell - noPadding
parent 42bfourfive
single cell - fullWidth & noPadding
parent 52bfourfive
spans 'Repositories' and 'Branches'
spans 'Pull requests' and 'Workspaces', and 'Last commit'
parent 62bfourfive
fullWidth, spans the collapsible column and 'Repositories'
fullWidth, spans 'Branches' and 'Pull requests'
fullWidth, spans 'Workspaces' and 'Last commit'

Composable: Compound expandable Beta

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

Composable: Cell width, breakpoint modifiers Beta

RepositoriesBranchesPull requestsWorkspacesLast commit
onetwothreefourfive
one - 2four - 2five - 2
one - 3two - 3three - 3four - 3five - 3

Composable: Controlling text Beta

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

By default,theadcells will truncate andtbodycells will wrap. Use.pf-m-wrapon athto change its behavior.

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

Composable: Modifiers with table text Beta

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.

Props

Table

NameTypeRequiredDefaultDescription
actionResolverIActionsResolverNoResolver for the given action
actionsIActionsNoActions to add to the Table
areActionsDisabledIAreActionsDisabledNoSpecifies if the Kebab for actions is disabled
aria-labelstringNoundefinedAdds an accessible name for the Table
bodyWrapperFunctionNoWrapper for the body
bordersbooleanNotrueRender borders Borders can only currently be disabled if the variant is set to 'compact' https://github.com/patternfly/patternfly/issues/3650
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/column 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
onCollapseOnCollapseNoFunction 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
onExpandOnExpandNoFunction triggered when a compound expandable item is clicked
onRowEditBetaOnRowEditNoFunction triggered when a row's inline edit is activated. Adds a column for inline edit when present.
onSelectOnSelectNoFunction 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
onSortOnSortNoFunction 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

NameTypeRequiredDefaultDescription
classNamestringNoAdditional classes added to the TableHeader

TableBody

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'secretTableRowKeyId'This prop should not be set manually
rowsIRow[]NoThis prop should not be set manually

EditableSelectInputCell

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

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

Thead

NameTypeRequiredDefaultDescription
childrenReact.ReactNodeNoContent rendered inside the <tr> row
classNamestringNoAdditional classes added to the <tr> row
innerRefReact.Ref<any>NoForwarded ref
noWrapbooleanNoWon't wrap the table head if true

Tbody

NameTypeRequiredDefaultDescription
childrenReact.ReactNodeNoContent rendered inside the <tr> row
classNamestringNoAdditional classes added to the <tr> row
innerRefReact.Ref<any>NoForwarded ref
isExpandedbooleanNoModifies the body to allow for expandable rows

Tr

NameTypeRequiredDefaultDescription
childrenReact.ReactNodeNoContent rendered inside the <tr> row
classNamestringNoAdditional classes added to the <tr> row
innerRefReact.Ref<any>NoForwarded ref
isEditablebooleanNoOnly applicable to Tr within the Tbody: Whether the row is editable
isExpandedbooleanNoOnly applicable to Tr within the Tbody: Makes the row expandable and determines if it's expanded or not

Caption

NameTypeRequiredDefaultDescription
childrenReact.ReactNodeNoContent rendered inside the <caption> caption
classNamestringNoAdditional classes added to the <caption> caption

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--cell--m-favorite--Color
#d2d2d2
.pf-c-table--pf-c-table__favorite--c-button--Color
#d2d2d2
.pf-c-table--pf-c-table__favorite--c-button--FontSize
0.875rem
.pf-c-table--pf-c-table__favorite--c-button--MarginTop
calc(0.375rem * -1)
.pf-c-table--pf-c-table__favorite--c-button--MarginRight
calc(1rem * -1)
.pf-c-table--pf-c-table__favorite--c-button--MarginBottom
calc(0.375rem * -1)
.pf-c-table--pf-c-table__favorite--c-button--MarginLeft
calc(1rem * -1)
.pf-c-table--pf-c-table__favorite--m-favorited--c-button--Color
#f0ab00
.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