Skip to content
Patternfly Logo

Table

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

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.

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, 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

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

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

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
    • 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) if this row uses checkboxes, flag indicating the checkbox checked
  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.

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

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, 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

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.

Composable: Favoritable Beta

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

Composable: Tree table Beta

To enable a tree table:

  1. Pass the isTreeTable prop to the TableComposable component
  2. Use a TreeRowWrapper rather than Tr
  3. Pass the following props to each row (both the TreeRowWrapper and the treeRow in the first column):
    • isExpanded - Flag indicating the node is expanded and its children are visible
    • 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) if this row uses checkboxes, flag indicating the checkbox checked
  4. The first Td in each row will pass the following to the treeRow prop:
    • 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.
    • props - (as defined above)
    • rowIndex - number representing the index of the row

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

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
canSortFavoritesbooleanNotrueAlong with the onSort prop, enables favorites sorting, defaults to true
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
isTreeTablebooleanNofalseFlag indicating table is a tree table
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
onFavoriteOnFavoriteNoEnables favorites column Callback triggered when a row is favorited/unfavorited
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

TableComposable

NameTypeRequiredDefaultDescription
aria-labelstringNoAdds an accessible name for the Table
bordersbooleanNoRender borders Borders can only currently be disabled if the variant is set to 'compact' https://github.com/patternfly/patternfly/issues/3650
childrenReact.ReactNodeNoContent rendered inside the Table
classNamestringNoAdditional classes added to the Table
gridBreakPoint'' | 'grid' | 'grid-md' | 'grid-lg' | 'grid-xl' | 'grid-2xl'NoSpecifies the grid breakpoints
innerRefReact.Ref<any>NoForwarded ref
isStickyHeaderbooleanNoIf set to true, the table header sticks to the top of its container
isTreeTablebooleanNoFlag indicating table is a tree table
rolestringNoA valid WAI-ARIA role to be applied to the table element
variantTableVariant | 'compact'NoStyle variant for the Table compact: Reduces spacing and makes the table more compact

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
isHiddenbooleanNoFlag indicating the Tr is hidden

Th

NameTypeRequiredDefaultDescription
dataLabelstringNoThe column header the cell corresponds to. Applicable when this component is used as a direct child to <Tr>. This attribute replaces table header in mobile viewport. It is rendered by ::before pseudo element.
infoInfoTypeNoAdds tooltip/popover info button
onMouseEnter(event: any) => voidNoCallback on mouse enter
scopestringNoAdds scope to the column to associate header cells with data cells
select{ /** Callback on select */ onSelect?: OnSelect; /** Whether the cell is selected */ isSelected: boolean; }NoRenders a checkbox select so that all row checkboxes can be selected/deselected
sort{ /** Wraps the content in a button and adds a sort icon - Click callback on the sortable cell */ onSort?: OnSort; /** Provide the currently active column's index and direction */ sortBy: ISortBy; /** The column index */ columnIndex: number; /** True to make this a favoritable sorting cell */ isFavorites?: boolean; }No
tooltipReact.ReactNodeNoTooltip to show on the header cell Note: If the header cell is truncated and has simple string content, it will already attempt to display the header text If you want to show a tooltip that differs from the header text, you can set it here To disable it completely you can set it to null

Td

NameTypeRequiredDefaultDescription
actions{ /** Cell actions */ items: IActions; /** Whether to disable the actions */ disable?: boolean; /** Actions dropdown position */ dropdownPosition?: DropdownPosition; /** Actions dropdown direction */ dropdownDirection?: DropdownDirection; }NoTurns the cell into an actions cell
compoundExpand{ /** determines if the corresponding expansion row is open */ isExpanded: boolean; /** Callback on toggling of the expansion */ onToggle?: OnExpand; }NoTurns the cell into a compound expansion toggle
dataLabelstringNoThe column header the cell corresponds to. This attribute replaces table header in mobile viewport. It is rendered by ::before pseudo element.
expand{ isExpanded: boolean; /** The row index */ rowIndex: number; /** The column index */ columnIndex?: number; /** On toggling the expansion */ onToggle?: OnCollapse; }NoTurns the cell into an expansion toggle and determines if the corresponding expansion row is open
favorites{ /** Whether the corresponding row is favorited */ isFavorited: boolean; /** Callback on clicking the favorites button */ onFavorite?: OnFavorite; /** The row index */ rowIndex?: number; /** Additional props forwarded to the FavoritesCell */ props?: any; }No
noPaddingbooleanNoTrue to remove padding
select{ /** The selectable variant */ variant?: 'checkbox' | 'radio'; /** Callback on select */ onSelect?: OnSelect; /** Whether the cell is selected */ isSelected: boolean; /** Whether to disable the selection */ disable?: boolean; /** The row index */ rowIndex: number; }NoRenders a checkbox or radio select
treeRow{ /** */ onCollapse: OnTreeRowCollapse; /** */ onCheckChange: OnCheckChange; /** The row index */ rowIndex?: number; /** Additional props forwarded to the title cell of the tree row */ props?: any; }No

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--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__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