Table

Table Composable

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 TableComposable.

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. The documentation for the older table implementation can be found under the React legacy tab.

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

TableComposable examples

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

Composable: Basic

Simple table using composable components
Repositories	Branches	Pull requests	Workspaces	Last commit
one	two	three	four	five
one - 2			four - 2	five - 2
one - 3	two - 3	three - 3	four - 3	five - 3

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 className, style and more to Tr

To add a header tooltip or popover to Th, pass a ThInfoType object via the info prop.

Composable: Sortable & wrapping headers

To make a column sortable, pass a ThSortType object via the sort prop on a column's Th.

ThSortType includes an OnSort event handler which has the following signature:

type OnSort = (
  event: React.MouseEvent,
  columnIndex: number,
  sortByDirection: SortByDirection,
  extraData: IExtraColumnData
) => void;

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. To see a full page demo of a responsive sortable table, utilizing a toolbar item to control sorting for small screens, view the Sortable - responsive demo in the React demos tab.

	Branches table header that goes on for a long time.		Workspaces table header that goes on for a long time.	Last commit table header that goes on for a long time.
one	two	a	four	five
a	two	k	four	five
p	two	b	four	five

Composable: Sortable - custom control

Sorting a table may also be controlled manually with a toolbar control. To see a full page demo of a responsive table, view the Sortable - responsive demo in the React demos tab.


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

Composable: Selectable with checkbox

To make a row selectable, the table needs a selection column. 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.

To make a column sortable, pass a ThSelectType object via the select prop on a column's Th.

To make a row sortable, pass a TdSelectType object via the select prop on each rows's first Td.

Both the TdSelectType and the ThSelectType expect an OnSelect event handler with the following signature:

OnSelect:

type OnSelect = (
  event: React.FormEvent<HTMLInputElement>,
  isSelected: boolean,
  rowIndex: number,
  rowData: IRowData,
  extraData: IExtraData
) => void;

Note: This example has a shift + select feature where holding shift while checking checkboxes will check intermediate rows' checkboxes.

Composable: Selectable radio input

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.

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

Composable: Row click handler, hoverable & selected rows

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

Repositories	Branches	Pull requests	Workspaces	Last commit
one	two	three	four	five
one - 2			four - 2	five - 2
one - 3	two - 3	three - 3	four - 3	five - 3

Composable: Actions

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.

To make a cell an action cell, render an ActionsColumn component inside a row's last Td and pass an array of IAction objects via the items prop of ActionsColumn.

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

Composable: Actions Overflow

Useing an OverflowMenu in the actions column, allowing the actions to condense into a dropdown if necessary for space.

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

Composable: Expandable

To make a parent/child row pair expandable:

Make the first cell in every row an expandable cell by passing TdExpandType object to the expand prop on the Td
Wrap the content of each child row cell in ExpandableRowContent.
Enclose each parent/child row pair in a Tbody component with an isExpanded prop.

The TdExpandType expects an OnCollapse event handler that has the following signature:

type OnCollapse = (
  event: React.MouseEvent,
  rowIndex: number,
  isOpen: boolean,
  rowData: IRowData,
  extraData: IExtraData
) => void;

Compact

	Repositories	Branches	Pull requests	Workspaces	Last commit
	one	two	a	four	five
	parent 1	two	k	four	five
	single cell
	parent 2	two	b	four	five
single cell - fullWidth
	parent 3	2	b	four	five
	single cell - noPadding
	parent 4	2	b	four	five
single cell - fullWidth & noPadding
	parent 5	2	b	four	five
	spans 'Repositories and 'Branches'		spans 'Pull requests' and 'Workspaces', and 'Last commit'
	parent 6	2	b	four	five
fullWidth, spans the collapsible column and 'Repositories'		fullWidth, spans 'Branches' and 'Pull requests'		fullWidth, spans 'Workspaces' and 'Last commit'

Composable: Compound expandable

To make a parent/child row pair compound expandable:

Pass a TdCompoundExpandType object to the compoundExpand prop on any Td that has an expandable child row
Wrap the content of each child row cell in ExpandableRowContent.
Each child Tr has an isExpanded prop.

The TdCompoundExpandType expects an OnExpand event handler with the following signature

export type OnExpand = (
  event: React.MouseEvent,
  rowIndex: number,
  colIndex: number,
  isOpen: boolean,
  rowData: IRowData,
  extraData: IExtraData
) => void;

Repositories	Last commit
siemur/test-space	20 minutes	Open in GitHub
Expanded content for siemur/test-space: branches goes here!
siemur/test-space-2	20 minutes	Open in GitHub

Composable: Cell width, breakpoint modifiers

Repositories	Branches	Pull requests	Workspaces	Last commit
one	two	three	four	five
one - 2			four - 2	five - 2
one - 3	two - 3	three - 3	four - 3	five - 3

Composable: Controlling text

Truncate (width 20%)	Break word	Wrapping table header text. This th text will wrap instead of truncate.	Fit content	No 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 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

TODO: distinguish between the use cases for modifier on Td vs on TableText?

Composable: Modifiers with table text

Truncating text	Wrapping 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: Empty state

Repositories	Branches	Pull requests	Workspaces	Last commit
No results found Clear all filters and try again.

Composable: Favoritable (implemented with sortable)

To make a row favoritable, the table needs a favoritable column. Pass a TdFavoritesType object via the favorites prop on each rows's first Td in the favoritable column.

The TdFavoritesType expects an OnFavorite event handler with the following signature:

type OnFavorite = (
  event: React.MouseEvent,
  isFavorited: boolean,
  rowIndex: number,
  rowData: IRowData,
  extraData: IExtraData
) => void;

To make a favoritable column sortable, pass a ThSortType object to the favoritable column's Th with isFavorites set to true.

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

Composable: Tree table Beta

To enable a tree table:

Pass the isTreeTable prop to the TableComposable component
Use a TreeRowWrapper rather than Tr
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
- 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) 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
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.
- onToggleRowDetails - (optional) Callback when user shows/hides the row details in responsive view.
- 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.

Repositories	Branches	Pull requests	Workspaces
Repositories one	Branch one	Pull request one	Workplace one
Repositories two	Branch two	Pull request two	Workplace two
Repositories three	Branch three	Pull request three	Workplace three
Repositories four	Branch four	Pull request four	Workplace four
Repositories five	Branch five	Pull request five	Workplace five
Repositories six	Branch six	Pull request six	Workplace six
Repositories seven	Branch seven	Pull request seven	Workplace seven
Repositories eight	Branch eight	Pull request eight	Workplace eight
Repositories nine	Branch nine	Pull request nine	Workplace nine

Composable: Draggable row table Beta

To make a row draggable:

The table needs a draggable column.
Each draggable Tr needs to be passed draggable, onDrop, onDragEnd, and onDragStart props.
The Tbody needs onDragOver, onDrop, and onDragLeave props.
While the user is dragging a row, the `class needs to be applied toTableComposable`.
The draggable Td in each row needs a TdDraggableType object passed to its draggable prop.

Repositories	Branches	Pull requests	Workspaces	Last commit
row1	one	two	three	four	five
row2	one -2			four -2	five -2
row3	one - 3	two - 3	three - 3	four - 3	five - 3

Sticky table modifiers

Note: Sticky table headers and columns have a higher z-index than the z-index used for menus (dropdown, select, etc). The intent is that the contents of a scrollable table will scroll under the sticky header/column, including any expanded menus. However, there may be use cases where a menu needs to appear on top of a sticky header/column, such as an expanded menu in a toolbar above a table with a sticky header.

There are a few ways this can be handled:

Manipulate the z-index of the menu and/or table headers/columns manually.
Use the menuAppendTo prop in non-composable react components with menus to append the menu to an element outside of the table (e.g., the table's parent element) so that the menu has a higher stacking context than - and can appear on top of - sticky headers/columns as well as appear outside of any scrollable content in the table.
In the case where the menu is outside of the table (e.g., above the table in a toolbar, or below the table and the menu expands up), assign the entire table a lower z-index than the z-index of the menu. This creates a lower stacking context for the entire table compared to the menu, while preserving the stacking context of the elements inside of the table.

Composable: Sticky column

To make a column sticky, wrap TableComposable with InnerScrollContainer and add the following properties to the Th that should be sticky: isStickyColumn and hasRightBorder. To prevent the default text wrapping behavior and allow horizontal scrolling, all Th should also have the modifier="nowrap" property. To set the minimum width of the sticky column, use the stickyMinWidth property.

		Header 3	Header 4	Header 5	Header 6	Header 7	Header 8	Header 9
Fact 1	State 1	Test cell 1-3	Test cell 1-4	Test cell 1-5	Test cell 1-6	Test cell 1-7	Test cell 1-8	Test cell 1-9
Fact 2	State 2	Test cell 2-3	Test cell 2-4	Test cell 2-5	Test cell 2-6	Test cell 2-7	Test cell 2-8	Test cell 2-9
Fact 3	State 3	Test cell 3-3	Test cell 3-4	Test cell 3-5	Test cell 3-6	Test cell 3-7	Test cell 3-8	Test cell 3-9
Fact 4	State 4	Test cell 4-3	Test cell 4-4	Test cell 4-5	Test cell 4-6	Test cell 4-7	Test cell 4-8	Test cell 4-9
Fact 5	State 5	Test cell 5-3	Test cell 5-4	Test cell 5-5	Test cell 5-6	Test cell 5-7	Test cell 5-8	Test cell 5-9
Fact 6	State 6	Test cell 6-3	Test cell 6-4	Test cell 6-5	Test cell 6-6	Test cell 6-7	Test cell 6-8	Test cell 6-9
Fact 7	State 7	Test cell 7-3	Test cell 7-4	Test cell 7-5	Test cell 7-6	Test cell 7-7	Test cell 7-8	Test cell 7-9
Fact 8	State 8	Test cell 8-3	Test cell 8-4	Test cell 8-5	Test cell 8-6	Test cell 8-7	Test cell 8-8	Test cell 8-9
Fact 9	State 9	Test cell 9-3	Test cell 9-4	Test cell 9-5	Test cell 9-6	Test cell 9-7	Test cell 9-8	Test cell 9-9

Composable: Multiple sticky columns

To make multiple columns sticky, wrap TableComposable with InnerScrollContainer and add isStickyColumn to all columns that should be sticky. The rightmost column should also have the hasRightBorder property, and each sticky column after the first must define a stickyLeftOffset property that equals the combined width of the previous sticky columns - set by stickyMinWidth. To prevent the default text wrapping behavior and allow horizontal scrolling, all Th should also have the modifier="nowrap" property.

		Header 3	Header 4	Header 5	Header 6	Header 7	Header 8	Header 9
Fact 1	State 1	Test cell 1-3	Test cell 1-4	Test cell 1-5	Test cell 1-6	Test cell 1-7	Test cell 1-8	Test cell 1-9
Fact 2	State 2	Test cell 2-3	Test cell 2-4	Test cell 2-5	Test cell 2-6	Test cell 2-7	Test cell 2-8	Test cell 2-9
Fact 3	State 3	Test cell 3-3	Test cell 3-4	Test cell 3-5	Test cell 3-6	Test cell 3-7	Test cell 3-8	Test cell 3-9
Fact 4	State 4	Test cell 4-3	Test cell 4-4	Test cell 4-5	Test cell 4-6	Test cell 4-7	Test cell 4-8	Test cell 4-9
Fact 5	State 5	Test cell 5-3	Test cell 5-4	Test cell 5-5	Test cell 5-6	Test cell 5-7	Test cell 5-8	Test cell 5-9
Fact 6	State 6	Test cell 6-3	Test cell 6-4	Test cell 6-5	Test cell 6-6	Test cell 6-7	Test cell 6-8	Test cell 6-9
Fact 7	State 7	Test cell 7-3	Test cell 7-4	Test cell 7-5	Test cell 7-6	Test cell 7-7	Test cell 7-8	Test cell 7-9
Fact 8	State 8	Test cell 8-3	Test cell 8-4	Test cell 8-5	Test cell 8-6	Test cell 8-7	Test cell 8-8	Test cell 8-9
Fact 9	State 9	Test cell 9-3	Test cell 9-4	Test cell 9-5	Test cell 9-6	Test cell 9-7	Test cell 9-8	Test cell 9-9

Composable: Sticky columns and header

To maintain proper sticky behavior across sticky columns and header, TableComposable must be wrapped with OuterScrollContainer and InnerScrollContainer as shown in the example below.

		Header 3	Header 4	Header 5	Header 6	Header 7	Header 8	Header 9
Fact 1	State 1	Test cell 1-3	Test cell 1-4	Test cell 1-5	Test cell 1-6	Test cell 1-7	Test cell 1-8	Test cell 1-9
Fact 2	State 2	Test cell 2-3	Test cell 2-4	Test cell 2-5	Test cell 2-6	Test cell 2-7	Test cell 2-8	Test cell 2-9
Fact 3	State 3	Test cell 3-3	Test cell 3-4	Test cell 3-5	Test cell 3-6	Test cell 3-7	Test cell 3-8	Test cell 3-9
Fact 4	State 4	Test cell 4-3	Test cell 4-4	Test cell 4-5	Test cell 4-6	Test cell 4-7	Test cell 4-8	Test cell 4-9
Fact 5	State 5	Test cell 5-3	Test cell 5-4	Test cell 5-5	Test cell 5-6	Test cell 5-7	Test cell 5-8	Test cell 5-9
Fact 6	State 6	Test cell 6-3	Test cell 6-4	Test cell 6-5	Test cell 6-6	Test cell 6-7	Test cell 6-8	Test cell 6-9
Fact 7	State 7	Test cell 7-3	Test cell 7-4	Test cell 7-5	Test cell 7-6	Test cell 7-7	Test cell 7-8	Test cell 7-9
Fact 8	State 8	Test cell 8-3	Test cell 8-4	Test cell 8-5	Test cell 8-6	Test cell 8-7	Test cell 8-8	Test cell 8-9
Fact 9	State 9	Test cell 9-3	Test cell 9-4	Test cell 9-5	Test cell 9-6	Test cell 9-7	Test cell 9-8	Test cell 9-9

Nested column headers

To make a nested column header:

Wrap TableComposable with InnerScrollContainer.
Pass nestedHeaderColumnSpans to TableComposable. nestedHeaderColumnSpans is an array of numbers representing the column spans of the top level columns to TableComposable, where each number is equal to the number of sub columns for a column, or 1 if a column contains no sub columns.
Pass hasNestedHeader to Thead.
Pass two Tr as children of Thead.

The first Tr represents the top level of columns, and each must pass either rowSpan if the column does not contain sub columns or colSpan if the column contains sub columns. The value of rowSpan is equal to the number of rows the nested header will span, typically 2, and the value of colSpan is equal to the number of sub columns in a column. Each Th except the last should also pass hasRightBorder.

The second Tr represents the second level of sub columns. The Th in this row each should pass isSubHeader, and the last sub column of a column should also pass hasRightBorder.

Composable: Nested column headers

Pods			Ports

api-pod-source-name	api-pod-destination-name	Tue Jun 22 2021 7:58:24 PM	443 (HTTPS)	24 (SMTP)	TCP	1.9 Kbps	2.1 KB	3
api-pod-source2-name	api-pod-destination2-name	Tue Jun 22 2021 9:42:01 PM	80 (HTTP)	24 (SMTP)	UDP	3.4 Kbps	6.1 KB	7

Composable: Nested column headers and expandable rows

	Team	Members			Contact
	Team	Design Lead	Interaction Designer	Visual Designer	Contact
	Developer program 1	Person 1	Person 2	Person 3	Message us!
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
	Developer program 2	Person A	Person B	Person C	Message us!
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
	Developer program 3	Person X	Person Y	Person Z	Message us!
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Composable: Expandable with nested table

Repositories

Branches

Pull requests

Link

Action

Node 1

Link 1

Repositories	Branches	Pull requests	Workspaces	Last commit
Repository 1	25	25	5	2 days ago
Repository 2	25	25	5	2 days ago
Repository 3	25	25	5	2 days ago
Repository 4	25	25	5	2 days ago

Node 2

Link 2

Node 3

Link 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Node 4

Link 4

Expandable row content has no padding.

Striped

Composable: Striped

To apply striping to a basic table, add the isStriped property to TableComposable.

Simple striped table using composable components
Repositories	Branches	Pull requests	Workspaces	Last commit
Repository 1	10	25	5	2 days ago
Repository 2	10	25	5	2 days ago
Repository 3	10	25	5	2 days ago
Repository 4	10	25	5	2 days ago

Composable: Striped expandable

To apply striping to an expandable table, add the isStriped and isExpandable properties to TableComposable.

Compact

	Repositories	Branches	Pull requests	Workspaces	Last commit
	one	two	a	four	five
	parent 1	two	k	four	five
	single cell
	parent 2	two	b	four	five
single cell - fullWidth
	parent 3	2	b	four	five
	single cell - noPadding
	parent 4	2	b	four	five
single cell - fullWidth & noPadding
	parent 5	2	b	four	five
	spans 'Repositories and 'Branches'		spans 'Pull requests' and 'Workspaces', and 'Last commit'
	parent 6	2	b	four	five
fullWidth, spans the collapsible column and 'Repositories'		fullWidth, spans 'Branches' and 'Pull requests'		fullWidth, spans 'Workspaces' and 'Last commit'

Composable: Striped multiple tobdy

When there are multiple Tbody components within a table, a more granular application of striping may be controlled by adding either the isEvenStriped or isOddStriped properties to Tbody. These properties will stripe even or odd rows within that Tbody respectively.

Striped table using multiple tbody components
Repositories	Branches	Pull requests	Workspaces	Last commit
tbody 1 - Repository 1 (odd rows striped)	10	25	5	2 days ago
tbody 1 - Repository 2	10	25	5	2 days ago
tbody 1 - Repository 3 (odd rows striped)	10	25	5	2 days ago
tbody 2 - Repository 4	10	25	5	2 days ago
tbody 2 - Repository 5 (even rows striped)	10	25	5	2 days ago
tbody 2 - Repository 6	10	25	5	2 days ago
tbody 2 - Repository 7 (even rows striped)	10	25	5	2 days ago

Composable: Striped tr

To manually control striping, add the isStriped property to each desired Tr. This replaces adding the isStriped property to TableComposable.

Manually striped table using composable components
Repositories	Branches	Pull requests	Workspaces	Last commit
Repository 1	10	25	5	2 days ago
Repository 2	10	25	5	2 days ago
Repository 3	10	25	5	2 days ago
Repository 4	10	25	5	2 days ago

Props

TableComposable

*required
Name	Type	Description
aria-label	string	Adds an accessible name for the Table
borders	boolean	Render borders
children	React.ReactNode	Content rendered inside the Table
className	string	Additional classes added to the Table
gridBreakPoint	'' \| 'grid' \| 'grid-md' \| 'grid-lg' \| 'grid-xl' \| 'grid-2xl'	Specifies the grid breakpoints
hasSelectableRowCaption	boolean	Flag to apply a caption element with visually hidden instructions that improves a11y for tables with selectable rows. If this prop is set to true other caption elements should not be passed as children of this table, and you should instead use the selectableRowCaptionText prop.
innerRef	React.RefObject<any>	Forwarded ref
isExpandable	boolean	Flag indicating this table contains expandable rows to maintain proper striping
isNested	boolean	Flag indicating this table is nested within another table
isStickyHeader	boolean	If set to true, the table header sticks to the top of its container
isStriped	boolean	Flag indicating this table should be striped. This property works best for a single <tbody> table. Striping may also be done manually by applying this property to Tbody and Tr components.
isTreeTable	boolean	Flag indicating table is a tree table
nestedHeaderColumnSpans	number[]	Collection of column spans for nested headers. Deprecated: see https://github.com/patternfly/patternfly/issues/4584
role	string	A valid WAI-ARIA role to be applied to the table element
selectableRowCaptionText	string	Visible text to add alongside the hidden a11y caption for tables with selectable rows. This prop must be used to add custom caption content to the table when the hasSelectableRowCaption prop is set to true.
variant	TableVariant \| 'compact'	Style variant for the Table compact: Reduces spacing and makes the table more compact

Thead

*required
Name	Type	Description
children	React.ReactNode	Content rendered inside the <thead> row group
className	string	Additional classes added to the <thead> element
hasNestedHeader	boolean	Indicates the <thead> contains a nested header
innerRef	React.Ref<any>	Forwarded ref
noWrap	boolean	Won't wrap the table head if true

Tbody

*required
Name	Type	Description
children	React.ReactNode	Content rendered inside the <tbody> row group
className	string	Additional classes added to the <tbody> element
innerRef	React.Ref<any>	Forwarded ref
isEvenStriped	boolean	Flag indicating the <tbody> contains evenly striped rows.
isExpanded	boolean	Modifies the body to allow for expandable rows
isOddStriped	boolean	Flag indicating the <tbody> contains oddly striped rows.

Tr

*required
Name	Type	Description
children	React.ReactNode	Content rendered inside the <tr> row
className	string	Additional classes added to the <tr> row
innerRef	React.Ref<any>	Forwarded ref
isEditable	boolean	Only applicable to Tr within the Tbody: Whether the row is editable
isExpanded	boolean	Only applicable to Tr within the Tbody: Makes the row expandable and determines if it's expanded or not
isHidden	boolean	Flag indicating the Tr is hidden
isHoverable	boolean	Flag which adds hover styles for the table row
isRowSelected	boolean	Flag indicating the row is selected - adds selected styling
isSelectable	boolean	Flag indicating that the row is selectable
isStriped	boolean	Flag indicating the row is striped
onRowClick	(event?: React.KeyboardEvent \| React.MouseEvent) => void	An event handler for the row
resetOffset	boolean	Flag indicating the spacing offset of the first cell should be reset

Th

*required
Name	Type	Description
dataLabel	string	The 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.
expand	ThExpandType	Renders a chevron so that all row chevrons can be expanded/collapsed
hasRightBorder	boolean	Adds a border to the right side of the cell
info	ThInfoType	Adds tooltip/popover info button
isStickyColumn	boolean	Indicates the header column should be sticky
isSubheader	boolean	Indicates the <th> is part of a subheader of a nested header
onMouseEnter	(event: any) => void	Callback on mouse enter
scope	string	Adds scope to the column to associate header cells with data cells
select	ThSelectType	Renders a checkbox select so that all row checkboxes can be selected/deselected
sort	ThSortType	Formats the header so that its column will be sortable
stickyLeftOffset	string	Left offset of a sticky column. This will typically be equal to the combined value set by stickyMinWidth of any sticky columns that precede the current sticky column.
stickyMinWidth	string	Minimum width for a sticky column
tooltip	React.ReactNode	Tooltip 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

*required
Name	Type	Description
actions	TdActionsType	Turns the cell into an actions cell
compoundExpand	TdCompoundExpandType	Turns the cell into a compound expansion toggle
dataLabel	string	The column header the cell corresponds to. This attribute replaces table header in mobile viewport. It is rendered by ::before pseudo element.
draggableRow	TdDraggableType	Turns the cell into the first cell in a draggable row
expand	TdExpandType	Turns the cell into an expansion toggle and determines if the corresponding expansion row is open
favorites	TdFavoritesType	Turns the cell into a favorites cell with a star button
isActionCell	boolean	Applies pf-c-table__action to td
noPadding	boolean	True to remove padding
select	TdSelectType	Renders a checkbox or radio select
treeRow	TdTreeRowType	Turns the cell into the first cell in a tree table row

Caption

*required
Name	Type	Default	Description
children	React.ReactNode		Content rendered inside the caption
className	string		Additional classes added to the caption

TableText

*required
Name	Type	Default	Description
children	React.ReactNode	null	Content rendered within the table text
className	string	''	Additional classes added to the table text
onMouseEnter	(event: any) => void	() => {}	callback used to create the tooltip if text is truncated
tooltip	string	''	text to display on the tooltip
tooltipProps	Omit<TooltipProps, 'content'>	{}	other props to pass to the tooltip
variant	TableTextVariant \| 'span' \| 'div'	'span'	Determines which element to render as a table text
wrapModifier	WrapModifier \| 'wrap' \| 'nowrap' \| 'truncate' \| 'breakWord' \| 'fitContent'	null	Determines which wrapping modifier to apply to the table text

TdActionsType

*required
Name	Type	Description
itemsrequired	IActions	Cell actions
actionsToggle	(props: CustomActionsToggleProps) => React.ReactNode	Custom toggle for the actions menu
disable	boolean	Whether to disable the actions
dropdownDirection	DropdownDirection	Actions dropdown direction
dropdownPosition	DropdownPosition	Actions dropdown position
rowIndex	number	The row index

TdSelectType

*required
Name	Type	Description
isSelectedrequired	boolean	Whether the cell is selected
rowIndexrequired	number	The row index
disable	boolean	Whether to disable the selection
onSelect	OnSelect	Callback on select
props	any	Additional props forwarded to select rowData
variant	'checkbox' \| 'radio'	The selectable variant

ThSelectType

*required
Name	Type	Description
isSelectedrequired	boolean	Whether the cell is selected
isHeaderSelectDisabled	boolean	Flag indicating the select checkbox in the th is disabled
onSelect	OnSelect	Callback on select

TdTreeRowType

*required
Name	Type	Description
onCollapserequired	OnTreeRowCollapse	Callback when user expands/collapses a row to reveal/hide the row's children
onCheckChange	OnCheckChange	(optional) Callback when user changes the checkbox on a row
onToggleRowDetails	OnToggleRowDetails	(optional) Callback when user shows/hides the row details in responsive view.
props	any	Additional props forwarded to the title cell of the tree row
rowIndex	number	The row index

TdCompoundExpandType

*required
Name	Type	Default	Description
isExpandedrequired	boolean		determines if the corresponding expansion row is open
onToggle	OnExpand		Callback on toggling of the expansion

TdFavoritesType

*required
Name	Type	Description
isFavoritedrequired	boolean	Whether the corresponding row is favorited
onFavorite	OnFavorite	Callback on clicking the favorites button
props	any	Additional props forwarded to the FavoritesCell
rowIndex	number	The row index

TdDraggableType

*required
Name	Type	Default	Description
idrequired	string		Id of the draggable row

ThInfoType

*required
Name	Type	Default	Description
ariaLabel	string
className	string
popover	React.ReactNode
popoverProps	Omit<PopoverProps, 'bodyContent'>
tooltip	React.ReactNode
tooltipProps	Omit<TooltipProps, 'content'>

TdExpandType

*required
Name	Type	Description
isExpandedrequired	boolean	Flag indicating the child row associated with this cell is expanded
rowIndexrequired	number	The row index
columnIndex	number	The column index
onToggle	OnCollapse	On toggling the expansion

ThExpandType

*required
Name	Type	Description
areAllExpandedrequired	boolean	Whether all are expanded
collapseAllAriaLabelrequired	''	Alternative aria label
onToggle	OnCollapse	On toggling the expansion

EditableSelectInputCell

*required
Name	Type	Default	Description
cellIndexrequired	number		Cell index of this select input cell
propsrequired	EditableSelectInputProps		Props to build the select component
rowIndexrequired	number		Row index of this select input cell
clearSelection	(rowIndex: number, cellIndex: number, event?: React.MouseEvent) => void		Event handler which fires when the user clears the selections
isDisabled	boolean		Flag indicating the select input is disabled
isOpen	boolean	false	Flag indicating the select menu is open
onSelect	( newValue: string \| SelectOptionObject, event: React.MouseEvent \| React.ChangeEvent, rowIndex: number, cellIndex: number, isPlaceholder?: boolean ) => void	() => {}	Event handler which fires when user selects an option in this cell
onToggle	(isExpanded: boolean) => void	() => {}	Event handler which fires when the select toggle is toggled
options	React.ReactElement[]	[]	Options to display in the expandable select menu
selections	string \| SelectOptionObject \| (string \| SelectOptionObject)[]	['']	Current selected options to display as the read only value of the table cell

EditableTextCell

*required
Name	Type	Default	Description
cellIndexrequired	number		Cell index of this text cell
handleTextInputChangerequired	( newValue: string, event: React.FormEvent<HTMLInputElement>, rowIndex: number, cellIndex: number ) => void		Event handler which fires when user changes the text in this cell
inputAriaLabelrequired	string		accessible label of the text input
propsrequired	EditableTextCellProps		Props to build the input
rowIndexrequired	number		Row index of this text cell
valuerequired	string		The current value of the text input
isDisabled	boolean	false	flag indicating if the text input is disabled

EditableSelectInputProps

*required
Name	Type	Description
[key: string]required	any	arbitrary data to pass to the internal select component in the editable select input cell
isSelectOpenrequired	boolean	Flag controlling isOpen state of select
namerequired	string	Name of the select input
optionsrequired	React.ReactElement[]	Array of react elements to display in the select menu
selectedrequired	string \| SelectOptionObject \| (string \| SelectOptionObject)[]	String or SelectOptionObject, or array of strings or SelectOptionObjects representing current selections
valuerequired	string \| string[]	Value to display in the cell
editableSelectProps	SelectProps	Props to be passed down to the Select component

EditableTextCellProps

*required
Name	Type	Description
[key: string]required	any	arbitrary data to pass to the internal text input in the editable text cell
namerequired	string	Name of the input
valuerequired	string	Value to display in the cell

ThSortType

*required
Name	Type	Description
columnIndexrequired	number	The column index
sortByrequired	ISortBy	Provide the currently active column's index and direction
isFavorites	boolean	True to make this a favoritable sorting cell
onSort	OnSort	Wraps the content in a button and adds a sort icon - Click callback on the sortable cell

ISortBy

*required
Name	Type	Description
defaultDirection	'asc' \| 'desc'	Defaulting sorting direction. Defaults to "asc".
direction	'asc' \| 'desc'	Current sort direction
index	number	Index of the current sorted column

InnerScrollContainer

*required
Name	Type	Default	Description
children	React.ReactNode		Content rendered inside the inner scroll container
className	string		Additional classes added to the container

OuterScrollContainer

*required
Name	Type	Default	Description
children	React.ReactNode		Content rendered inside the outer scroll container
className	string		Additional classes added to the container

CSS variables


	.pf-c-table	--pf-global--Color--100	#151515
--pf-global--Color--100 --pf-global--Color--dark-100 $pf-global--Color--dark-100 $pf-color-black-900 #151515
	.pf-c-table	--pf-global--Color--200	#6a6e73
--pf-global--Color--200 --pf-global--Color--dark-200 $pf-global--Color--dark-200 $pf-color-black-600 #6a6e73
	.pf-c-table	--pf-global--BorderColor--100	#d2d2d2
--pf-global--BorderColor--100 --pf-global--BorderColor--dark-100 $pf-global--BorderColor--dark-100 $pf-color-black-300 #d2d2d2
	.pf-c-table	--pf-global--primary-color--100	#06c
--pf-global--primary-color--100 --pf-global--primary-color--dark-100 $pf-global--primary-color--dark-100 $pf-color-blue-400 #06c
	.pf-c-table	--pf-global--link--Color	#06c
--pf-global--link--Color --pf-global--link--Color--dark $pf-global--link--Color--dark $pf-global--primary-color--100 $pf-color-blue-400 #06c
	.pf-c-table	--pf-global--link--Color--hover	#004080
--pf-global--link--Color--hover --pf-global--link--Color--dark--hover $pf-global--link--Color--dark--hover $pf-global--primary-color--200 $pf-color-blue-500 #004080
	.pf-c-table	--pf-global--BackgroundColor--100	#fff
--pf-global--BackgroundColor--100 --pf-global--BackgroundColor--light-100 $pf-global--BackgroundColor--light-100 $pf-color-white #fff
	.pf-c-table	--pf-c-table--BackgroundColor	#fff
--pf-c-table--BackgroundColor --pf-global--BackgroundColor--100 $pf-global--BackgroundColor--100 $pf-color-white #fff
	.pf-c-table	--pf-c-table--BorderColor	#d2d2d2
--pf-c-table--BorderColor --pf-global--BorderColor--100 $pf-global--BorderColor--100 $pf-color-black-300 #d2d2d2
	.pf-c-table	--pf-c-table--border-width--base	1px
--pf-c-table--border-width--base --pf-global--BorderWidth--sm $pf-global--BorderWidth--sm 1px
	.pf-c-table	--pf-c-table-caption--FontSize	0.875rem
--pf-c-table-caption--FontSize --pf-global--FontSize--sm $pf-global--FontSize--sm pf-font-prem(14px) 0.875rem
	.pf-c-table	--pf-c-table-caption--Color	#6a6e73
--pf-c-table-caption--Color --pf-global--Color--200 $pf-global--Color--200 $pf-color-black-600 #6a6e73
	.pf-c-table	--pf-c-table-caption--PaddingTop	1rem
--pf-c-table-caption--PaddingTop --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-table	--pf-c-table-caption--PaddingRight	1.5rem
--pf-c-table-caption--PaddingRight --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-table	--pf-c-table-caption--PaddingBottom	1rem
--pf-c-table-caption--PaddingBottom --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-table	--pf-c-table-caption--PaddingLeft	1.5rem
--pf-c-table-caption--PaddingLeft --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-table	--pf-c-table-caption--xl--PaddingRight	1rem
--pf-c-table-caption--xl--PaddingRight --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-table	--pf-c-table-caption--xl--PaddingLeft	1rem
--pf-c-table-caption--xl--PaddingLeft --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-table	--pf-c-table--thead--cell--FontSize	0.875rem
--pf-c-table--thead--cell--FontSize --pf-global--FontSize--sm $pf-global--FontSize--sm pf-font-prem(14px) 0.875rem
	.pf-c-table	--pf-c-table--thead--cell--FontWeight	700
--pf-c-table--thead--cell--FontWeight --pf-global--FontWeight--bold $pf-global--FontWeight--bold 700
	.pf-c-table	--pf-c-table--tbody--cell--PaddingTop	1.5rem
--pf-c-table--tbody--cell--PaddingTop --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-table	--pf-c-table--tbody--cell--PaddingBottom	1.5rem
--pf-c-table--tbody--cell--PaddingBottom --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-table	--pf-c-table--tr--BoxShadow--top--base	0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08)
	.pf-c-table	--pf-c-table--cell--Padding--base	1rem
--pf-c-table--cell--Padding--base --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-table	--pf-c-table--cell--FontSize	1rem
--pf-c-table--cell--FontSize --pf-global--FontSize--md $pf-global--FontSize--md pf-font-prem(16px) 1rem
	.pf-c-table	--pf-c-table--cell--FontWeight	400
--pf-c-table--cell--FontWeight --pf-global--FontWeight--normal $pf-global--FontWeight--normal 400
	.pf-c-table	--pf-c-table--cell--Color	#151515
--pf-c-table--cell--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-table	--pf-c-table--cell--PaddingTop	1rem
--pf-c-table--cell--PaddingTop --pf-c-table--cell--Padding--base --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-table	--pf-c-table--cell--PaddingRight	1rem
--pf-c-table--cell--PaddingRight --pf-c-table--cell--Padding--base --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-table	--pf-c-table--cell--PaddingBottom	1rem
--pf-c-table--cell--PaddingBottom --pf-c-table--cell--Padding--base --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-table	--pf-c-table--cell--PaddingLeft	1rem
--pf-c-table--cell--PaddingLeft --pf-c-table--cell--Padding--base --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-table	--pf-c-table--cell--first-last-child--PaddingLeft	1rem
--pf-c-table--cell--first-last-child--PaddingLeft --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-table	--pf-c-table--cell--first-last-child--PaddingRight	1rem
--pf-c-table--cell--first-last-child--PaddingRight --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-table	--pf-c-table--cell--first-last-child--xl--PaddingLeft	1.5rem
--pf-c-table--cell--first-last-child--xl--PaddingLeft --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-table	--pf-c-table--cell--first-last-child--xl--PaddingRight	1.5rem
--pf-c-table--cell--first-last-child--xl--PaddingRight --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-table	--pf-c-table--tr--m-first-cell-offset-reset--cell--PaddingLeft	1rem
--pf-c-table--tr--m-first-cell-offset-reset--cell--PaddingLeft --pf-c-table--cell--Padding--base --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.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-border-right--before--BorderRightWidth	1px
--pf-c-table--cell--m-border-right--before--BorderRightWidth --pf-global--BorderWidth--sm $pf-global--BorderWidth--sm 1px
	.pf-c-table	--pf-c-table--cell--m-border-right--before--BorderRightColor	#d2d2d2
--pf-c-table--cell--m-border-right--before--BorderRightColor --pf-global--BorderColor--100 $pf-global--BorderColor--100 $pf-color-black-300 #d2d2d2
	.pf-c-table	--pf-c-table--cell--m-border-left--before--BorderLeftWidth	1px
--pf-c-table--cell--m-border-left--before--BorderLeftWidth --pf-global--BorderWidth--sm $pf-global--BorderWidth--sm 1px
	.pf-c-table	--pf-c-table--cell--m-border-left--before--BorderLeftColor	#d2d2d2
--pf-c-table--cell--m-border-left--before--BorderLeftColor --pf-global--BorderColor--100 $pf-global--BorderColor--100 $pf-color-black-300 #d2d2d2
	.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--m-truncate--cell--MinWidth calc(5ch + --pf-c-table--cell--PaddingRight + --pf-c-table--cell--PaddingLeft) calc(5ch + --pf-c-table--cell--Padding--base + --pf-c-table--cell--Padding--base) calc(5ch + --pf-global--spacer--md + --pf-global--spacer--md) calc(5ch + $pf-global--spacer--md + $pf-global--spacer--md) calc(5ch + pf-size-prem(16px) + pf-size-prem(16px)) 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__button--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-table	--pf-c-table__button--hover--Color	#151515
--pf-c-table__button--hover--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-table	--pf-c-table__button--focus--Color	#151515
--pf-c-table__button--focus--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-table	--pf-c-table__button--active--Color	#151515
--pf-c-table__button--active--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-table	--pf-c-table__button--OutlineOffset	calc(3px * -1)
--pf-c-table__button--OutlineOffset calc(--pf-global--BorderWidth--lg * -1) calc($pf-global--BorderWidth--lg * -1) 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__check--input--FontSize --pf-global--FontSize--md $pf-global--FontSize--md pf-font-prem(16px) 1rem
	.pf-c-table	--pf-c-table--cell--m-favorite--Color	#d2d2d2
--pf-c-table--cell--m-favorite--Color --pf-global--Color--light-300 $pf-global--Color--light-300 $pf-color-black-300 #d2d2d2
	.pf-c-table	--pf-c-table__favorite--c-button--Color	#d2d2d2
--pf-c-table__favorite--c-button--Color --pf-global--Color--light-300 $pf-global--Color--light-300 $pf-color-black-300 #d2d2d2
	.pf-c-table	--pf-c-table__favorite--c-button--FontSize	0.875rem
--pf-c-table__favorite--c-button--FontSize --pf-global--FontSize--sm $pf-global--FontSize--sm pf-font-prem(14px) 0.875rem
	.pf-c-table	--pf-c-table__favorite--c-button--MarginTop	calc(0.375rem * -1)
--pf-c-table__favorite--c-button--MarginTop calc(--pf-global--spacer--form-element * -1) calc($pf-global--spacer--form-element * -1) calc(pf-size-prem(6px) * -1) calc(0.375rem * -1)
	.pf-c-table	--pf-c-table__favorite--c-button--MarginRight	calc(1rem * -1)
--pf-c-table__favorite--c-button--MarginRight calc(--pf-global--spacer--md * -1) calc($pf-global--spacer--md * -1) calc(pf-size-prem(16px) * -1) calc(1rem * -1)
	.pf-c-table	--pf-c-table__favorite--c-button--MarginBottom	calc(0.375rem * -1)
--pf-c-table__favorite--c-button--MarginBottom calc(--pf-global--spacer--form-element * -1) calc($pf-global--spacer--form-element * -1) calc(pf-size-prem(6px) * -1) calc(0.375rem * -1)
	.pf-c-table	--pf-c-table__favorite--c-button--MarginLeft	calc(1rem * -1)
--pf-c-table__favorite--c-button--MarginLeft calc(--pf-global--spacer--md * -1) calc($pf-global--spacer--md * -1) calc(pf-size-prem(16px) * -1) calc(1rem * -1)
	.pf-c-table	--pf-c-table__favorite--m-favorited--c-button--Color	#f0ab00
--pf-c-table__favorite--m-favorited--c-button--Color --pf-global--palette--gold-400 $pf-color-gold-400 #f0ab00
	.pf-c-table	--pf-c-table__sort--m-favorite__button__text--Color	#6a6e73
--pf-c-table__sort--m-favorite__button__text--Color --pf-global--Color--200 $pf-global--Color--200 $pf-color-black-600 #6a6e73
	.pf-c-table	--pf-c-table__sort--m-favorite__button--hover__text--Color	#151515
--pf-c-table__sort--m-favorite__button--hover__text--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-table	--pf-c-table__sort--m-favorite__button--focus__text--Color	#151515
--pf-c-table__sort--m-favorite__button--focus__text--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-table	--pf-c-table__sort--m-favorite__button--active__text--Color	#151515
--pf-c-table__sort--m-favorite__button--active__text--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-table	--pf-c-table__draggable--c-button--MarginTop	calc(0.375rem * -1)
--pf-c-table__draggable--c-button--MarginTop calc(--pf-global--spacer--form-element * -1) calc($pf-global--spacer--form-element * -1) calc(pf-size-prem(6px) * -1) calc(0.375rem * -1)
	.pf-c-table	--pf-c-table__draggable--c-button--MarginRight	calc(1rem * -1)
--pf-c-table__draggable--c-button--MarginRight calc(--pf-global--spacer--md * -1) calc($pf-global--spacer--md * -1) calc(pf-size-prem(16px) * -1) calc(1rem * -1)
	.pf-c-table	--pf-c-table__draggable--c-button--MarginBottom	calc(0.375rem * -1)
--pf-c-table__draggable--c-button--MarginBottom calc(--pf-global--spacer--form-element * -1) calc($pf-global--spacer--form-element * -1) calc(pf-size-prem(6px) * -1) calc(0.375rem * -1)
	.pf-c-table	--pf-c-table__draggable--c-button--MarginLeft	calc(1rem * -1)
--pf-c-table__draggable--c-button--MarginLeft calc(--pf-global--spacer--md * -1) calc($pf-global--spacer--md * -1) calc(pf-size-prem(16px) * -1) 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__tr--m-ghost-row--BackgroundColor --pf-global--BackgroundColor--100 $pf-global--BackgroundColor--100 $pf-color-white #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__expandable-row--Transition --pf-global--Transition $pf-global--Transition all 250ms cubic-bezier(.42, 0, .58, 1)
	.pf-c-table	--pf-c-table__expandable-row--MaxHeight	28.125rem
	.pf-c-table	--pf-c-table__expandable-row-content--Transition	all 250ms cubic-bezier(.42, 0, .58, 1)
--pf-c-table__expandable-row-content--Transition --pf-global--Transition $pf-global--Transition all 250ms cubic-bezier(.42, 0, .58, 1)
	.pf-c-table	--pf-c-table__expandable-row-content--PaddingTop	1.5rem
--pf-c-table__expandable-row-content--PaddingTop --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-table	--pf-c-table__expandable-row-content--PaddingBottom	1.5rem
--pf-c-table__expandable-row-content--PaddingBottom --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-table	--pf-c-table__expandable-row--after--Top	calc(1px * -1)
--pf-c-table__expandable-row--after--Top calc(--pf-c-table--border-width--base * -1) calc(--pf-global--BorderWidth--sm * -1) calc($pf-global--BorderWidth--sm * -1) calc(1px * -1)
	.pf-c-table	--pf-c-table__expandable-row--after--Bottom	calc(1px * -1)
--pf-c-table__expandable-row--after--Bottom calc(--pf-c-table--border-width--base * -1) calc(--pf-global--BorderWidth--sm * -1) calc($pf-global--BorderWidth--sm * -1) calc(1px * -1)
	.pf-c-table	--pf-c-table__expandable-row--after--border-width--base	3px
--pf-c-table__expandable-row--after--border-width--base --pf-global--BorderWidth--lg $pf-global--BorderWidth--lg 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__expandable-row--after--BorderColor --pf-global--active-color--100 $pf-global--active-color--100 $pf-color-blue-400 #06c
	.pf-c-table	--pf-c-table__icon-inline--MarginRight	0.5rem
--pf-c-table__icon-inline--MarginRight --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-table	--pf-c-table__sort--MinWidth	calc(6ch + 1rem + 1rem + 1rem)
--pf-c-table__sort--MinWidth calc(6ch + --pf-c-table--cell--PaddingRight + --pf-c-table--cell--PaddingLeft + --pf-c-table__sort-indicator--MarginLeft) calc(6ch + --pf-c-table--cell--Padding--base + --pf-c-table--cell--Padding--base + --pf-global--spacer--md) calc(6ch + --pf-global--spacer--md + --pf-global--spacer--md + $pf-global--spacer--md) calc(6ch + $pf-global--spacer--md + $pf-global--spacer--md + $pf-global--spacer--md) calc(6ch + pf-size-prem(16px) + pf-size-prem(16px) + pf-size-prem(16px)) calc(6ch + 1rem + 1rem + 1rem)
	.pf-c-table	--pf-c-table__sort__button--PaddingTop	0.375rem
--pf-c-table__sort__button--PaddingTop --pf-global--spacer--form-element $pf-global--spacer--form-element pf-size-prem(6px) 0.375rem
	.pf-c-table	--pf-c-table__sort__button--PaddingRight	0.5rem
--pf-c-table__sort__button--PaddingRight --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-table	--pf-c-table__sort__button--PaddingBottom	0.375rem
--pf-c-table__sort__button--PaddingBottom --pf-global--spacer--form-element $pf-global--spacer--form-element pf-size-prem(6px) 0.375rem
	.pf-c-table	--pf-c-table__sort__button--PaddingLeft	0.5rem
--pf-c-table__sort__button--PaddingLeft --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-table	--pf-c-table__sort__button--MarginTop	calc(0.375rem * -1)
--pf-c-table__sort__button--MarginTop calc(--pf-c-table__sort__button--PaddingTop * -1) calc(--pf-global--spacer--form-element * -1) calc($pf-global--spacer--form-element * -1) calc(pf-size-prem(6px) * -1) calc(0.375rem * -1)
	.pf-c-table	--pf-c-table__sort__button--MarginBottom	calc(0.375rem * -1)
--pf-c-table__sort__button--MarginBottom calc(--pf-c-table__sort__button--PaddingBottom * -1) calc(--pf-global--spacer--form-element * -1) calc($pf-global--spacer--form-element * -1) calc(pf-size-prem(6px) * -1) calc(0.375rem * -1)
	.pf-c-table	--pf-c-table__sort__button--MarginLeft	calc(0.5rem * -1)
--pf-c-table__sort__button--MarginLeft calc(--pf-c-table__sort__button--PaddingLeft * -1) calc(--pf-global--spacer--sm * -1) calc($pf-global--spacer--sm * -1) calc(pf-size-prem(8px) * -1) calc(0.5rem * -1)
	.pf-c-table	--pf-c-table__sort__button--Color	#151515
--pf-c-table__sort__button--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-table	--pf-c-table__sort--m-selected__button--Color	#06c
--pf-c-table__sort--m-selected__button--Color --pf-global--active-color--100 $pf-global--active-color--100 $pf-color-blue-400 #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__sort-indicator--Color --pf-global--disabled-color--200 $pf-global--disabled-color--200 $pf-color-black-300 #d2d2d2
	.pf-c-table	--pf-c-table__sort-indicator--MarginLeft	1rem
--pf-c-table__sort-indicator--MarginLeft --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-table	--pf-c-table__sort--m-selected__sort-indicator--Color	#06c
--pf-c-table__sort--m-selected__sort-indicator--Color --pf-global--active-color--100 $pf-global--active-color--100 $pf-color-blue-400 #06c
	.pf-c-table	--pf-c-table__sort__button--hover__sort-indicator--Color	#151515
--pf-c-table__sort__button--hover__sort-indicator--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-table	--pf-c-table__sort__button--active__sort-indicator--Color	#151515
--pf-c-table__sort__button--active__sort-indicator--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-table	--pf-c-table__sort__button--focus__sort-indicator--Color	#151515
--pf-c-table__sort__button--focus__sort-indicator--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #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__column-help--MarginLeft --pf-global--spacer--xs $pf-global--spacer--xs pf-size-prem(4px) 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__column-help--c-button--MarginTop calc(--pf-global--spacer--form-element * -1) calc($pf-global--spacer--form-element * -1) calc(pf-size-prem(6px) * -1) calc(0.375rem * -1)
	.pf-c-table	--pf-c-table__column-help--c-button--MarginBottom	calc(0.375rem * -1)
--pf-c-table__column-help--c-button--MarginBottom calc(--pf-global--spacer--form-element * -1) calc($pf-global--spacer--form-element * -1) calc(pf-size-prem(6px) * -1) calc(0.375rem * -1)
	.pf-c-table	--pf-c-table__column-help--c-button--PaddingRight	0.5rem
--pf-c-table__column-help--c-button--PaddingRight --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-table	--pf-c-table__column-help--c-button--PaddingLeft	0.5rem
--pf-c-table__column-help--c-button--PaddingLeft --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-table	--pf-c-table__compound-expansion-toggle__button--Color	#06c
--pf-c-table__compound-expansion-toggle__button--Color --pf-global--active-color--100 $pf-global--active-color--100 $pf-color-blue-400 #06c
	.pf-c-table	--pf-c-table__compound-expansion-toggle__button--hover--Color	#004080
--pf-c-table__compound-expansion-toggle__button--hover--Color --pf-global--link--Color--hover $pf-global--link--Color--hover $pf-global--primary-color--200 $pf-color-blue-500 #004080
	.pf-c-table	--pf-c-table__compound-expansion-toggle__button--focus--Color	#004080
--pf-c-table__compound-expansion-toggle__button--focus--Color --pf-global--link--Color--hover $pf-global--link--Color--hover $pf-global--primary-color--200 $pf-color-blue-500 #004080
	.pf-c-table	--pf-c-table__compound-expansion-toggle__button--active--Color	#004080
--pf-c-table__compound-expansion-toggle__button--active--Color --pf-global--link--Color--hover $pf-global--link--Color--hover $pf-global--primary-color--200 $pf-color-blue-500 #004080
	.pf-c-table	--pf-c-table__compound-expansion-toggle__button--before--border-width--base	1px
--pf-c-table__compound-expansion-toggle__button--before--border-width--base --pf-global--BorderWidth--sm $pf-global--BorderWidth--sm 1px
	.pf-c-table	--pf-c-table__compound-expansion-toggle__button--before--BorderColor	#d2d2d2
--pf-c-table__compound-expansion-toggle__button--before--BorderColor --pf-global--BorderColor--100 $pf-global--BorderColor--100 $pf-color-black-300 #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__compound-expansion-toggle__button--before--Bottom calc(--pf-c-table__compound-expansion-toggle__button--before--border-width--base * -1) calc(--pf-global--BorderWidth--sm * -1) calc($pf-global--BorderWidth--sm * -1) calc(1px * -1)
	.pf-c-table	--pf-c-table__compound-expansion-toggle__button--before--Left	calc(1px * -1)
--pf-c-table__compound-expansion-toggle__button--before--Left calc(--pf-c-table__compound-expansion-toggle__button--before--border-width--base * -1) calc(--pf-global--BorderWidth--sm * -1) calc($pf-global--BorderWidth--sm * -1) calc(1px * -1)
	.pf-c-table	--pf-c-table__compound-expansion-toggle__button--after--border-width--base	3px
--pf-c-table__compound-expansion-toggle__button--after--border-width--base --pf-global--BorderWidth--lg $pf-global--BorderWidth--lg 3px
	.pf-c-table	--pf-c-table__compound-expansion-toggle__button--after--BorderColor	#06c
--pf-c-table__compound-expansion-toggle__button--after--BorderColor --pf-global--primary-color--100 $pf-global--primary-color--100 $pf-color-blue-400 #06c
	.pf-c-table	--pf-c-table__compound-expansion-toggle__button--after--BorderTopWidth	0
	.pf-c-table	--pf-c-table__compound-expansion-toggle__button--after--Top	calc(1px * -1)
--pf-c-table__compound-expansion-toggle__button--after--Top calc(--pf-c-table__compound-expansion-toggle__button--before--border-width--base * -1) calc(--pf-global--BorderWidth--sm * -1) calc($pf-global--BorderWidth--sm * -1) calc(1px * -1)
	.pf-c-table	--pf-c-table__compound-expansion-toggle__button--after--Left	calc(1px * -1)
--pf-c-table__compound-expansion-toggle__button--after--Left calc(--pf-c-table__compound-expansion-toggle__button--before--border-width--base * -1) calc(--pf-global--BorderWidth--sm * -1) calc($pf-global--BorderWidth--sm * -1) calc(1px * -1)
	.pf-c-table	--pf-c-table--m-compact-th--PaddingTop	calc(0.5rem + 0.25rem)
--pf-c-table--m-compact-th--PaddingTop calc(--pf-global--spacer--sm + --pf-global--spacer--xs) calc($pf-global--spacer--sm + $pf-global--spacer--xs) calc(pf-size-prem(8px) + pf-size-prem(4px)) calc(0.5rem + 0.25rem)
	.pf-c-table	--pf-c-table--m-compact-th--PaddingBottom	0.5rem
--pf-c-table--m-compact-th--PaddingBottom --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-table	--pf-c-table--m-compact--cell--PaddingTop	0.5rem
--pf-c-table--m-compact--cell--PaddingTop --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-table	--pf-c-table--m-compact--cell--PaddingRight	0.5rem
--pf-c-table--m-compact--cell--PaddingRight --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-table	--pf-c-table--m-compact--cell--PaddingBottom	0.5rem
--pf-c-table--m-compact--cell--PaddingBottom --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-table	--pf-c-table--m-compact--cell--PaddingLeft	0.5rem
--pf-c-table--m-compact--cell--PaddingLeft --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-table	--pf-c-table--m-compact--cell--first-last-child--PaddingLeft	1rem
--pf-c-table--m-compact--cell--first-last-child--PaddingLeft --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-table	--pf-c-table--m-compact--cell--first-last-child--PaddingRight	1rem
--pf-c-table--m-compact--cell--first-last-child--PaddingRight --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-table	--pf-c-table--m-compact--cell--first-last-child--xl--PaddingLeft	1.5rem
--pf-c-table--m-compact--cell--first-last-child--xl--PaddingLeft --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-table	--pf-c-table--m-compact--cell--first-last-child--xl--PaddingRight	1.5rem
--pf-c-table--m-compact--cell--first-last-child--xl--PaddingRight --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-table	--pf-c-table--m-compact--FontSize	0.875rem
--pf-c-table--m-compact--FontSize --pf-global--FontSize--sm $pf-global--FontSize--sm pf-font-prem(14px) 0.875rem
	.pf-c-table	--pf-c-table--m-compact__expandable-row-content--PaddingTop	1.5rem
--pf-c-table--m-compact__expandable-row-content--PaddingTop --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-table	--pf-c-table--m-compact__expandable-row-content--PaddingRight	1.5rem
--pf-c-table--m-compact__expandable-row-content--PaddingRight --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-table	--pf-c-table--m-compact__expandable-row-content--PaddingBottom	1.5rem
--pf-c-table--m-compact__expandable-row-content--PaddingBottom --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-table	--pf-c-table--m-compact__expandable-row-content--PaddingLeft	1.5rem
--pf-c-table--m-compact__expandable-row-content--PaddingLeft --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-table	--pf-c-table--nested--first-last-child--PaddingRight	1rem
--pf-c-table--nested--first-last-child--PaddingRight --pf-c-table--m-compact--cell--first-last-child--PaddingLeft --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-table	--pf-c-table--nested--first-last-child--PaddingLeft	1rem
--pf-c-table--nested--first-last-child--PaddingLeft --pf-c-table--m-compact--cell--first-last-child--PaddingRight --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-table	--pf-c-table__expandable-row--m-expanded--BorderBottomColor	#d2d2d2
--pf-c-table__expandable-row--m-expanded--BorderBottomColor --pf-global--BorderColor--100 $pf-global--BorderColor--100 $pf-color-black-300 #d2d2d2
	.pf-c-table	--pf-c-table--tr--m-hoverable--BoxShadow--top	0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08)
--pf-c-table--tr--m-hoverable--BoxShadow--top --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--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--tr--m-hoverable--OutlineOffset calc(-1 * --pf-global--spacer--xs) calc(-1 * $pf-global--spacer--xs) calc(-1 * pf-size-prem(4px)) 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--tr--m-hoverable--hover--BoxShadow --pf-c-table--tr--m-hoverable--BoxShadow--top, --pf-global--BoxShadow--sm-bottom --pf-c-table--tr--BoxShadow--top--base, $pf-global--BoxShadow--sm-bottom 0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08), $pf-global--BoxShadow--sm-bottom 0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08), 0 pf-size-prem(2px) pf-size-prem(4px) pf-size-prem(-1px) rgba($pf-color-black-1000, .16) 0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08), 0 pf-size-prem(2px) pf-size-prem(4px) pf-size-prem(-1px) rgba(#030303, .16) 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--tr--m-hoverable--hover--BackgroundColor --pf-global--BackgroundColor--100 $pf-global--BackgroundColor--100 $pf-color-white #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--tr--m-hoverable--focus--BoxShadow --pf-c-table--tr--m-hoverable--BoxShadow--top, --pf-global--BoxShadow--sm-bottom --pf-c-table--tr--BoxShadow--top--base, $pf-global--BoxShadow--sm-bottom 0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08), $pf-global--BoxShadow--sm-bottom 0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08), 0 pf-size-prem(2px) pf-size-prem(4px) pf-size-prem(-1px) rgba($pf-color-black-1000, .16) 0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08), 0 pf-size-prem(2px) pf-size-prem(4px) pf-size-prem(-1px) rgba(#030303, .16) 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--tr--m-hoverable--focus--BackgroundColor --pf-global--BackgroundColor--100 $pf-global--BackgroundColor--100 $pf-color-white #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--tr--m-hoverable--active--BoxShadow --pf-c-table--tr--m-hoverable--BoxShadow--top, --pf-global--BoxShadow--sm-bottom --pf-c-table--tr--BoxShadow--top--base, $pf-global--BoxShadow--sm-bottom 0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08), $pf-global--BoxShadow--sm-bottom 0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08), 0 pf-size-prem(2px) pf-size-prem(4px) pf-size-prem(-1px) rgba($pf-color-black-1000, .16) 0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08), 0 pf-size-prem(2px) pf-size-prem(4px) pf-size-prem(-1px) rgba(#030303, .16) 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--tr--m-hoverable--active--BackgroundColor --pf-global--BackgroundColor--100 $pf-global--BackgroundColor--100 $pf-color-white #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--tr--m-hoverable--m-selected--BoxShadow --pf-global--BoxShadow--sm-bottom inset, --pf-global--BoxShadow--sm-bottom $pf-global--BoxShadow--sm-bottom inset, $pf-global--BoxShadow--sm-bottom 0 pf-size-prem(2px) pf-size-prem(4px) pf-size-prem(-1px) rgba($pf-color-black-1000, .16) inset, 0 pf-size-prem(2px) pf-size-prem(4px) pf-size-prem(-1px) rgba($pf-color-black-1000, .16) 0 pf-size-prem(2px) pf-size-prem(4px) pf-size-prem(-1px) rgba(#030303, .16) inset, 0 pf-size-prem(2px) pf-size-prem(4px) pf-size-prem(-1px) rgba(#030303, .16) 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--tr--m-selected--BoxShadow--top --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--tr--m-selected--BackgroundColor	#fff
--pf-c-table--tr--m-selected--BackgroundColor --pf-global--BackgroundColor--100 $pf-global--BackgroundColor--100 $pf-color-white #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--tr--m-selected--BoxShadow --pf-c-table--tr--m-selected--BoxShadow--top, --pf-global--BoxShadow--sm-bottom --pf-c-table--tr--BoxShadow--top--base, $pf-global--BoxShadow--sm-bottom 0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08), $pf-global--BoxShadow--sm-bottom 0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08), 0 pf-size-prem(2px) pf-size-prem(4px) pf-size-prem(-1px) rgba($pf-color-black-1000, .16) 0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08), 0 pf-size-prem(2px) pf-size-prem(4px) pf-size-prem(-1px) rgba(#030303, .16) 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--tr--m-selected--OutlineOffset calc(-1 * --pf-global--spacer--xs) calc(-1 * $pf-global--spacer--xs) calc(-1 * pf-size-prem(4px)) calc(-1 * 0.25rem)
	.pf-c-table	--pf-c-table--tr--m-selected--after--BorderLeftWidth	3px
--pf-c-table--tr--m-selected--after--BorderLeftWidth --pf-c-table__expandable-row--after--border-width--base --pf-global--BorderWidth--lg $pf-global--BorderWidth--lg 3px
	.pf-c-table	--pf-c-table--tr--m-selected--after--BorderLeftColor	#06c
--pf-c-table--tr--m-selected--after--BorderLeftColor --pf-global--active-color--100 $pf-global--active-color--100 $pf-color-blue-400 #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--tr--m-selected--m-selected--BoxShadow --pf-global--BoxShadow--sm-bottom $pf-global--BoxShadow--sm-bottom 0 pf-size-prem(2px) pf-size-prem(4px) pf-size-prem(-1px) rgba($pf-color-black-1000, .16) 0 pf-size-prem(2px) pf-size-prem(4px) pf-size-prem(-1px) rgba(#030303, .16) 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--tr--m-selected--hover--m-selected--BoxShadow --pf-global--BoxShadow--sm-bottom inset, --pf-global--BoxShadow--sm-bottom $pf-global--BoxShadow--sm-bottom inset, $pf-global--BoxShadow--sm-bottom 0 pf-size-prem(2px) pf-size-prem(4px) pf-size-prem(-1px) rgba($pf-color-black-1000, .16) inset, 0 pf-size-prem(2px) pf-size-prem(4px) pf-size-prem(-1px) rgba($pf-color-black-1000, .16) 0 pf-size-prem(2px) pf-size-prem(4px) pf-size-prem(-1px) rgba(#030303, .16) inset, 0 pf-size-prem(2px) pf-size-prem(4px) pf-size-prem(-1px) rgba(#030303, .16) 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--tr--m-selected--tr--m-selected--hover--BoxShadow --pf-c-table--tr--m-selected--BoxShadow--top, --pf-global--BoxShadow--sm-bottom --pf-c-table--tr--BoxShadow--top--base, $pf-global--BoxShadow--sm-bottom 0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08), $pf-global--BoxShadow--sm-bottom 0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08), 0 pf-size-prem(2px) pf-size-prem(4px) pf-size-prem(-1px) rgba($pf-color-black-1000, .16) 0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08), 0 pf-size-prem(2px) pf-size-prem(4px) pf-size-prem(-1px) rgba(#030303, .16) 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--tbody--m-hoverable--BoxShadow--top --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--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)
--pf-c-table--tbody--m-hoverable--OutlineOffset calc(-1 * --pf-global--spacer--xs) calc(-1 * $pf-global--spacer--xs) calc(-1 * pf-size-prem(4px)) calc(-1 * 0.25rem)
	.pf-c-table	--pf-c-table--tbody--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--tbody--m-hoverable--hover--BoxShadow --pf-c-table--tbody--m-hoverable--BoxShadow--top, --pf-global--BoxShadow--sm-bottom --pf-c-table--tr--BoxShadow--top--base, $pf-global--BoxShadow--sm-bottom 0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08), $pf-global--BoxShadow--sm-bottom 0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08), 0 pf-size-prem(2px) pf-size-prem(4px) pf-size-prem(-1px) rgba($pf-color-black-1000, .16) 0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08), 0 pf-size-prem(2px) pf-size-prem(4px) pf-size-prem(-1px) rgba(#030303, .16) 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--hover--BackgroundColor	#fff
--pf-c-table--tbody--m-hoverable--hover--BackgroundColor --pf-global--BackgroundColor--100 $pf-global--BackgroundColor--100 $pf-color-white #fff
	.pf-c-table	--pf-c-table--tbody--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--tbody--m-hoverable--focus--BoxShadow --pf-c-table--tbody--m-hoverable--BoxShadow--top, --pf-global--BoxShadow--sm-bottom --pf-c-table--tr--BoxShadow--top--base, $pf-global--BoxShadow--sm-bottom 0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08), $pf-global--BoxShadow--sm-bottom 0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08), 0 pf-size-prem(2px) pf-size-prem(4px) pf-size-prem(-1px) rgba($pf-color-black-1000, .16) 0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08), 0 pf-size-prem(2px) pf-size-prem(4px) pf-size-prem(-1px) rgba(#030303, .16) 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--focus--BackgroundColor	#fff
--pf-c-table--tbody--m-hoverable--focus--BackgroundColor --pf-global--BackgroundColor--100 $pf-global--BackgroundColor--100 $pf-color-white #fff
	.pf-c-table	--pf-c-table--tbody--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--tbody--m-hoverable--active--BoxShadow --pf-c-table--tbody--m-hoverable--BoxShadow--top, --pf-global--BoxShadow--sm-bottom --pf-c-table--tr--BoxShadow--top--base, $pf-global--BoxShadow--sm-bottom 0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08), $pf-global--BoxShadow--sm-bottom 0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08), 0 pf-size-prem(2px) pf-size-prem(4px) pf-size-prem(-1px) rgba($pf-color-black-1000, .16) 0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08), 0 pf-size-prem(2px) pf-size-prem(4px) pf-size-prem(-1px) rgba(#030303, .16) 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--active--BackgroundColor	#fff
--pf-c-table--tbody--m-hoverable--active--BackgroundColor --pf-global--BackgroundColor--100 $pf-global--BackgroundColor--100 $pf-color-white #fff
	.pf-c-table	--pf-c-table--tbody--m-hoverable--m-expanded--BorderColor	#73bcf7
--pf-c-table--tbody--m-hoverable--m-expanded--BorderColor --pf-global--active-color--400 $pf-global--active-color--400 $pf-color-blue-200 #73bcf7
	.pf-c-table	--pf-c-table--tbody--m-hoverable--m-selected--hover--tr--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--tbody--m-hoverable--m-selected--hover--tr--BoxShadow --pf-global--BoxShadow--sm-bottom inset, --pf-global--BoxShadow--sm-bottom $pf-global--BoxShadow--sm-bottom inset, $pf-global--BoxShadow--sm-bottom 0 pf-size-prem(2px) pf-size-prem(4px) pf-size-prem(-1px) rgba($pf-color-black-1000, .16) inset, 0 pf-size-prem(2px) pf-size-prem(4px) pf-size-prem(-1px) rgba($pf-color-black-1000, .16) 0 pf-size-prem(2px) pf-size-prem(4px) pf-size-prem(-1px) rgba(#030303, .16) inset, 0 pf-size-prem(2px) pf-size-prem(4px) pf-size-prem(-1px) rgba(#030303, .16) 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--tbody--m-selected--BackgroundColor	#fff
--pf-c-table--tbody--m-selected--BackgroundColor --pf-global--BackgroundColor--100 $pf-global--BackgroundColor--100 $pf-color-white #fff
	.pf-c-table	--pf-c-table--tbody--m-selected--BoxShadow--top	0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08)
--pf-c-table--tbody--m-selected--BoxShadow--top --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--tbody--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--tbody--m-selected--BoxShadow --pf-c-table--tbody--m-selected--BoxShadow--top, --pf-global--BoxShadow--sm-bottom --pf-c-table--tr--BoxShadow--top--base, $pf-global--BoxShadow--sm-bottom 0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08), $pf-global--BoxShadow--sm-bottom 0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08), 0 pf-size-prem(2px) pf-size-prem(4px) pf-size-prem(-1px) rgba($pf-color-black-1000, .16) 0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08), 0 pf-size-prem(2px) pf-size-prem(4px) pf-size-prem(-1px) rgba(#030303, .16) 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-selected--OutlineOffset	calc(-1 * 0.25rem)
--pf-c-table--tbody--m-selected--OutlineOffset calc(-1 * --pf-global--spacer--xs) calc(-1 * $pf-global--spacer--xs) calc(-1 * pf-size-prem(4px)) calc(-1 * 0.25rem)
	.pf-c-table	--pf-c-table--tbody--m-selected--after--BorderLeftWidth	3px
--pf-c-table--tbody--m-selected--after--BorderLeftWidth --pf-c-table__expandable-row--after--border-width--base --pf-global--BorderWidth--lg $pf-global--BorderWidth--lg 3px
	.pf-c-table	--pf-c-table--tbody--m-selected--after--BorderLeftColor	#06c
--pf-c-table--tbody--m-selected--after--BorderLeftColor --pf-global--active-color--100 $pf-global--active-color--100 $pf-color-blue-400 #06c
	.pf-c-table	--pf-c-table--tbody--m-selected--m-selected--BoxShadow	0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)
--pf-c-table--tbody--m-selected--m-selected--BoxShadow --pf-global--BoxShadow--sm-bottom $pf-global--BoxShadow--sm-bottom 0 pf-size-prem(2px) pf-size-prem(4px) pf-size-prem(-1px) rgba($pf-color-black-1000, .16) 0 pf-size-prem(2px) pf-size-prem(4px) pf-size-prem(-1px) rgba(#030303, .16) 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)
	.pf-c-table	--pf-c-table--tbody--m-selected--hover--tbody--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--tbody--m-selected--hover--tbody--m-selected--BoxShadow --pf-global--BoxShadow--sm-bottom inset, --pf-global--BoxShadow--sm-bottom $pf-global--BoxShadow--sm-bottom inset, $pf-global--BoxShadow--sm-bottom 0 pf-size-prem(2px) pf-size-prem(4px) pf-size-prem(-1px) rgba($pf-color-black-1000, .16) inset, 0 pf-size-prem(2px) pf-size-prem(4px) pf-size-prem(-1px) rgba($pf-color-black-1000, .16) 0 pf-size-prem(2px) pf-size-prem(4px) pf-size-prem(-1px) rgba(#030303, .16) inset, 0 pf-size-prem(2px) pf-size-prem(4px) pf-size-prem(-1px) rgba(#030303, .16) 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--tbody--m-selected--tbody--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--tbody--m-selected--tbody--m-selected--hover--BoxShadow --pf-c-table--tr--m-selected--BoxShadow--top, --pf-global--BoxShadow--sm-bottom --pf-c-table--tr--BoxShadow--top--base, $pf-global--BoxShadow--sm-bottom 0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08), $pf-global--BoxShadow--sm-bottom 0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08), 0 pf-size-prem(2px) pf-size-prem(4px) pf-size-prem(-1px) rgba($pf-color-black-1000, .16) 0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08), 0 pf-size-prem(2px) pf-size-prem(4px) pf-size-prem(-1px) rgba(#030303, .16) 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--thead--m-nested-column-header--button--OutlineOffset	-0.1875rem
	.pf-c-table	--pf-c-table--thead--m-nested-column-header--tr--PaddingTop	0.25rem
--pf-c-table--thead--m-nested-column-header--tr--PaddingTop --pf-global--spacer--xs $pf-global--spacer--xs pf-size-prem(4px) 0.25rem
	.pf-c-table	--pf-c-table--thead--m-nested-column-header--tr--PaddingBottom	0.25rem
--pf-c-table--thead--m-nested-column-header--tr--PaddingBottom --pf-global--spacer--xs $pf-global--spacer--xs pf-size-prem(4px) 0.25rem
	.pf-c-table	--pf-c-table__subhead--Color	#6a6e73
--pf-c-table__subhead--Color --pf-global--Color--200 $pf-global--Color--200 $pf-color-black-600 #6a6e73
	.pf-c-table	--pf-c-table--m-striped__tr--BackgroundColor	#fafafa
--pf-c-table--m-striped__tr--BackgroundColor --pf-global--BackgroundColor--light-200 $pf-global--BackgroundColor--light-200 $pf-color-black-100 #fafafa
	.pf-c-table tr > *	--pf-hidden-visible--visible--Visibility	visible
	.pf-c-table tr > *	--pf-hidden-visible--hidden--Display	none
	.pf-c-table tr > *	--pf-hidden-visible--hidden--Visibility	hidden
	.pf-c-table tr > *	--pf-hidden-visible--Display	table-cell
--pf-hidden-visible--Display --pf-hidden-visible--visible--Display --pf-c-table--cell--hidden-visible--Display table-cell
	.pf-c-table tr > *	--pf-hidden-visible--Visibility	visible
--pf-hidden-visible--Visibility --pf-hidden-visible--visible--Visibility visible
	.pf-c-table tr > *	--pf-hidden-visible--visible--Display	table-cell
--pf-hidden-visible--visible--Display --pf-c-table--cell--hidden-visible--Display table-cell
	.pf-c-table tr > .pf-m-hidden	--pf-hidden-visible--Display	none
--pf-hidden-visible--Display --pf-hidden-visible--hidden--Display none
	.pf-c-table tr > .pf-m-hidden	--pf-hidden-visible--Visibility	hidden
--pf-hidden-visible--Visibility --pf-hidden-visible--hidden--Visibility hidden
	.pf-c-table.pf-m-striped:not(.pf-m-expandable) > tbody > tr:nth-child(odd)	--pf-c-table__sticky-column--BackgroundColor	#fafafa
--pf-c-table__sticky-column--BackgroundColor --pf-c-table--m-striped__tr--BackgroundColor --pf-global--BackgroundColor--light-200 $pf-global--BackgroundColor--light-200 $pf-color-black-100 #fafafa
	.pf-c-table tr > *:first-child	--pf-c-table--cell--PaddingLeft	1rem
--pf-c-table--cell--PaddingLeft --pf-c-table--cell--first-last-child--PaddingLeft --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-table tr > *:last-child	--pf-c-table--cell--PaddingRight	1rem
--pf-c-table--cell--PaddingRight --pf-c-table--cell--first-last-child--PaddingRight --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-table tr > *.pf-m-help	--pf-c-table--cell--MinWidth	11ch
--pf-c-table--cell--MinWidth --pf-c-table--cell--m-help--MinWidth 11ch
	.pf-c-table tr > *.pf-m-favorite	--pf-c-table__button--Color	#d2d2d2
--pf-c-table__button--Color --pf-c-table--cell--m-favorite--Color --pf-global--Color--light-300 $pf-global--Color--light-300 $pf-color-black-300 #d2d2d2
	.pf-c-table tr > *.pf-m-favorite	--pf-c-table__sort--MinWidth	fit-content
	.pf-c-table tr > *.pf-m-favorite	--pf-c-table--cell--MaxWidth	fit-content
	.pf-c-table tr > *.pf-m-favorite	--pf-c-table--cell--Overflow	visible
	.pf-c-table thead	--pf-c-table--cell--FontSize	0.875rem
--pf-c-table--cell--FontSize --pf-c-table--thead--cell--FontSize --pf-global--FontSize--sm $pf-global--FontSize--sm pf-font-prem(14px) 0.875rem
	.pf-c-table thead	--pf-c-table--cell--FontWeight	700
--pf-c-table--cell--FontWeight --pf-c-table--thead--cell--FontWeight --pf-global--FontWeight--bold $pf-global--FontWeight--bold 700
	.pf-c-table thead	--pf-c-table--cell--MinWidth	calc(5ch + 1rem + 1rem)
--pf-c-table--cell--MinWidth --pf-c-table--m-truncate--cell--MinWidth calc(5ch + --pf-c-table--cell--PaddingRight + --pf-c-table--cell--PaddingLeft) calc(5ch + --pf-c-table--cell--Padding--base + --pf-c-table--cell--Padding--base) calc(5ch + --pf-global--spacer--md + --pf-global--spacer--md) calc(5ch + $pf-global--spacer--md + $pf-global--spacer--md) calc(5ch + pf-size-prem(16px) + pf-size-prem(16px)) calc(5ch + 1rem + 1rem)
	.pf-c-table thead	--pf-c-table--cell--MaxWidth	1px
--pf-c-table--cell--MaxWidth --pf-c-table--m-truncate--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 thead.pf-m-nested-column-header tr:not(:first-child) th:not([rowspan])	--pf-c-table--cell--PaddingTop	0.25rem
--pf-c-table--cell--PaddingTop --pf-c-table--thead--m-nested-column-header--tr--PaddingTop --pf-global--spacer--xs $pf-global--spacer--xs pf-size-prem(4px) 0.25rem
	.pf-c-table thead.pf-m-nested-column-header tr:not(:last-child)	--pf-c-table--border-width--base	0
	.pf-c-table thead.pf-m-nested-column-header tr:not(:last-child) th:not([rowspan])	--pf-c-table--cell--PaddingBottom	0.25rem
--pf-c-table--cell--PaddingBottom --pf-c-table--thead--m-nested-column-header--tr--PaddingBottom --pf-global--spacer--xs $pf-global--spacer--xs pf-size-prem(4px) 0.25rem
	.pf-c-table thead .pf-c-table__subhead	--pf-c-table__sort__button__text--Color	#6a6e73
--pf-c-table__sort__button__text--Color --pf-c-table__subhead--Color --pf-global--Color--200 $pf-global--Color--200 $pf-color-black-600 #6a6e73
	.pf-c-table tbody	--pf-c-table--cell--PaddingTop	1.5rem
--pf-c-table--cell--PaddingTop --pf-c-table--tbody--cell--PaddingTop --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-table tbody	--pf-c-table--cell--PaddingBottom	1.5rem
--pf-c-table--cell--PaddingBottom --pf-c-table--tbody--cell--PaddingBottom --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-table .pf-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	none
	.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 tr.pf-m-hoverable:hover	--pf-c-table--tr--m-hoverable--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--tr--m-hoverable--BoxShadow --pf-c-table--tr--m-hoverable--hover--BoxShadow --pf-c-table--tr--m-hoverable--BoxShadow--top, --pf-global--BoxShadow--sm-bottom --pf-c-table--tr--BoxShadow--top--base, $pf-global--BoxShadow--sm-bottom 0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08), $pf-global--BoxShadow--sm-bottom 0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08), 0 pf-size-prem(2px) pf-size-prem(4px) pf-size-prem(-1px) rgba($pf-color-black-1000, .16) 0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08), 0 pf-size-prem(2px) pf-size-prem(4px) pf-size-prem(-1px) rgba(#030303, .16) 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 tr.pf-m-hoverable:hover	--pf-c-table--tr--m-hoverable--BackgroundColor	#fff
--pf-c-table--tr--m-hoverable--BackgroundColor --pf-c-table--tr--m-hoverable--hover--BackgroundColor --pf-global--BackgroundColor--100 $pf-global--BackgroundColor--100 $pf-color-white #fff
	.pf-c-table tr.pf-m-hoverable:focus	--pf-c-table--tr--m-hoverable--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--tr--m-hoverable--BoxShadow --pf-c-table--tr--m-hoverable--focus--BoxShadow --pf-c-table--tr--m-hoverable--BoxShadow--top, --pf-global--BoxShadow--sm-bottom --pf-c-table--tr--BoxShadow--top--base, $pf-global--BoxShadow--sm-bottom 0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08), $pf-global--BoxShadow--sm-bottom 0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08), 0 pf-size-prem(2px) pf-size-prem(4px) pf-size-prem(-1px) rgba($pf-color-black-1000, .16) 0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08), 0 pf-size-prem(2px) pf-size-prem(4px) pf-size-prem(-1px) rgba(#030303, .16) 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 tr.pf-m-hoverable:focus	--pf-c-table--tr--m-hoverable--BackgroundColor	#fff
--pf-c-table--tr--m-hoverable--BackgroundColor --pf-c-table--tr--m-hoverable--focus--BackgroundColor --pf-global--BackgroundColor--100 $pf-global--BackgroundColor--100 $pf-color-white #fff
	.pf-c-table tr.pf-m-hoverable:active	--pf-c-table--tr--m-hoverable--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--tr--m-hoverable--BoxShadow --pf-c-table--tr--m-hoverable--active--BoxShadow --pf-c-table--tr--m-hoverable--BoxShadow--top, --pf-global--BoxShadow--sm-bottom --pf-c-table--tr--BoxShadow--top--base, $pf-global--BoxShadow--sm-bottom 0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08), $pf-global--BoxShadow--sm-bottom 0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08), 0 pf-size-prem(2px) pf-size-prem(4px) pf-size-prem(-1px) rgba($pf-color-black-1000, .16) 0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08), 0 pf-size-prem(2px) pf-size-prem(4px) pf-size-prem(-1px) rgba(#030303, .16) 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 tr.pf-m-hoverable:active	--pf-c-table--tr--m-hoverable--BackgroundColor	#fff
--pf-c-table--tr--m-hoverable--BackgroundColor --pf-c-table--tr--m-hoverable--active--BackgroundColor --pf-global--BackgroundColor--100 $pf-global--BackgroundColor--100 $pf-color-white #fff
	.pf-c-table tr.pf-m-selected	--pf-c-table__expandable-row--after--BorderLeftWidth	3px
--pf-c-table__expandable-row--after--BorderLeftWidth --pf-c-table--tr--m-selected--after--BorderLeftWidth --pf-c-table__expandable-row--after--border-width--base --pf-global--BorderWidth--lg $pf-global--BorderWidth--lg 3px
	.pf-c-table tr.pf-m-selected	--pf-c-table__expandable-row--after--BorderColor	#06c
--pf-c-table__expandable-row--after--BorderColor --pf-c-table--tr--m-selected--after--BorderLeftColor --pf-global--active-color--100 $pf-global--active-color--100 $pf-color-blue-400 #06c
	.pf-c-table tr.pf-m-first-cell-offset-reset	--pf-c-table--cell--first-last-child--PaddingLeft	1rem
--pf-c-table--cell--first-last-child--PaddingLeft --pf-c-table--tr--m-first-cell-offset-reset--cell--PaddingLeft --pf-c-table--cell--Padding--base --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-table tbody.pf-m-hoverable.pf-m-expanded:not(.pf-m-selected)	--pf-c-table__expandable-row--after--BorderColor	#73bcf7
--pf-c-table__expandable-row--after--BorderColor --pf-c-table--tbody--m-hoverable--m-expanded--BorderColor --pf-global--active-color--400 $pf-global--active-color--400 $pf-color-blue-200 #73bcf7
	.pf-c-table tbody.pf-m-hoverable:hover	--pf-c-table--tbody--m-hoverable--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--tbody--m-hoverable--BoxShadow --pf-c-table--tbody--m-hoverable--hover--BoxShadow --pf-c-table--tbody--m-hoverable--BoxShadow--top, --pf-global--BoxShadow--sm-bottom --pf-c-table--tr--BoxShadow--top--base, $pf-global--BoxShadow--sm-bottom 0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08), $pf-global--BoxShadow--sm-bottom 0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08), 0 pf-size-prem(2px) pf-size-prem(4px) pf-size-prem(-1px) rgba($pf-color-black-1000, .16) 0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08), 0 pf-size-prem(2px) pf-size-prem(4px) pf-size-prem(-1px) rgba(#030303, .16) 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 tbody.pf-m-hoverable:hover	--pf-c-table--tbody--m-hoverable--BackgroundColor	#fff
--pf-c-table--tbody--m-hoverable--BackgroundColor --pf-c-table--tbody--m-hoverable--hover--BackgroundColor --pf-global--BackgroundColor--100 $pf-global--BackgroundColor--100 $pf-color-white #fff
	.pf-c-table tbody.pf-m-hoverable:focus	--pf-c-table--tbody--m-hoverable--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--tbody--m-hoverable--BoxShadow --pf-c-table--tbody--m-hoverable--focus--BoxShadow --pf-c-table--tbody--m-hoverable--BoxShadow--top, --pf-global--BoxShadow--sm-bottom --pf-c-table--tr--BoxShadow--top--base, $pf-global--BoxShadow--sm-bottom 0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08), $pf-global--BoxShadow--sm-bottom 0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08), 0 pf-size-prem(2px) pf-size-prem(4px) pf-size-prem(-1px) rgba($pf-color-black-1000, .16) 0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08), 0 pf-size-prem(2px) pf-size-prem(4px) pf-size-prem(-1px) rgba(#030303, .16) 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 tbody.pf-m-hoverable:focus	--pf-c-table--tbody--m-hoverable--BackgroundColor	#fff
--pf-c-table--tbody--m-hoverable--BackgroundColor --pf-c-table--tbody--m-hoverable--focus--BackgroundColor --pf-global--BackgroundColor--100 $pf-global--BackgroundColor--100 $pf-color-white #fff
	.pf-c-table tbody.pf-m-hoverable:active	--pf-c-table--tbody--m-hoverable--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--tbody--m-hoverable--BoxShadow --pf-c-table--tbody--m-hoverable--active--BoxShadow --pf-c-table--tbody--m-hoverable--BoxShadow--top, --pf-global--BoxShadow--sm-bottom --pf-c-table--tr--BoxShadow--top--base, $pf-global--BoxShadow--sm-bottom 0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08), $pf-global--BoxShadow--sm-bottom 0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08), 0 pf-size-prem(2px) pf-size-prem(4px) pf-size-prem(-1px) rgba($pf-color-black-1000, .16) 0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08), 0 pf-size-prem(2px) pf-size-prem(4px) pf-size-prem(-1px) rgba(#030303, .16) 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 tbody.pf-m-hoverable:active	--pf-c-table--tbody--m-hoverable--BackgroundColor	#fff
--pf-c-table--tbody--m-hoverable--BackgroundColor --pf-c-table--tbody--m-hoverable--active--BackgroundColor --pf-global--BackgroundColor--100 $pf-global--BackgroundColor--100 $pf-color-white #fff
	.pf-c-table tbody.pf-m-selected	--pf-c-table__expandable-row--after--BorderLeftWidth	3px
--pf-c-table__expandable-row--after--BorderLeftWidth --pf-c-table--tbody--m-selected--after--BorderLeftWidth --pf-c-table__expandable-row--after--border-width--base --pf-global--BorderWidth--lg $pf-global--BorderWidth--lg 3px
	.pf-c-table tbody.pf-m-selected	--pf-c-table__expandable-row--after--BorderColor	#06c
--pf-c-table__expandable-row--after--BorderColor --pf-c-table--tbody--m-selected--after--BorderLeftColor --pf-global--active-color--100 $pf-global--active-color--100 $pf-color-blue-400 #06c
	.pf-c-table tbody.pf-m-selected + tbody.pf-m-selected	--pf-c-table--tbody--m-selected--BoxShadow	0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)
--pf-c-table--tbody--m-selected--BoxShadow --pf-c-table--tbody--m-selected--m-selected--BoxShadow --pf-global--BoxShadow--sm-bottom $pf-global--BoxShadow--sm-bottom 0 pf-size-prem(2px) pf-size-prem(4px) pf-size-prem(-1px) rgba($pf-color-black-1000, .16) 0 pf-size-prem(2px) pf-size-prem(4px) pf-size-prem(-1px) rgba(#030303, .16) 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)
	.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--cell--FontSize --pf-c-table__check--input--FontSize --pf-global--FontSize--md $pf-global--FontSize--md pf-font-prem(16px) 1rem
	.pf-c-table__favorite .pf-c-button	--pf-c-button--m-plain--Color	#d2d2d2
--pf-c-button--m-plain--Color --pf-c-table__favorite--c-button--Color --pf-global--Color--light-300 $pf-global--Color--light-300 $pf-color-black-300 #d2d2d2
	.pf-c-table__favorite .pf-c-button	--pf-c-button--FontSize	0.875rem
--pf-c-button--FontSize --pf-c-table__favorite--c-button--FontSize --pf-global--FontSize--sm $pf-global--FontSize--sm pf-font-prem(14px) 0.875rem
	.pf-m-favorited.pf-c-table__favorite .pf-c-button	--pf-c-button--m-plain--Color	#f0ab00
--pf-c-button--m-plain--Color --pf-c-table__favorite--m-favorited--c-button--Color --pf-global--palette--gold-400 $pf-color-gold-400 #f0ab00
	.pf-c-table__action	--pf-c-table--cell--PaddingTop	0
	.pf-c-table__action	--pf-c-table--cell--PaddingRight	0
--pf-c-table--cell--PaddingRight --pf-c-table__action--PaddingRight 0
	.pf-c-table__action	--pf-c-table--cell--PaddingBottom	0
	.pf-c-table__action	--pf-c-table--cell--PaddingLeft	0
--pf-c-table--cell--PaddingLeft --pf-c-table__action--PaddingLeft 0
	.pf-c-table__inline-edit-action	--pf-c-table--cell--PaddingLeft	0
	.pf-c-table__inline-edit-action	--pf-c-table--cell--PaddingRight	0
	.pf-c-table__compound-expansion-toggle	--pf-c-table__button--Color	#06c
--pf-c-table__button--Color --pf-c-table__compound-expansion-toggle__button--Color --pf-global--active-color--100 $pf-global--active-color--100 $pf-color-blue-400 #06c
	.pf-c-table__compound-expansion-toggle	--pf-c-table__button--hover--Color	#004080
--pf-c-table__button--hover--Color --pf-c-table__compound-expansion-toggle__button--hover--Color --pf-global--link--Color--hover $pf-global--link--Color--hover $pf-global--primary-color--200 $pf-color-blue-500 #004080
	.pf-c-table__compound-expansion-toggle	--pf-c-table__button--focus--Color	#004080
--pf-c-table__button--focus--Color --pf-c-table__compound-expansion-toggle__button--focus--Color --pf-global--link--Color--hover $pf-global--link--Color--hover $pf-global--primary-color--200 $pf-color-blue-500 #004080
	.pf-c-table__compound-expansion-toggle	--pf-c-table__button--active--Color	#004080
--pf-c-table__button--active--Color --pf-c-table__compound-expansion-toggle__button--active--Color --pf-global--link--Color--hover $pf-global--link--Color--hover $pf-global--primary-color--200 $pf-color-blue-500 #004080
	.pf-c-table__compound-expansion-toggle:hover	--pf-c-table__compound-expansion-toggle__button--before--BorderRightWidth	1px
--pf-c-table__compound-expansion-toggle__button--before--BorderRightWidth --pf-c-table__compound-expansion-toggle__button--before--border-width--base --pf-global--BorderWidth--sm $pf-global--BorderWidth--sm 1px
	.pf-c-table__compound-expansion-toggle:hover	--pf-c-table__compound-expansion-toggle__button--before--BorderLeftWidth	1px
--pf-c-table__compound-expansion-toggle__button--before--BorderLeftWidth --pf-c-table__compound-expansion-toggle__button--before--border-width--base --pf-global--BorderWidth--sm $pf-global--BorderWidth--sm 1px
	.pf-c-table__compound-expansion-toggle:hover	--pf-c-table__compound-expansion-toggle__button--after--BorderTopWidth	3px
--pf-c-table__compound-expansion-toggle__button--after--BorderTopWidth --pf-c-table__compound-expansion-toggle__button--after--border-width--base --pf-global--BorderWidth--lg $pf-global--BorderWidth--lg 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__expandable-row--after--BorderLeftWidth --pf-c-table__expandable-row--after--border-width--base --pf-global--BorderWidth--lg $pf-global--BorderWidth--lg 3px
	.pf-c-table__column-help-action .pf-c-button	--pf-c-button--PaddingRight	0.5rem
--pf-c-button--PaddingRight --pf-c-table__column-help--c-button--PaddingRight --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-table__column-help-action .pf-c-button	--pf-c-button--PaddingLeft	0.5rem
--pf-c-button--PaddingLeft --pf-c-table__column-help--c-button--PaddingLeft --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-table__sort .pf-c-table__button	--pf-c-table--cell--PaddingTop	0.375rem
--pf-c-table--cell--PaddingTop --pf-c-table__sort__button--PaddingTop --pf-global--spacer--form-element $pf-global--spacer--form-element pf-size-prem(6px) 0.375rem
	.pf-c-table__sort .pf-c-table__button	--pf-c-table--cell--PaddingRight	0.5rem
--pf-c-table--cell--PaddingRight --pf-c-table__sort__button--PaddingRight --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-table__sort .pf-c-table__button	--pf-c-table--cell--PaddingBottom	0.375rem
--pf-c-table--cell--PaddingBottom --pf-c-table__sort__button--PaddingBottom --pf-global--spacer--form-element $pf-global--spacer--form-element pf-size-prem(6px) 0.375rem
	.pf-c-table__sort .pf-c-table__button	--pf-c-table--cell--PaddingLeft	0.5rem
--pf-c-table--cell--PaddingLeft --pf-c-table__sort__button--PaddingLeft --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-table__sort .pf-c-table__button:hover	--pf-c-table__sort-indicator--Color	#151515
--pf-c-table__sort-indicator--Color --pf-c-table__sort__button--hover__sort-indicator--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-table__sort .pf-c-table__button:hover	--pf-c-table__sort__button__text--Color	currentColor
--pf-c-table__sort__button__text--Color --pf-c-table__sort__button--hover__text--Color currentColor
	.pf-c-table__sort .pf-c-table__button:focus	--pf-c-table__sort-indicator--Color	#151515
--pf-c-table__sort-indicator--Color --pf-c-table__sort__button--focus__sort-indicator--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-table__sort .pf-c-table__button:focus	--pf-c-table__sort__button__text--Color	currentColor
--pf-c-table__sort__button__text--Color --pf-c-table__sort__button--focus__text--Color currentColor
	.pf-c-table__sort .pf-c-table__button:active	--pf-c-table__sort-indicator--Color	#151515
--pf-c-table__sort-indicator--Color --pf-c-table__sort__button--active__sort-indicator--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-table__sort .pf-c-table__button:active	--pf-c-table__sort__button__text--Color	currentColor
--pf-c-table__sort__button__text--Color --pf-c-table__sort__button--active__text--Color currentColor
	.pf-c-table__sort.pf-m-selected .pf-c-table__button	--pf-c-table__sort-indicator--Color	#06c
--pf-c-table__sort-indicator--Color --pf-c-table__sort--m-selected__sort-indicator--Color --pf-global--active-color--100 $pf-global--active-color--100 $pf-color-blue-400 #06c
	.pf-c-table__sort.pf-m-selected .pf-c-table__button	--pf-c-table__sort__button__text--Color	currentColor
--pf-c-table__sort__button__text--Color --pf-c-table__sort--m-selected__button__text--Color currentColor
	.pf-c-table__sort.pf-m-help	--pf-c-table--th--m-help--MinWidth	15ch
--pf-c-table--th--m-help--MinWidth --pf-c-table__sort--m-help--MinWidth 15ch
	.pf-c-table__sort.pf-m-favorite	--pf-c-table__sort__button__text--Color	#6a6e73
--pf-c-table__sort__button__text--Color --pf-c-table__sort--m-favorite__button__text--Color --pf-global--Color--200 $pf-global--Color--200 $pf-color-black-600 #6a6e73
	.pf-c-table__sort.pf-m-favorite	--pf-c-table__sort__button--hover__text--Color	#151515
--pf-c-table__sort__button--hover__text--Color --pf-c-table__sort--m-favorite__button--hover__text--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-table__sort.pf-m-favorite	--pf-c-table__sort__button--focus__text--Color	#151515
--pf-c-table__sort__button--focus__text--Color --pf-c-table__sort--m-favorite__button--focus__text--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-table__sort.pf-m-favorite	--pf-c-table__sort__button--active__text--Color	#151515
--pf-c-table__sort__button--active__text--Color --pf-c-table__sort--m-favorite__button--active__text--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-table__sort.pf-m-favorite	--pf-c-table__sort--m-selected__button__text--Color	currentColor
	.pf-c-table__expandable-row	--pf-c-table--cell--PaddingTop	0
	.pf-c-table__expandable-row	--pf-c-table--cell--PaddingBottom	0
	.pf-c-table .pf-c-table tr > *:first-child	--pf-c-table--cell--PaddingLeft	1rem
--pf-c-table--cell--PaddingLeft --pf-c-table--nested--first-last-child--PaddingLeft --pf-c-table--m-compact--cell--first-last-child--PaddingRight --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-table .pf-c-table tr > *:last-child	--pf-c-table--cell--PaddingRight	1rem
--pf-c-table--cell--PaddingRight --pf-c-table--nested--first-last-child--PaddingRight --pf-c-table--m-compact--cell--first-last-child--PaddingLeft --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-table.pf-m-compact	--pf-c-table--cell--FontSize	0.875rem
--pf-c-table--cell--FontSize --pf-c-table--m-compact--FontSize --pf-global--FontSize--sm $pf-global--FontSize--sm pf-font-prem(14px) 0.875rem
	.pf-c-table.pf-m-compact	--pf-c-table--cell--PaddingTop	0.5rem
--pf-c-table--cell--PaddingTop --pf-c-table--m-compact--cell--PaddingTop --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-table.pf-m-compact	--pf-c-table--cell--PaddingBottom	0.5rem
--pf-c-table--cell--PaddingBottom --pf-c-table--m-compact--cell--PaddingBottom --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-table.pf-m-compact	--pf-c-table--cell--PaddingRight	0.5rem
--pf-c-table--cell--PaddingRight --pf-c-table--m-compact--cell--PaddingLeft --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-table.pf-m-compact tr	--pf-c-table--cell--PaddingLeft	0.5rem
--pf-c-table--cell--PaddingLeft --pf-c-table--m-compact--cell--PaddingLeft --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-table.pf-m-compact tr	--pf-c-table--cell--PaddingRight	0.5rem
--pf-c-table--cell--PaddingRight --pf-c-table--m-compact--cell--PaddingRight --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-table.pf-m-compact tr:not(.pf-c-table__expandable-row)	--pf-c-table--cell--FontSize	0.875rem
--pf-c-table--cell--FontSize --pf-c-table--m-compact--FontSize --pf-global--FontSize--sm $pf-global--FontSize--sm pf-font-prem(14px) 0.875rem
	.pf-c-table.pf-m-compact tr:not(.pf-c-table__expandable-row)	--pf-c-table--cell--PaddingTop	0.5rem
--pf-c-table--cell--PaddingTop --pf-c-table--m-compact--cell--PaddingTop --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-table.pf-m-compact tr:not(.pf-c-table__expandable-row)	--pf-c-table--cell--PaddingBottom	0.5rem
--pf-c-table--cell--PaddingBottom --pf-c-table--m-compact--cell--PaddingBottom --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-table.pf-m-compact tr:not(.pf-c-table__expandable-row) > *:first-child	--pf-c-table--cell--PaddingLeft	1rem
--pf-c-table--cell--PaddingLeft --pf-c-table--m-compact--cell--first-last-child--PaddingLeft --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-table.pf-m-compact tr:not(.pf-c-table__expandable-row) > *:last-child	--pf-c-table--cell--PaddingRight	1rem
--pf-c-table--cell--PaddingRight --pf-c-table--m-compact--cell--first-last-child--PaddingRight --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-table.pf-m-compact thead th	--pf-c-table--cell--PaddingTop	calc(0.5rem + 0.25rem)
--pf-c-table--cell--PaddingTop --pf-c-table--m-compact-th--PaddingTop calc(--pf-global--spacer--sm + --pf-global--spacer--xs) calc($pf-global--spacer--sm + $pf-global--spacer--xs) calc(pf-size-prem(8px) + pf-size-prem(4px)) calc(0.5rem + 0.25rem)
	.pf-c-table.pf-m-compact thead th	--pf-c-table--cell--PaddingBottom	0.5rem
--pf-c-table--cell--PaddingBottom --pf-c-table--m-compact-th--PaddingBottom --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-table.pf-m-compact .pf-c-table__action	--pf-c-table--cell--PaddingTop	0
--pf-c-table--cell--PaddingTop --pf-c-table__action--PaddingTop 0
	.pf-c-table.pf-m-compact .pf-c-table__action	--pf-c-table--cell--PaddingBottom	0
--pf-c-table--cell--PaddingBottom --pf-c-table__action--PaddingBottom 0
	.pf-c-table.pf-m-compact .pf-c-table__action	--pf-c-table--cell--PaddingLeft	0
--pf-c-table--cell--PaddingLeft --pf-c-table__action--PaddingLeft 0
	.pf-c-table.pf-m-compact .pf-c-table__toggle	--pf-c-table--cell--PaddingTop	0
--pf-c-table--cell--PaddingTop --pf-c-table--m-compact__toggle--PaddingTop 0
	.pf-c-table.pf-m-compact .pf-c-table__toggle	--pf-c-table--cell--PaddingBottom	0
--pf-c-table--cell--PaddingBottom --pf-c-table--m-compact__toggle--PaddingBottom 0
	.pf-c-table .pf-c-table.pf-m-compact tr > *:first-child	--pf-c-table--cell--PaddingLeft	1rem
--pf-c-table--cell--PaddingLeft --pf-c-table--nested--first-last-child--PaddingLeft --pf-c-table--m-compact--cell--first-last-child--PaddingRight --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-table .pf-c-table.pf-m-compact tr > *:last-child	--pf-c-table--cell--PaddingRight	1rem
--pf-c-table--cell--PaddingRight --pf-c-table--nested--first-last-child--PaddingRight --pf-c-table--m-compact--cell--first-last-child--PaddingLeft --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-table.pf-m-compact .pf-c-table__expandable-row-content	--pf-c-table__expandable-row-content--PaddingTop	1.5rem
--pf-c-table__expandable-row-content--PaddingTop --pf-c-table--m-compact__expandable-row-content--PaddingTop --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-table.pf-m-compact .pf-c-table__expandable-row-content	--pf-c-table__expandable-row-content--PaddingBottom	1.5rem
--pf-c-table__expandable-row-content--PaddingBottom --pf-c-table--m-compact__expandable-row-content--PaddingBottom --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-table .pf-m-width-10	--pf-c-table--cell--Width	10%
	.pf-c-table .pf-m-width-15	--pf-c-table--cell--Width	15%
	.pf-c-table .pf-m-width-20	--pf-c-table--cell--Width	20%
	.pf-c-table .pf-m-width-25	--pf-c-table--cell--Width	25%
	.pf-c-table .pf-m-width-30	--pf-c-table--cell--Width	30%
	.pf-c-table .pf-m-width-35	--pf-c-table--cell--Width	35%
	.pf-c-table .pf-m-width-40	--pf-c-table--cell--Width	40%
	.pf-c-table .pf-m-width-45	--pf-c-table--cell--Width	45%
	.pf-c-table .pf-m-width-50	--pf-c-table--cell--Width	50%
	.pf-c-table .pf-m-width-60	--pf-c-table--cell--Width	60%
	.pf-c-table .pf-m-width-70	--pf-c-table--cell--Width	70%
	.pf-c-table .pf-m-width-80	--pf-c-table--cell--Width	80%
	.pf-c-table .pf-m-width-90	--pf-c-table--cell--Width	90%
	.pf-c-table .pf-m-width-100	--pf-c-table--cell--Width	100%

View source on GitHub

QUICKLINKS

CONTRIBUTE

STAY IN TOUCH

Privacy statement Terms of use All policies and guidelines