Table

Examples

Basic table

Basic table example

This is the table caption
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

Basic table accessibility

Attribute	Applied to	Outcome
`role="grid"`	`.pf-c-table`	Identifies the element that serves as the grid widget container. Required
`aria-label`	`.pf-c-table`	Provides an accessible name for the table when a descriptive `<caption>` or `<h>` is not available. Required in the absence of `<caption>` or `<h>`**
`data-label="[td description]"`	`<td>`	This attribute replaces table header in mobile viewport. It is rendered by `::before` pseudo element.

Basic table usage

Class	Applied to	Outcome
`.pf-c-table`	`<table>`	Initiates a table element. Required
`.pf-c-table__caption`	`<caption>`	Initiates a table caption.
`.pf-m-center`	`<th>`, `<td>`	Modifies cell to center its contents.

Responsive table behavior

Responsive layout modifier usage

These classes can be used to ensure that the table changes between the tabular and grid-based layout at an appropriate screen width.

Class	Applied to	Outcome
`.pf-m-grid-md`, `.pf-m-grid-lg`, `.pf-m-grid-xl`, `.pf-m-grid-2xl`	`.pf-c-table`	Changes tabular layout to responsive, grid based layout at optional breakpoint.
`.pf-m-grid`	`.pf-c-table`	Changes tabular layout to responsive, grid based layout. This approach requires JavaScript to set this class at some prescribed viewport width value.

Sortable

Sortable example

			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

Sortable accessibility

Attribute	Applied to	Outcome
`aria-sort=[ascending or descending]`	`.pf-c-table__sort`	Indicates if columns in a table are sorted in ascending or descending order. For each table, authors SHOULD apply aria-sort to only one header at a time. Required

Sortable usage

Class	Applied to	Outcome
`.pf-c-table__sort`	`<th>`	Initiates a table header sort cell. Required for sortable table columns
`.pf-c-table__button`	`<button>`, `<a>`	Initiates a table header sort cell button. If sorting a table row generates a unique URL that can be used as the `href` value for this element, use an `<a>`. Otherwise, use a `<button>`. Required for sortable table columns
`.pf-c-table__button-content`	`<div>`	Initiates a table header sort cell button content container. Required for sortable table columns Note: this is only necessary because `<button>` does not support`display: grid`.
`.pf-c-table__sort-indicator`	`.pf-c-table__sort > .pf-c-table__button > span`	Initiates a sort indicator. Required for sortable table columns
`.pf-m-selected`	`.pf-c-table__sort`	Modifies for sort selected state. Required for sortable table columns
`.pf-m-help`	`.pf-c-table__sort`, `.pf-c-table th`	Modifies a sortable table header to accommodate a help tooltip. Required for sortable table columns with help tooltips
`.fa-arrows-alt-v`	`.pf-c-table__sort > .pf-c-table__button > .pf-c-table__sort-indicator > .fas`	Initiates icon within unsorted, sortable table header. Required for sortable table columns
`.fa-long-arrow-alt-up`	`.pf-c-table__sort > .pf-c-table__button > .pf-c-table__sort-indicator > .fas`	Initiates icon within ascending sorted and selected, sortable table header. Required for sortable table columns
`.fa-long-arrow-alt-down`	`.pf-c-table__sort > .pf-c-table__button > .pf-c-table__sort-indicator > .fas`	Initiates icon within descending sorted and selected, sortable table header. Required for sortable table columns

Repositories	Branches	Pull requests
Repository 1	10	25
Repository 2	10	25

Repositories	Branches	Pull requests
Repository 1	10	25
Repository 2	10	25

Repositories	Branches	Pull requests
Repository 1	10	25
Repository 2	10	25

With checkboxes, radio select, and actions

Checkboxes and actions example

Repositories	Branches	Pull requests	Workspaces	Last commit
Node 1	10	25	5	2 days ago
Node 2 siemur/test-space	10	25	5	2 days ago
Node 3 siemur/test-space	10	25	5	2 days ago
Node 4 siemur/test-space	10	25	5	2 days ago

Single select radio example

Repositories	Branches	Pull requests	Workspaces	Last commit
Node 1	10	25	5	2 days ago
Node 2 siemur/test-space	10	25	5	2 days ago
Node 3 siemur/test-space	10	25	5	2 days ago
Node 4 siemur/test-space	10	25	5	2 days ago

When including interactive elements in a table, the primary, descriptive cell in the corresponding row is a <th>, rather than a <td>. In this example, 'Node 1' and 'Node 2 siemur/test-space' are <th>s.

When header cells are empty or they contain interactive elements, <th> should be replaced with <td>.

Checkboxes, radio select, and actions accessibility

Attribute	Applied to	Outcome
`aria-labelledby="[row_header_id]"` or `aria-label="[descriptive text]`	`.pf-c-table__check input`	Provides an accessible name for the checkbox or radio input. Required
`id`	row header `<th> > *`	Provides an accessible description for the checkbox or radio. Required if using `aria-labelledby` for `.pf-c-table__check input`

Checkboxes, radio select, and actions usage

Class	Applied to	Outcome
`.pf-c-table__check`	`<th>`, `<td>`	Initiates a checkbox or radio input table cell.
`.pf-c-table__action`	`<th>`, `<td>`	Initiates an action table cell.
`.pf-c-table__inline-edit-action`	`<th>`, `<td>`	Initiates an inline edit action table cell.

Expandable

Expandable example


	Node 1 siemur/test-space	10	25	Link 1
	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 2 siemur/test-space	10	25	Link 2
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 3 siemur/test-space	10	25	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 siemur/test-space	10	25	Link 4
Expandable row content has no padding.

Expandable with nested table example

Node 1

siemur/test-space

Link 1

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

Node 2

siemur/test-space

Link 2

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 3

siemur/test-space

Link 3

Node 4

siemur/test-space

Link 4

Expandable row content has no padding.

Note: To apply padding to .pf-c-table__expandable-row, wrap the content in .pf-c-table__expandable-row-content. For no padding add .pf-m-no-padding to .pf-c-table__expandable-row > <td>

Expandable accessibility

Attribute	Applied to	Outcome
`hidden`	`.pf-c-table__expandable-row`	Indicates that the expandable content is hidden. Required
`aria-expanded="true"`	`.pf-c-table__toggle` > `.pf-c-button`	Indicates that the row is visible. Required
`aria-label="[descriptive text]"`	`.pf-c-table__toggle` > `.pf-c-button`	Provides an accessible name for toggle button. Required
`aria-labelledby="[title_cell_id] [button_id]"`	`.pf-c-table__toggle` > `.pf-c-button`	Provides an accessible description for toggle button. Required
`id="[button_id]"`	`.pf-c-table__toggle` > `.pf-c-button`	Provides a reference for toggle button description. Required
`aria-controls="[id of element the button controls]"`	`.pf-c-table__toggle` > `.pf-c-button`	Identifies the expanded content controlled by the toggle button. Required

Expandable usage

Class	Applied to	Outcome
`.pf-c-table__toggle-icon`	`<span>`	Initiates the table toggle icon wrapper.
`.pf-c-table__expandable-row`	`<tr>`	Initiates an expandable row.
`.pf-c-table__expandable-row-content`	`.pf-c-table__expandable-row` > `<td>` > `<div>`	Initiates an expandable row content wrapper.
`.pf-m-expanded`	`.pf-c-table__toggle` > `.pf-c-button`, `.pf-c-table__expandable-row`	Modifies for expanded state.
`.pf-m-no-padding`	`.pf-c-table__expandable-row` > `<td>`	Modifies the expandable row to have no padding.

Compound expansion

Compound expansion example

Workspaces

Last commit

siemur/test-space

20 minutes

Open in Github

	Date	Status
Item one	May 9, 2018	Active
Item two	May 9, 2018	Warning
Item three	May 9, 2018	Active
Item four	May 9, 2018	Active
Item five	May 9, 2018	Active

	Date	Status
Item one	May 9, 2018	Active
Item two	May 9, 2018	Warning
Item three	May 9, 2018	Active
Item four	May 9, 2018	Active
Item five	May 9, 2018	Active

	Date	Status
Item one	May 9, 2018	Active
Item two	May 9, 2018	Warning
Item three	May 9, 2018	Active
Item four	May 9, 2018	Active
Item five	May 9, 2018	Active

siemur/test-space

1 day ago

Open in Github

	Date	Status
Item one	May 9, 2018	Active
Item two	May 9, 2018	Warning
Item three	May 9, 2018	Active
Item four	May 9, 2018	Active
Item five	May 9, 2018	Active

	Date	Status
Item one	May 9, 2018	Active
Item two	May 9, 2018	Warning
Item three	May 9, 2018	Active
Item four	May 9, 2018	Active
Item five	May 9, 2018	Active

	Date	Status
Item one	May 9, 2018	Active
Item two	May 9, 2018	Warning
Item three	May 9, 2018	Active
Item four	May 9, 2018	Active
Item five	May 9, 2018	Active

siemur/test-space

2 days ago

Open in Github

	Date	Status
Item one	May 9, 2018	Active
Item two	May 9, 2018	Warning
Item three	May 9, 2018	Active
Item four	May 9, 2018	Active
Item five	May 9, 2018	Active

	Date	Status
Item one	May 9, 2018	Active
Item two	May 9, 2018	Warning
Item three	May 9, 2018	Active
Item four	May 9, 2018	Active
Item five	May 9, 2018	Active

	Date	Status
Item one	May 9, 2018	Active
Item two	May 9, 2018	Warning
Item three	May 9, 2018	Active
Item four	May 9, 2018	Active
Item five	May 9, 2018	Active

Compound expansion accessibility

Attribute	Applied to	Outcome
`hidden`	`.pf-c-table__expandable-row`	Indicates that the expandable content is hidden. Required
`aria-expanded="true"`	`.pf-c-table__compound-expansion-toggle` > `.pf-c-button`	Indicates that the row is visible. Required
`aria-controls="[id of element the button controls]"`	`.pf-c-table__compound-expansion-toggle` > `.pf-c-button`	Identifies the expanded content controlled by the toggle button. Required

Compound expansion usage

Class	Applied to	Outcome
`.pf-c-table__control-row`	`.pf-c-table__expandable > <tr>`	Modifies a compound expandable table control row.
`.pf-m-expanded`	`<tbody>`, `.pf-c-table__compound-expansion-toggle` > `.pf-c-button`	Modifies a tbody with a row and an expandable row.
`.pf-c-table__compound-expansion-toggle`	`<td>`	Modifies a `<td>` on active/focus.

Compact variant

Compact example

Contributor	Position	Location	Last seen	Numbers	Icons
Sam Jones	CSS guru	Not too sure	May 9, 2018	0556		Action link
Amy Wilson	Visual design	Raleigh	May 9, 2018	9492		Action link
Steve Wilson	Visual design lead	Westford	May 9, 2018	9929		Action link
Emma Jackson	Interaction design	Westford	May 9, 2018	2217		Action link

Compact expandable example

	Repositories	Branches	Pull requests
	Node 1	10	25	Link
	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 2	10	25	Link
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 3	10	25	Link
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	10	25	Link
This content has no padding.
	Node 5	10	25	Link
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 6	10	25	Link
	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.		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 7	10	25	Link
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 8	10	25	Link
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.			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 9	10	25	Link
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.

Compact Usage

Class	Applied to	Outcome
`.pf-m-compact`	`.pf-c-table`	Modifies for a compact table.

Hoverable and selected

Hoverable and selected example


	Hoverable
	Selected
	Hoverable
	Hoverable
	Selected
	Selected
	Selected
	Hoverable
	Hoverable
	Selected
	Hoverable

Expandable, hoverable, and selected example


Hoverable	10	25	Link 1
Expandable content
Selected and not expanded	10	25	Link 2
Expandable content
Hoverable	10	25	Link 3
Expandable content
Hoverable	10	25	Link 4
Expandable content
Selected and not expanded	10	25	Link 5
Expandable content
Selected and not expanded	10	25	Link 6
Expandable content
Selected and not expanded	10	25	Link 7
Expandable content
Hoverable	10	25	Link 8
Expandable content
Hoverable	10	25	Link 9
Expandable content
Hoverable	10	25	Link 10
Expandable content
Expanded and selected	10	25	Link 11
Expandable content
Hoverable	10	25	Link 12
Expandable content
Expanded and selected	10	25	Link 13
Expandable content
Expanded and selected	10	25	Link 15
Expandable content
Expanded and not selected	10	25	Link 14
Expandable content
Hoverable	10	25	Link 16
Expandable content
Expanded and not selected	10	25	Link 17
Expandable content
Hoverable	10	25	Link 18
Expandable content
Hoverable	10	25	Link 19
Expandable content

Hoverable accessibility

Attribute	Applied to	Outcome
`tabindex="0"`	`.pf-c-table tbody.pf-m-hoverable`	Inserts the hoverable table element into the tab order of the page so that it is focusable. Required

Hoverable and selected usage

Class	Applied to	Outcome
`.pf-m-hoverable`	`.pf-c-table tbody`, `.pf-c-table tr`	Modifies a tbody or tr table element to be hoverable.
`.pf-m-selected`	`.pf-c-table tbody`, `.pf-c-table tr`	Modifies a selectable tbody or tr table element to be selected.

Tree table

Tree table basic

Name	Count	Size	Data Stores
Level 1 all folders	10	25	5
Level 2 node	10	25	5
Level 3 leaf	10	25	5
Level 3 leaf	10	25	5
Level 2 leaf	10	25	5
Level 2 leaf	10	25	5
Level 2 node	10	25	5
Level 3 leaf	10	25	5
Level 3 node	10	25	5
Level 4 leaf	10	25	5
Level 3 leaf	10	25	5
Level 3 node	10	25	5
Level 4 leaf	10	25	5
Level 4 leaf	10	25	5
Level 2 node	10	25	5
Level 3 leaf	10	25	5
Level 3 leaf	10	25	5

Tree table with checkboxes

Name	Count	Size	Data Stores
Level 1 all folders	10	25	5
Level 2 node	10	25	5
Level 3 leaf	10	25	5
Level 3 leaf	10	25	5
Level 2 leaf	10	25	5
Level 2 leaf	10	25	5
Level 2 node	10	25	5
Level 3 leaf	10	25	5
Level 3 node	10	25	5
Level 4 leaf	10	25	5
Level 3 leaf	10	25	5
Level 3 node	10	25	5
Level 4 leaf	10	25	5
Level 4 leaf	10	25	5
Level 2 node	10	25	5
Level 3 leaf	10	25	5
Level 3 leaf	10	25	5

Tree table with checkboxes and icons

Name	Count	Size	Data Stores
Level 1 all folders	10	25	5
Level 2 node	10	25	5
Level 3 leaf	10	25	5
Level 3 leaf	10	25	5
Level 2 leaf	10	25	5
Level 2 leaf	10	25	5
Level 2 node	10	25	5
Level 3 leaf	10	25	5
Level 3 node	10	25	5
Level 4 leaf	10	25	5
Level 3 leaf	10	25	5
Level 3 node	10	25	5
Level 4 leaf	10	25	5
Level 4 leaf	10	25	5
Level 2 node	10	25	5
Level 3 leaf	10	25	5
Level 3 leaf	10	25	5

Tree table accessibility

Attribute	Applied to	Outcome
`role="treegrid"`	`.pf-c-table.pf-m-tree-view`	Identifies the `table` as a treegrid. Place on the outermost `table` only
`role="row"`	`.pf-c-table.pf-m-tree-view tr`	Identifies the `tr` element as a `row`. The row role is not an implicit semantic for the tr element when in a treegrid.
`role="gridcell"`	`.pf-c-table.pf-m-tree-view tr`	Identifies the `td` as a gridcell. The `gridcell` role is not an implicit semantic for the td element when in a treegrid.
`tabindex="-1"`	`.pf-c-table.pf-m-tree-view tr`	Makes the element with the treeitem role focusable without including it in the tab sequence of the page.
`tabindex="0"`	`.pf-c-table.pf-m-tree-view tr`	Includes the element with the treeitem role in the tab sequence. Only one treeitem in the tree has tabindex="0". When the user moves focus in the tree, the element included in the tab sequence changes to the element with focus.
`aria-expanded="false"`	`.pf-c-table.pf-m-tree-view tr`	For an expandable item, indicates the parent node is closed, i.e., the descendant elements are not visible.
`aria-expanded="true"`	`.pf-c-table.pf-m-tree-view tr.pf-m-expanded`	Indicates the parent node is open, i.e., the descendant elements are visible.
`aria-level="number"`	`.pf-c-table.pf-m-tree-view tr`	Defines the level of the row in the hierarchical treegrid structure. Counting is one-based. Root rows have aria-level=“1”.
`aria-setsize="number"`	`.pf-c-table.pf-m-tree-view tr`	Defines the number of rows in the set of rows that are in the same branch and at the same level within the hierarchy.
`aria-posinset="number"`	`.pf-c-table.pf-m-tree-view tr`	Defines the position of the row within the set of other rows that are in the same branch and at the same level within the hierarchy. Counting is one-based, not zero-based.

Tree table usage

Class	Applied	Outcome
`.pf-c-table__tree-view-main`	`<div>`	Initiates a tree view table main container. Required with tree view
`.pf-c-table__tree-view-text`	`<div>`	Initiates a tree view table text element. Required with tree view
`.pf-c-table__tree-view-icon`	`<span>`	Initiates a tree view icon wrapper. Required with tree view
`.pf-c-table__tree-view-title-header-cell`	`<th>`	Initiates a tree view title header cell. Required with tree view
`.pf-c-table__tree-view-details-toggle`	`<span>`	Initiates a tree view details toggle container.
`.pf-c-table__tree-view-details-toggle-icon`	`<span>`	Initiates a tree view details toggle icon.
`.pf-m-treeview-details-expanded`	`<tr>`	Modifies a tbody with a row and an expandable row.

Borderless variant

Borderless example

Contributor	Position	Location	Last seen	Numbers	Icons
Sam Jones	CSS guru	Not too sure	May 9, 2018	0556		Action link
Amy Wilson	Visual design	Raleigh	May 9, 2018	9492		Action link
Steve Wilson	Visual design lead	Westford	May 9, 2018	9929		Action link
Emma Jackson	Interaction design	Westford	May 9, 2018	2217		Action link

Borderless compact example

Contributor	Position	Location	Last seen	Numbers	Icons
Sam Jones	CSS guru	Not too sure	May 9, 2018	0556		Action link
Amy Wilson	Visual design	Raleigh	May 9, 2018	9492		Action link
Steve Wilson	Visual design lead	Westford	May 9, 2018	9929		Action link
Emma Jackson	Interaction design	Westford	May 9, 2018	2217		Action link

Borderless expandable example


	Node 1 siemur/test-space	10	25	Link 1
	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 2 siemur/test-space	10	25	Link 2
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 3 siemur/test-space	10	25	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 siemur/test-space	10	25	Link 4
Expandable row content has no padding.

Borderless with compound expansion example

Workspaces

Last commit

siemur/test-space

20 minutes

Open in Github

	Date	Status
Item one	May 9, 2018	Active
Item two	May 9, 2018	Warning
Item three	May 9, 2018	Active
Item four	May 9, 2018	Active
Item five	May 9, 2018	Active

	Date	Status
Item one	May 9, 2018	Active
Item two	May 9, 2018	Warning
Item three	May 9, 2018	Active
Item four	May 9, 2018	Active
Item five	May 9, 2018	Active

	Date	Status
Item one	May 9, 2018	Active
Item two	May 9, 2018	Warning
Item three	May 9, 2018	Active
Item four	May 9, 2018	Active
Item five	May 9, 2018	Active

siemur/test-space

20 minutes

Open in Github

	Date	Status
Item one	May 9, 2018	Active
Item two	May 9, 2018	Warning
Item three	May 9, 2018	Active
Item four	May 9, 2018	Active
Item five	May 9, 2018	Active

	Date	Status
Item one	May 9, 2018	Active
Item two	May 9, 2018	Warning
Item three	May 9, 2018	Active
Item four	May 9, 2018	Active
Item five	May 9, 2018	Active

	Date	Status
Item one	May 9, 2018	Active
Item two	May 9, 2018	Warning
Item three	May 9, 2018	Active
Item four	May 9, 2018	Active
Item five	May 9, 2018	Active

siemur/test-space

1 day ago

Open in Github

	Date	Status
Item one	May 9, 2018	Active
Item two	May 9, 2018	Warning
Item three	May 9, 2018	Active
Item four	May 9, 2018	Active
Item five	May 9, 2018	Active

	Date	Status
Item one	May 9, 2018	Active
Item two	May 9, 2018	Warning
Item three	May 9, 2018	Active
Item four	May 9, 2018	Active
Item five	May 9, 2018	Active

	Date	Status
Item one	May 9, 2018	Active
Item two	May 9, 2018	Warning
Item three	May 9, 2018	Active
Item four	May 9, 2018	Active
Item five	May 9, 2018	Active

siemur/test-space

2 days ago

Open in Github

	Date	Status
Item one	May 9, 2018	Active
Item two	May 9, 2018	Warning
Item three	May 9, 2018	Active
Item four	May 9, 2018	Active
Item five	May 9, 2018	Active

	Date	Status
Item one	May 9, 2018	Active
Item two	May 9, 2018	Warning
Item three	May 9, 2018	Active
Item four	May 9, 2018	Active
Item five	May 9, 2018	Active

	Date	Status
Item one	May 9, 2018	Active
Item two	May 9, 2018	Warning
Item three	May 9, 2018	Active
Item four	May 9, 2018	Active
Item five	May 9, 2018	Active

Borderless usage

Class	Applied to	Outcome
`.pf-m-no-border-rows`	`.pf-c-table.pf-m-compact`	Modifies to remove borders between rows. Note: Does not affect `.pf-c-table__control-row`.
`.pf-m-expandable`	`.pf-c-table.pf-m-compact`	Indicates that the table has expandable rows.

Width modifiers

Width modifiers examples

			Workspaces	Last commit
Node 1	10	25	5	2 days ago
Node 2 siemur/test-space	10	25	5	2 days ago
Node 3 siemur/test-space	10	25	5	2 days ago
Node 4 siemur/test-space	10	25	5	2 days ago

Width modifiers usage

Width modifiers control the width of the columns. To control the responsive behavior of the table at different screen widths, see responsive table behavior.

Class	Applied to	Outcome
`.pf-m-width-[10, 15, 20, 25, 30, 35, 40, 45, 50, 60, 70, 80, or 90]`	`<th>`, `<td>`	Percentage based modifier for `th` and `td` widths. Recommended for sortable title cell
`.pf-m-width-max`	`<th>`, `<td>`	Percentage based modifier for `th` and `td` maximum width.
`.pf-m-fit-content`	`<th>`, `<td>`	Percentage based modifier for `th` and `td` minimum width with no text wrapping.

Hidden/visible breakpoint modifiers

Hidden/visible breakpoint modifiers example

Repositories	Branches	Pull requests	Workspaces	Last commit
Visible only on md breakpoint	10	Hidden only on md breakpoint	5	Hidden on xs breakpoint
Repository 2	10	25	5	2 days ago
Repository 3	10	25	5	2 days ago
Repository 4	10	25	5	2 days ago

Hidden/visible breakpoint modifiers usage

Class	Applied to	Outcome
`.pf-m-hidden{-on-[breakpoint]}`	`.pf-c-table tr > *`	Hides a table cell at optional breakpoint, or hides it at all breakpoints with `.pf-m-hidden`. Note: Needs to apply to all cells in the column you want to hide.
`.pf-m-visible{-on-[breakpoint]}`	`.pf-c-table tr > *`	Shows a table cell at optional breakpoint.

Text control modifiers

To better control table cell behavior, PatternFly provides a series of modifiers to help contextually control layout. By default, thead cells are set to truncate, whereas tbody cells are set to wrap. Both th and td cells use a set of shared css properties mapped to customizable css variable values. Because only the shared css variables are changed by the modifier selector and not the properties, the modifier can be applied to any parent element up until .pf-c-table itself [thead, tbody, tr, th, td, .pf-c-table__text].

Text control example

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

By default, truncation and wrapping settings do not affect the grid layout, but text will fallback gracefully by passively wrapping long strings. Truncation and wrapping settings will persist with the addition of a .pf-c-table__text wrapper on table cell content. In addition to .pf-c-table__text, all PatternFly layouts can be used in table cells and contain table text elements.

Text control using the table text element example

This table contains `.pf-c-table__text` examples. The `.pf-c-table__text` element can be using alone or in a nested configuration.
Selector/element	Result
`th.pf-m-truncate`	This table cell contains a single `.pf-c-table__text` wrapper with the parent table cell applying `.pf-m-truncate`. The child `.pf-c-table__text` element will inherit the modifier settings and apply to the grid layout.
`.pf-l-stack`	Because `.pf-m-grid` applies a grid layout to `.pf-c-table`, child elements will stack in the grid layout. To prevent this, wrap multiple elements with a div or use a PatternFly layout. The `.pf-c-table__text` element can additionally be nested, like in this example. The next `.pf-c-table__text` element has a very long url whose width needs be constrained. http://truncatemodifierappliedtoaverylongurlthatwillforcethetabletobreakluckilywehavethepfctabletextelement.com This `.pf-c-table__text` element applies its own built in grid layout `.pf-m-stack` as well as a gutter `.pf-m-gutter` .
`.pf-l-flex`	Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt. http://breakwordmodifierappliedtoaverylongurlthatwillforcethetabletobreakluckilywehavethepfctabletextelement.com
`.pf-l-flex`	5 9 2 11 This is paragraph that we want to wrap. It doesn't need a modifier and has no extra long strings. Any modifier available for the flex layout can be used here. http://breakwordmodifierappliedtoaverylongurlthatwillforcethetabletobreakluckilywehavethepfctabletextelement.com
`.pf-l-grid`	Item 1 Item 2 Item 3 Item 4 This is paragraph that we want to wrap. It doesn't need a modifier and has no extra long strings. Any modifier available for the flex layout can be used here. http://breakwordmodifierappliedtoaverylongurlthatwillforcethetabletobreakluckilywehavethepfctabletextelement.com

Table with long strings in the content

Long strings in table cells will push that column wider and possible take from other columns. This can cause content or headers to be truncated.

Repositories	Branches	Pull requests	Workspaces	Last commit
Long lines of text will shrink adjacent column widths.	10	25	5	2 days ago
This example is not responsive. Adjacent `tbody` cells will shrink as a result of this text being a longer string and adjacent text being shorter in length. Truncation can be overridden in `th` cells with the addition of `.pf-m-wrap`, `.pf-m-nowrap` or `.pf-m-fit-content`.	10	25	5	2 days ago

Width constrained

Add a width modifier to thead th to limit string length or add .pf-m-truncate to tbody td.

Width 40	Branches	Pull requests	Fit content th	Last commit
Since this is a long string of text and the other cells contain short strings (narrower than their table header), we'll need to control width this table header's width. Let's set width to 40%.	10	25	5	2 days ago
This string will truncate in table mode only. Since this is a long string of text and the other cells contain short strings (narrower than their table header), we'll need to control width this table header's width. Let's set width to 40%.	10	25	5	2 days ago

Text control modifiers usage

Class	Applied to	Outcome
`.pf-c-table__text`	`th > `, `td > `	Initiates a table text element.
`.pf-m-wrap`	`thead`, `tbody`, `tr`, `th`, `td`, `.pf-c-table__text`	Sets table cell content to wrap. If applied to `thead`, `tbody` or `tr`, then all child cells will be affected. This is the default behavior for `tbody` cells.
`.pf-m-truncate`	`thead`, `tbody`, `tr`, `th`, `td`, `.pf-c-table__text`	Sets text to truncate based on a minimum width and available space adjacent table cells. If applied to `thead`, `tbody` or `tr`, then all child cells will be affected. This is the default behavior for `thead` cells.
`.pf-m-nowrap`	`thead`, `tbody`, `tr`, `th`, `td`, `.pf-c-table__text`	Unsets min/max width and sets whitespace to nowrap. If applied to `thead`, `tbody` or `tr`, then all child cells will be affected. This is specifically beneficial for cell's whose `thead th` cells are blank. The following example highlights link text that should display inline. Be careful with this modifier, it will prioritize its cell's content above all other cell's contents.
`.pf-m-fit-content`	`thead`, `tbody`, `tr`, `th`, `td`, `.pf-c-table__text`	Fit column width to cell content. If applied to `thead`, `tbody` or `tr`, then all child cells will be affected.
`.pf-m-break-word`	`thead`, `tbody`, `tr`, `th`, `td`, `.pf-c-table__text`	Breaks long strings to break wherever necessary as defined by the table layout. If applied to `thead`, `tbody` or `tr`, then all child cells will be affected.

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

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

Sticky column

		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

Multiple sticky columns

		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

Sticky columns and header

		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

Sticky table usage

For sticky columns to function correctly, the parent table's width must be controlled with .pf-c-scroll-inner-wrapper. For sticky columns and sticky headers to function correctly, the parent table needs an inner and outer wrapper (.pf-c-scroll-outer-wrapper and .pf-c-scroll-inner-wrapper)

Class	Applied to	Outcome
`.pf-m-sticky-header`	`.pf-c-table`	Makes the table cells in `<thead>` sticky to the top of the table on scroll.
`.pf-c-scroll-outer-wrapper`	`<div>`	Initiates a table container sticky columns outer wrapper.
`.pf-c-scroll-inner-wrapper`	`<div>`	Initiates a table container sticky columns inner wrapper.
`.pf-c-table__sticky-column`	`<th>`, `<td>`	Initiates a sticky table cell.

Nested column headers

Nested column headers and expandable rows

	Design lead	Interaction design	Visual designers	Contact
	Members			Contact
Developer program	Stacey Logan	Mark Shakshober	Kaliq Ray
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	Stacey Logan	Mark Shakshober	Kaliq Ray
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	Stacey Logan	Mark Shakshober	Kaliq Ray
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.

Nested column headers

Pods			Ports

P api-pod-source-name	P api-pod-destination-name	June 22, 2021 3:58:24 PM	443 (HTTPS)	24 (smtp)	TCP	1.9 Kbps	2.1 KB	3

Nested column header modifier usage

Class	Applied to	Outcome
`.pf-m-nested-column-header`	`<thead>`	Modifies a table header to handle nested header cells.
`.pf-m-border-right`	`<th>`, `<td>`	Modifies a table cell to show a right border.
`.pf-m-border-left`	`<th>`, `<td>`	Modifies a table cell to show a left border.

Favorites

Favorites examples

Repositories	Branches	Pull requests	Workspaces	Last commit
Repository 1. This is a long title that will wrap to multiple lines. This is a long title that will wrap to multiple lines. This is a long title that will wrap to multiple lines. This is a long title that will wrap to multiple lines.	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

Favorites sortable example

Repositories	Branches	Pull requests	Workspaces	Last commit
Repository 1. This is a long title that will wrap to multiple lines. This is a long title that will wrap to multiple lines. This is a long title that will wrap to multiple lines. This is a long title that will wrap to multiple lines.	10	25	5	2 days ago
Repository 3	10	25	5	2 days ago
Repository 2	10	25	5	2 days ago
Repository 4	10	25	5	2 days ago
Repository 5	10	25	5	2 days ago

Favorites accessibility

Attribute	Applied to	Outcome
`role="grid"`	`.pf-c-table`	Identifies the element that serves as the grid widget container. Required
`aria-label`	`.pf-c-table`	Provides an accessible name for the table when a descriptive `<caption>` or `<h>` is not available. Required in the absence of `<caption>` or `<h>`**
`data-label="[td description]"`	`<td>`	This attribute replaces table header in mobile viewport. It is rendered by `::before` pseudo element.

Favorites usage

Class	Applied to	Outcome
`.pf-c-table__favorite`	`td`	Initiates a favorite table body cell.
`.pf-m-favorited`	`.pf-c-table__favorite`	Modifies a favorite cell for the favorited state.
`.pf-m-favorite`	`.pf-c-table__sort`	Modifies a sortable table header cell for use with a favorites column.

Draggable rows

Draggable rows example

Activate the reorder button and use the arrow keys to reorder the list or use your mouse to drag/reorder. Press escape to cancel the reordering.

This is the table caption
Repositories	Branches	Pull requests	Workspaces	Last commit
Draggable icon disabled	10	25	5	2 days ago
Table cell	10	25	5	2 days ago
Ghost row	10	25	5	2 days ago
Table cell	10	25	5	2 days ago

Draggable rows accessibility

Attribute	Applied to	Outcome
`aria-pressed="true or false"`	`.pf-c-table__draggable .pf-c-button`	Indicates whether the button is currently pressed or not.
`aria-live`	`[element with live text]`	To give screen reader users live feedback about what's happening during interaction with the table, both during drag and drop interactions and keyboard interactions. Highly Recommended
`aria-describedby="[id value of applicable content]"`	`.pf-c-table__draggable .pf-c-button`	Gives the draggable button an accessible description by referring to the textual content that describes how to use the button to drag elements. The example here uses a `<div id="table-draggable-rows-help"></div>`. Highly recommended
`aria-labelledby="[id of .pf-c-table__draggable .pf-c-button] [id of row title text]"`	`.pf-c-table__draggable .pf-c-button`	Provides an accessible name for the draggable button.
`id="[]"`	`.pf-c-table__draggable .pf-c-button`, `[element with row title text]`	Gives the button and the text element accessible IDs.

Draggable rows usage

Class	Applied to	Outcome
`.pf-c-table__draggable`	`<td>`	Initiates a draggable table cell.
`.pf-m-drag-over`	`.pf-c-table`	Modifies the table to indicate that a draggable item is being dragged over the table.

Striped

Basic striped table rows are supported on tables with a single <tbody> element and expandable tables by applying .pf-m-striped to the .pf-c-table element, which applies striped styling to odd table rows. For more complex tables, .pf-m-striped can be applied directly to the <tbody> and <tr> elements. The class .pf-m-striped-even can be applied to <tbody> elements to apply striped styling to the even rows in the table body. This is for use in tables with multiple <tbody> elements where even row striping may be needed to ensure visual consistency.

Striped table example

This is the table caption
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

Striped expandable table example


	Node 1 siemur/test-space	10	25	Link 1
	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 2 siemur/test-space	10	25	Link 2
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 3 siemur/test-space	10	25	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 siemur/test-space	10	25	Link 4
Expandable row content has no padding.

Striped multiple tbody example

This is the table caption
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 using `.pf-m-striped-even`)	10	25	5	2 days ago
tbody 2 - Repository 6	10	25	5	2 days ago
tbody 2 - Repository 7 (even rows striped using `.pf-m-striped-even`)	10	25	5	2 days ago

Striped tr example

This is the table caption
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

Striped table usage

Class	Applied to	Outcome
`.pf-m-striped`	`.pf-c-table`, `tbody`, `tr`	Modifies odd table rows to be striped.
`.pf-m-striped-even`	`tbody`	Modifies even table rows to be striped. For use in tables with multiple `tbody` elements where adjacent `tbody` elements need even row striping to maintain visual consistency.

Documentation

Overview

Because the table component is not used for layout and presents tabular data only, it requires the use of role="grid". Expandable table content (.pf-c-table__expandable-content) is placed within a singular <td> per expandable row, that can span multiple columns.

Role="grid"

Applying role="grid" to tables enhances accessible interaction while in table layout, however the responsive, css grid based layout can cause unexpected interactions. Therefore, for css grid layout, it is recommended that role="grid" be removed.

Sortable tables

Table columns may shift when expanding/collapsing. To address this, set .pf-m-fit-content, or assign a width .pf-m-width-[width] to the corresponding <th> defining the column or <td> within the column. Width values are [10, 15, 20, 25, 30, 35, 40, 45, 50, 60, 70, 80, 90] or max.

Table header cells

By default, all table header cells are set to white-space: nowrap. If a <th>'s content needs to wrap, apply .pf-m-wrap.

Implementation support

One expandable toggle button, positioned in the first cell of a non-expandable row, preceding an expandable row.
One checkbox or radio input, positioned in the first or second cell of a non-expandable row.
One action button, positioned in the last cell of a non-expandable row.
Tabular data.
Compact presentation modifier (not compatible with expandable table).

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

Table

Examples

Basic table

Basic table example

Basic table accessibility

Basic table usage

Responsive table behavior

Responsive layout modifier usage

Sortable

Sortable example

Sortable accessibility

Sortable usage

Overflow menu usage, desktop

Overflow menu usage, overflow menu collapsed

Overflow menu usage, mobile

With checkboxes, radio select, and actions

Checkboxes and actions example

Single select radio example

Checkboxes, radio select, and actions accessibility

Checkboxes, radio select, and actions usage

Expandable

Expandable example

Expandable with nested table example

Expandable accessibility

Expandable usage

Compound expansion

Compound expansion example

Compound expansion accessibility

Compound expansion usage

Compact variant

Compact example

Compact expandable example

Compact Usage

Hoverable and selected

Hoverable and selected example

Expandable, hoverable, and selected example

Hoverable accessibility

Hoverable and selected usage

Tree table

Tree table basic

Tree table with checkboxes

Tree table with checkboxes and icons

Tree table accessibility

Tree table usage

Borderless variant

Borderless example

Borderless compact example

Borderless expandable example

Borderless with compound expansion example

Borderless usage

Width modifiers

Width modifiers examples

Width modifiers usage

Hidden/visible breakpoint modifiers

Hidden/visible breakpoint modifiers example

Hidden/visible breakpoint modifiers usage

Text control modifiers

Text control example

Text control using the table text element example

Table with long strings in the content

Width constrained

Text control modifiers usage

Sticky table modifiers

Sticky header

Sticky column

Multiple sticky columns

Sticky columns and header

Sticky table usage

Nested column headers

Nested column headers and expandable rows

Nested column headers

Nested column header modifier usage

Favorites

Favorites examples

Favorites sortable example

Favorites accessibility

Favorites usage

Draggable rows

Draggable rows example

Draggable rows accessibility