Skip to content
Patternfly Logo

Table

Table

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

PatternFly has two implementations of a React table.

The first is the newer TableComposable component. It takes a more explicit and declarative approach, and its implementation more closely mirrors that of an html table. Generally, updates and new feature requests are implemented in the ComposableTable.

The second is the original Table component. It is configuration based and takes a less declarative and more implicit approach about laying out the table structure, such as the rows and cells within it.

For most common use cases, we recommend using TableComposable. Both implementations are supported and fully maintained.

Table Columns

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[]; /** transformations applied to the entire column */ columnTransforms?: ITransform[]; /** Additional header props, it contains the info prop as well which can be used to add tooltip/popover */ header?: HeaderType; /** Additional props passed into the rendered column header element */ props?: any; /** Text to display when data from this column is rendered in mobile view */ dataLabel?: string; }

If you wish to enable other built in features, use transforms to apply them to column headers or cellTransforms to apply them to every cell in that column.

// 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] } ]

Many of the subsequent examples demonstrate how to apply different transformations to enable Table features.

Table Rows

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

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 | RowCellContent; props?: any; formatters?: IFormatter[]; }

Table examples

Basic

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

Custom row wrapper

Custom row wrappers are passed to the Table component via the rowWrapper prop. Each rowWrapper should return a tr element.

rowWrapper?: (props: RowWrapperProps) => JSX.Element;

RowWrapperProps:

interface RowWrapperProps { trRef?: React.Ref<any> | Function; className?: string; onScroll?: React.UIEventHandler; onResize?: React.UIEventHandler; row?: IRow; rowProps?: { rowIndex: number; rowKey: string; }; children?: React.ReactNode; }
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 column headers

To implement sortable columns:

  1. Import and apply the sortable transform to the desired column.
  2. Pass a managed sortBy prop to the Table component. `sortBy` - Specifies the initial sorting pattern for the table - asc/desc and the index of the column to sort by
  3. Pass an onSort callback to the Table component `onSort` - (event: React.MouseEvent, columnIndex: number, sortByDirection: SortByDirection, extraData: IExtraColumnData) => void;

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.

The built in display for sorting is not fully responsive, as the column headers will be displayed per row when the screen size is small. The example below showcases how sorting may have a custom control display that can be used for small screen sizes.

Last commit
onetwoafourfive
atwokfourfive
ptwobfourfive

Sortable - custom control

Sorting a table may also be controlled with a toolbar. This toolbar item may also be hidden at large screen sizes and only displayed when the screen size is small to support responsive tables.

onetwoafourfive
afivektwothree
psevenbonesix

Selectable with checkbox

To enable row selection, set the onSelect callback prop on the Table.

To control whether a row is selected or not, the Table looks for selected: true | falsy on the row definition.

To disable selection for a row, set disableSelection: true on the row definition.

To include a 'select all' checkbox in the header row, pass true to thecanSelectAll prop on the Table.

Note: this example also demonstrates the use of the headerCol transformation being applied to the first column via the cellTransforms in the column definition. headerCol transforms the column so that instead of using td elements, the cells in that column use th elements.

RepositoriesBranchesPull requestsWorkspacesLast commit
one
twoafourfive
a
twokfourfive
p
twobfourfive

Selectable radio input

To enable row radio selection, set the onSelect callback prop on the Table, and set RowSelectVariant.radio as the selectVariant prop on the Table.

To disable selection for a row, set disableSelection: true on the row definition.

RepositoriesBranchesPull requestsWorkspacesLast commit
one
twoafourfive
a
twokfourfive
p
twobfourfive

Hoverable rows, selectable rows, and header cell tooltips/popovers

This selectable rows feature is intended for use when a table is used to present a list of objects in a Primary-detail view.

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)

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

To make an exapandable row, define a child row with the parent field set to its parent's row index. The parent row can have an isOpen field for managing the expanded state of the parent row.

Also, pass an onCollapse event handler via the prop on the Table

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

To build a compound expandable table:

  1. Pass the compoundExpand transformation via the cellTransforms field in the column definition for each column that will have an expanded section.
  2. For each expandable parent row, the cells in the expandable columns should:
    1. have a managed isOpen prop passed to the cell definition
    2. have an ariaControls value which matches the id of it’s child row
  3. For each expandable child row, the row definition needs:
    1. A parent field set to its parent’s row index
    2. A compoundParent field set to the cell index which will control the expanding/collapsing of this row
  4. An onExpand event handler prop should be passed to the Table.
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, thead cells will truncate and tbody cells will wrap. Use .pf-m-wrap on ath 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

Clear all filters and try again.

Editable rows

To make a table row editable:

  1. Pass a callback to Table via the onRowEdit prop.
  2. Define the title for the editable cells using the RowCellContent type function.
  3. Have the function return an EditableTextCell.
  4. Pass the value and name of the cell's input to the EditableTextCell via the cell's props field, which is defined as being of type EditableTextCellProps.

Example:

{ title: (value, rowIndex, cellIndex, props) => ( <EditableTextCell value={value} rowIndex={rowIndex} cellIndex={cellIndex} props={props} handleTextInputChange={this.handleTextInputChange} inputAriaLabel="Row 1 cell 1 content" /> ), props: { value: 'Row 1 cell 1 content', name: 'uniqueIdRow1Cell1' } },
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

Favoritable

To enable favoriting of a row, set the onFavorite callback prop on the Table.

To control whether a row is favorited or not, the Table looks for favorited: true | falsy on the row definition.

When you also pass a sort callback through the onSort prop, favorites sorting is also enabled.

If you want to exclude favorites from sorting, set canSortFavorites={false} on the Table.

BranchesPull requestsWorkspacesLast commit
ctwoafourfive
atwokfourfive
btwobfourfive

Tree table Beta

To enable a tree table:

  1. Pass the isTreeTable prop to the Table component
  2. Pass the following props to each row:
    • isExpanded - Flag indicating the node is expanded and its children are visible
    • isDetailsExpanded - (optional) Flag indicating the row's details are visible in responsive view
    • isHidden - Flag indicating the node's parent is expanded and this node is visible
    • aria-level - number representing how many levels deep this node is nested
    • aria-posinset - number representing where in the order this node sits amongst its siblings
    • aria-setsize - number representing the number of children this node has
    • isChecked - (optional) boolean used if this row uses checkboxes, flag indicating the checkbox checked
    • icon - (optional) ReactNode icon to display before the row title
    • toggleAriaLabel - (optional) accessible label for the expand/collapse children rows toggle arrow
    • checkAriaLabel - (optional) accessible label for the checkbox
    • showDetailsAriaLabel - (optional) accessible label for the show row details button in the responsive view
  3. Use the treeRow cellTransform in the first column of the table. treeRow expects one or two callbacks as params.
    • onCollapse - Callback when user expands/collapses a row to reveal/hide the row's children.
    • onCheckChange - (optional) Callback when user changes the checkbox on a row.
    • onToggleRowDetails - (optional) Callback when user shows/hides the row details in responsive view.

Note: If this table is going to be tested using axe-core, the tests will flag the use of aria-level, aria-posinset, and aria-setsize as violations. This is an intentional choice at this time so that the voice over technologies will recognize the flat table structure as a tree.

RepositoriesBranchesPull requestsWorkspaces
Repositories one
Branch onePull request oneWorkplace one
Repositories six
Branch sixPull request sixWorkplace six

Props

Table

*required
NameTypeDefaultDescription
cellsrequired(ICell | string)[]Cell/column data
rowsrequired(IRow | string[])[]Row data
actionResolverIActionsResolverResolver for the given action
actionsIActionsActions to add to the Table
actionsToggleReact.ReactElementThe toggle of the actions menu dropdown. A KebabToggle or DropdownToggle component
areActionsDisabledIAreActionsDisabledSpecifies if the Kebab for actions is disabled
aria-labelstringundefinedAdds an accessible name for the Table
bodyWrapperFunctionWrapper for the body
bordersbooleantrueRender borders Borders can only currently be disabled if the variant is set to 'compact' https://github.com/patternfly/patternfly/issues/3650
canSelectAllbooleantrueEnables or Disables the ability to select all - this is mutually exclusive with radio button select variant
canSortFavoritesbooleantrueAlong with the onSort prop, enables favorites sorting, defaults to true
captionReact.ReactNodeundefinedComponent used for caption
childrenReact.ReactNodenullContent rendered inside the Table
classNamestring''Additional classes added to the Table
contentIdstring'expanded-content'ID for content
dropdownDirection'up' | 'down'DropdownDirection.downThe desired direction to show the dropdown when clicking on the actions Kebab. Can only be used together with `actions` property
dropdownPosition'right' | 'left'DropdownPosition.rightThe desired position to show the dropdown when clicking on the actions Kebab. Can only be used together with `actions` property
expandIdstring'expandable-toggle'ID for expand
gridBreakPoint'' | 'grid' | 'grid-md' | 'grid-lg' | 'grid-xl' | 'grid-2xl'TableGridBreakpoint.gridMdSpecifies the grid breakpoints
headerReact.ReactNodeundefinedComponent to place in the header
isHeaderSelectDisabledbooleanfalseFlag indicating the select all checkbox is disabled
isNestedbooleanfalseFlag indicating this table is nested within another table
isStickyHeaderbooleanfalseIf set to true, the table header sticks to the top of its container
isTreeTablebooleanfalseFlag indicating table is a tree table
onCollapseOnCollapseFunction 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
onExpandOnExpandFunction triggered when a compound expandable item is clicked
onFavoriteOnFavoriteEnables favorites column Callback triggered when a row is favorited/unfavorited
onRowEditOnRowEditFunction triggered when a row's inline edit is activated. Adds a column for inline edit when present.
onSelectOnSelectFunction 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
onSortOnSortFunction triggered when sort icon is clicked
ouiaSafeNo type infotrue
rolestring'grid'A valid WAI-ARIA role to be applied to the table element
rowLabeledBystring'simple-node'label for row
rowWrapper(props: RowWrapperProps) => JSX.ElementWrapper for the row
selectVariant'checkbox' | 'radio''checkbox'Specifies the type of the select element variant - can be one of checkbox or radio button
sortByISortBySpecifies the initial sorting pattern for the table - asc/desc and the index of the column to sort by
variantliteralnullStyle variant for the Table

TableHeader

*required
NameTypeDefaultDescription
classNamestringAdditional classes added to the TableHeader

TableBody

*required
NameTypeDefaultDescription
classNamestring''Additional classes added to the TableBody
onRowClick( event: React.KeyboardEvent | React.MouseEvent, row: IRow, rowProps: IExtraRowData, computedData: IComputedData ) => void( event: React.MouseEvent | React.KeyboardEvent, row: IRow, rowProps: IExtraRowData, computedData: IComputedData ) => /* eslint-enable @typescript-eslint/no-unused-vars */ undefined as OnRowClickA click handler for the row

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--tr--BoxShadow--top--base
0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08)
.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--MarginBottom
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__sort--m-favorite__button__text--Color
#6a6e73
.pf-c-table--pf-c-table__sort--m-favorite__button--hover__text--Color
#151515
.pf-c-table--pf-c-table__sort--m-favorite__button--focus__text--Color
#151515
.pf-c-table--pf-c-table__sort--m-favorite__button--active__text--Color
#151515
.pf-c-table--pf-c-table__draggable--c-button--MarginTop
calc(0.375rem * -1)
.pf-c-table--pf-c-table__draggable--c-button--MarginRight
calc(1rem * -1)
.pf-c-table--pf-c-table__draggable--c-button--MarginBottom
calc(0.375rem * -1)
.pf-c-table--pf-c-table__draggable--c-button--MarginLeft
calc(1rem * -1)
.pf-c-table--pf-c-table__tr--m-ghost-row--Opacity
.4
.pf-c-table--pf-c-table__tr--m-ghost-row--BackgroundColor
#fff
.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__button__text--Color
currentColor
.pf-c-table--pf-c-table__sort__button--hover__text--Color
currentColor
.pf-c-table--pf-c-table__sort__button--focus__text--Color
currentColor
.pf-c-table--pf-c-table__sort__button--active__text--Color
currentColor
.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--pf-c-table--tr--m-hoverable--BoxShadow--top
0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08)
.pf-c-table--pf-c-table--tr--m-hoverable--BackgroundColor
transparent
.pf-c-table--pf-c-table--tr--m-hoverable--BoxShadow
none
.pf-c-table--pf-c-table--tr--m-hoverable--OutlineOffset
calc(-1 * 0.25rem)
.pf-c-table--pf-c-table--tr--m-hoverable--hover--BoxShadow
0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08), 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)
.pf-c-table--pf-c-table--tr--m-hoverable--hover--BackgroundColor
#fff
.pf-c-table--pf-c-table--tr--m-hoverable--focus--BoxShadow
0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08), 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)
.pf-c-table--pf-c-table--tr--m-hoverable--focus--BackgroundColor
#fff
.pf-c-table--pf-c-table--tr--m-hoverable--active--BoxShadow
0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08), 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)
.pf-c-table--pf-c-table--tr--m-hoverable--active--BackgroundColor
#fff
.pf-c-table--pf-c-table--tr--m-hoverable--m-selected--BoxShadow
0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16) inset, 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)
.pf-c-table--pf-c-table--tr--m-selected--BoxShadow--top
0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08)
.pf-c-table--pf-c-table--tr--m-selected--BackgroundColor
#fff
.pf-c-table--pf-c-table--tr--m-selected--BoxShadow
0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08), 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)
.pf-c-table--pf-c-table--tr--m-selected--OutlineOffset
calc(-1 * 0.25rem)
.pf-c-table--pf-c-table--tr--m-selected--after--BorderLeftWidth
3px
.pf-c-table--pf-c-table--tr--m-selected--after--BorderLeftColor
#06c
.pf-c-table--pf-c-table--tr--m-selected--m-selected--BoxShadow
0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)
.pf-c-table--pf-c-table--tr--m-selected--hover--m-selected--BoxShadow
0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16) inset, 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)
.pf-c-table--pf-c-table--tr--m-selected--tr--m-selected--hover--BoxShadow
0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08), 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)
.pf-c-table--pf-c-table--tbody--m-hoverable--BoxShadow--top
0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08)
.pf-c-table--pf-c-table--tbody--m-hoverable--BoxShadow
none
.pf-c-table--pf-c-table--tbody--m-hoverable--BackgroundColor
transparent
.pf-c-table--pf-c-table--tbody--m-hoverable--OutlineOffset
calc(-1 * 0.25rem)