Examples
Basic table
Basic table example
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-v6-c-table | Identifies the element that serves as the grid widget container. Required |
aria-label | .pf-v6-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-v6-c-table | <table> | Initiates a table element. Required |
.pf-v6-c-table__thead | <tr> | Initiates a table header. Required |
.pf-v6-c-table__tbody | <tr> | Initiates a table body. Required |
.pf-v6-c-table__tfoot | <tr> | Initiates a table footer. |
.pf-v6-c-table__tr | <tr> | Initiates a table row. Required |
.pf-v6-c-table__th | <th> | Initiates a table header cell. Required |
.pf-v6-c-table__td | <td> | Initiates a table data cell. Required |
.pf-v6-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-v6-c-table | Changes tabular layout to responsive, grid based layout at optional breakpoint. |
.pf-m-grid | .pf-v6-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-v6-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-v6-c-table__sort | <th> | Initiates a table header sort cell. Required for sortable table columns |
.pf-v6-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-v6-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 supportdisplay: grid . |
.pf-v6-c-table__sort-indicator | .pf-v6-c-table__sort > .pf-v6-c-table__button > span | Initiates a sort indicator. Required for sortable table columns |
.pf-m-selected | .pf-v6-c-table__sort | Modifies for sort selected state. Required for sortable table columns |
.pf-m-help | .pf-v6-c-table__sort , .pf-v6-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-v6-c-table__sort > .pf-v6-c-table__button > .pf-v6-c-table__sort-indicator > .fas | Initiates icon within unsorted, sortable table header. Required for sortable table columns |
.fa-long-arrow-alt-up | .pf-v6-c-table__sort > .pf-v6-c-table__button > .pf-v6-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-v6-c-table__sort > .pf-v6-c-table__button > .pf-v6-c-table__sort-indicator > .fas | Initiates icon within descending sorted and selected, sortable table header. Required for sortable table columns |
With checkboxes, radio select, and actions
Checkboxes and actions example
Repositories | Branches | Pull requests | Workspaces | Last commit | Actions | |
---|---|---|---|---|---|---|
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
Row select | Repositories | Branches | Pull requests | Workspaces | Last commit | Actions |
---|---|---|---|---|---|---|
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-v6-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-v6-c-table__check input |
Checkboxes, radio select, and actions usage
Class | Applied to | Outcome |
---|---|---|
.pf-v6-c-table__check | <th> , <td> | Initiates a checkbox or radio input table cell. |
.pf-v6-c-table__action | <th> , <td> | Initiates an action table cell. |
.pf-v6-c-table__inline-edit-action | <th> , <td> | Initiates an inline edit action table cell. |
Expandable
Note: Table column widths will respond automatically when toggling expanded rows. To retain column widths between expanded and collapsed states, column header and/or data cell widths must be set.
Expandable example
Links | Actions | |||||
---|---|---|---|---|---|---|
Node 1
siemur/test-space
|
10 | 25 | Link 1 | |||
Actions | Actions | Actions | ||||
Node 2
siemur/test-space
|
10 | 25 | Link 2 | |||
Node 3
siemur/test-space
|
10 | 25 | Link 3 | |||
Node 4
siemur/test-space
|
10 | 25 | Link 4 | |||
Expandable with set width columns example
Links | Actions | |||||
---|---|---|---|---|---|---|
Node 1
siemur/test-space
|
10 | 25 | Link 1 | |||
Actions | Actions | Actions | ||||
Node 2
siemur/test-space
|
10 | 25 | Link 2 | |||
Actions | Actions | Actions | ||||
Node 3
siemur/test-space
|
10 | 25 | Link 3 | |||
Node 4
siemur/test-space
|
10 | 25 | Link 4 | |||
Expandable with nested table example
Links | Actions | |||||
---|---|---|---|---|---|---|
Node 1
siemur/test-space
|
10 | 25 | Link 1 | |||
Node 2
siemur/test-space
|
10 | 25 | Link 2 | |||
Node 3
siemur/test-space
|
10 | 25 | Link 3 | |||
Node 4
siemur/test-space
|
10 | 25 | Link 4 | |||
Note: To apply padding to .pf-v6-c-table__expandable-row
, wrap the content in .pf-v6-c-table__expandable-row-content
. For no padding add .pf-m-no-padding
to .pf-v6-c-table__expandable-row
> <td>
Expandable accessibility
Attribute | Applied to | Outcome |
---|---|---|
hidden | .pf-v6-c-table__expandable-row | Indicates that the expandable content is hidden. Required |
aria-expanded="true" | .pf-v6-c-table__toggle > .pf-v6-c-button | Indicates that the row is visible. Required |
aria-label="[descriptive text]" | .pf-v6-c-table__toggle > .pf-v6-c-button | Provides an accessible name for toggle button. Required |
aria-labelledby="[title_cell_id] [button_id]" | .pf-v6-c-table__toggle > .pf-v6-c-button | Provides an accessible description for toggle button. Required |
id="[button_id]" | .pf-v6-c-table__toggle > .pf-v6-c-button | Provides a reference for toggle button description. Required |
aria-controls="[id of element the button controls]" | .pf-v6-c-table__toggle > .pf-v6-c-button | Identifies the expanded content controlled by the toggle button. Required |
Expandable usage
Class | Applied to | Outcome |
---|---|---|
.pf-v6-c-table__toggle-icon | <span> | Initiates the table toggle icon wrapper. |
.pf-v6-c-table__expandable-row | <tr> | Initiates an expandable row. |
.pf-v6-c-table__expandable-row-content | .pf-v6-c-table__expandable-row > <td> > <div> | Initiates an expandable row content wrapper. |
.pf-m-expanded | .pf-v6-c-table__toggle > .pf-v6-c-button , .pf-v6-c-table__expandable-row | Modifies for expanded state. |
.pf-m-no-padding | .pf-v6-c-table__expandable-row > <td> | Modifies the expandable row to have no padding. |
Compound expansion
Compound expansion example
Workspaces | Last commit | Links | Actions | |||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
siemur/test-space | 20 minutes | Open in Github | ||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||
siemur/test-space | 1 day ago | Open in Github | ||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||
siemur/test-space | 2 days ago | Open in Github | ||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||
|
Compound expansion accessibility
Attribute | Applied to | Outcome |
---|---|---|
hidden | .pf-v6-c-table__expandable-row | Indicates that the expandable content is hidden. Required |
aria-expanded="true" | .pf-v6-c-table__compound-expansion-toggle > .pf-v6-c-button | Indicates that the row is visible. Required |
aria-controls="[id of element the button controls]" | .pf-v6-c-table__compound-expansion-toggle > .pf-v6-c-button | Identifies the expanded content controlled by the toggle button. Required |
Compound expansion usage
Class | Applied to | Outcome |
---|---|---|
.pf-v6-c-table__control-row | .pf-v6-c-table__expandable > <tr> | Modifies a compound expandable table control row. |
.pf-m-expanded | <tbody> , .pf-v6-c-table__compound-expansion-toggle > .pf-v6-c-button | Modifies a tbody with a row and an expandable row. |
.pf-v6-c-table__compound-expansion-toggle | <td> | Modifies a <td> on active/focus. |
Compact variant
Compact example
Contributor | Position | Location | Last seen | Numbers | Icons | Links | Actions | |
---|---|---|---|---|---|---|---|---|
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
Compact Usage
Class | Applied to | Outcome |
---|---|---|
.pf-m-compact | .pf-v6-c-table | Modifies for a compact table. |
Clickable
Clickable and expandable example
Clickable accessibility
Attribute | Applied to | Outcome |
---|---|---|
tabindex="0" | .pf-v6-c-table tbody.pf-m-clickable | Inserts the clickable table element into the tab order of the page so that it is focusable. Required |
Clickable and selected usage
Class | Applied to | Outcome |
---|---|---|
.pf-m-clickable | .pf-v6-c-table tbody , .pf-v6-c-table tr | Modifies a tbody or tr table element to be clickable. |
.pf-m-selected | .pf-v6-c-table tbody , .pf-v6-c-table tr | Modifies a selectable tbody or tr table element to be selected. |
Tree table
Tree table basic
Name | Count | Size | Data Stores | Actions |
---|---|---|---|---|
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 | Actions |
---|---|---|---|---|
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 | Actions |
---|---|---|---|---|
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 with no children or indentation
Name | Count | Size | Data Stores |
---|---|---|---|
Level 1, leaf 1
|
10 | 25 | 5 |
Level 1, leaf 2
|
10 | 25 | 5 |
Level 1, leaf 3
|
10 | 25 | 5 |
Level 1, leaf 4
|
10 | 25 | 5 |
Level 1, leaf 5
|
10 | 25 | 5 |
Level 1, leaf 6
|
10 | 25 | 5 |
Tree table accessibility
Attribute | Applied to | Outcome |
---|---|---|
role="treegrid" | .pf-v6-c-table.pf-m-tree-view | Identifies the table as a treegrid. Place on the outermost table only |
role="row" | .pf-v6-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-v6-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-v6-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-v6-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-v6-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-v6-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-v6-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-v6-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-v6-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-v6-c-table__tree-view-main | <div> | Initiates a tree view table main container. Required with tree view |
.pf-v6-c-table__tree-view-text | <div> | Initiates a tree view table text element. Required with tree view |
.pf-v6-c-table__tree-view-icon | <span> | Initiates a tree view icon wrapper. Required with tree view |
.pf-v6-c-table__tree-view-title-header-cell | <th> | Initiates a tree view title header cell. Required with tree view |
.pf-v6-c-table__tree-view-details-toggle | <span> | Initiates a tree view details toggle container. |
.pf-v6-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. |
.pf-m-no-inset | .pf-v6-c-table.pf-m-tree-view , .pf-v6-c-table.pf-m-tree-view <tr> | Modifies a tree view .pf-v6-c-table__tree-view-main indentation. |
Borderless variant
Borderless example
Contributor | Position | Location | Last seen | Numbers | Icons | Links | Actions | |
---|---|---|---|---|---|---|---|---|
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 | Links | Actions | |
---|---|---|---|---|---|---|---|---|
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
Expand rows | Links | Actions | ||||
---|---|---|---|---|---|---|
Node 1
siemur/test-space
|
10 | 25 | Link 1 | |||
Actions | Actions | Actions | ||||
Node 2
siemur/test-space
|
10 | 25 | Link 2 | |||
Node 3
siemur/test-space
|
10 | 25 | Link 3 | |||
Node 4
siemur/test-space
|
10 | 25 | Link 4 | |||
Borderless with compound expansion example
Workspaces | Last commit | Links | Actions | |||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
siemur/test-space | 20 minutes | Open in Github | ||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||
siemur/test-space | 20 minutes | Open in Github | ||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||
siemur/test-space | 1 day ago | Open in Github | ||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||
siemur/test-space | 2 days ago | Open in Github | ||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||
|
Borderless usage
Class | Applied to | Outcome |
---|---|---|
.pf-m-no-border-rows | .pf-v6-c-table.pf-m-compact | Modifies to remove borders between rows. Note: Does not affect .pf-v6-c-table__control-row . |
.pf-m-expandable | .pf-v6-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 usage
Class | Applied to | Outcome |
---|---|---|
.pf-m-hidden{-on-[breakpoint]} | .pf-v6-c-table tr > th , .pf-v6-c-table tr > td | 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-v6-c-table tr > th , .pf-v6-c-table tr > td | 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-v6-c-table
itself [thead
, tbody
, tr
, th
, td
, .pf-v6-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 | Wrapping |
---|---|---|---|---|
This text will truncate instead of wrap in table layout and wrap gracefully in grid layout. | http://thisisaverylongurlthatneedstobreakusethebreakwordmodifier.org |
By default,
|
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-v6-c-table__text
wrapper on table cell content. In addition to .pf-v6-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
Selector/element | Result |
---|---|
th.pf-m-truncate
|
This table cell contains a single
`.pf-v6-c-table__text` wrapper with the parent table cell applying
`.pf-m-truncate` . The child
`.pf-v6-c-table__text` element will inherit the modifier settings and apply to the grid layout.
|
.pf-v6-l-stack
|
Because
.pf-m-grid applies a grid layout to
.pf-v6-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
This
|
.pf-v6-l-flex
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt. |
.pf-v6-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. |
.pf-v6-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. |
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-v6-c-table__text | th > * , td > * | Initiates a table text element. |
.pf-m-wrap | thead , tbody , tr , th , td , .pf-v6-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-v6-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-v6-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-v6-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-v6-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 thez-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.
Sticky header
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 right 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 |
Sticky table usage
For sticky columns to function correctly, the parent table's width must be controlled with .pf-v6-c-scroll-inner-wrapper
. For sticky columns and sticky headers to function correctly, the parent table needs an inner and outer wrapper (.pf-v6-c-scroll-outer-wrapper
and .pf-v6-c-scroll-inner-wrapper
)
Class | Applied to | Outcome |
---|---|---|
.pf-m-sticky-header | .pf-v6-c-table | Makes the table cells in <thead> sticky to the top of the table on scroll. |
.pf-v6-c-scroll-outer-wrapper | <div> | Initiates a table container sticky columns outer wrapper. |
.pf-v6-c-scroll-inner-wrapper | <div> | Initiates a table container sticky columns inner wrapper. |
.pf-v6-c-table__sticky-cell | <th> , <td> | Initiates a sticky table cell. |
.pf-m-right , .pf-m-inline-end | .pf-v6-c-table__sticky-cell | Initiates a sticky, right-hand (in LTR) or left-hand (in RTL) table cell. |
.pf-m-left , .pf-m-inline-start | .pf-v6-c-table__sticky-cell | Initiates a sticky, left-hand (in LTR) or right-hand (in RTL) table cell. |
Nested column headers
Nested column headers and expandable rows
Expandable toggle | Team | Members | Contact | ||||
---|---|---|---|---|---|---|---|
Design lead | Interaction design | Visual designers | |||||
Developer program | Stacey Logan | Mark Shakshober | Kaliq Ray | ||||
Actions | Actions | Actions | |||||
Developer program | Stacey Logan | Mark Shakshober | Kaliq Ray | ||||
Actions | Actions | Actions | |||||
Developer program | Stacey Logan | Mark Shakshober | Kaliq Ray | ||||
Actions | Actions | Actions |
Nested column headers example
Pods | Ports | ||||
---|---|---|---|---|---|
June 22, 2021
3:58:24 PM
|
443
(HTTPS)
|
24
(smtp)
|
3 | ||
June 22, 2021
3:58:24 PM
|
443
(HTTPS)
|
24
(smtp)
|
3 | ||
June 22, 2021
3:58:24 PM
|
443
(HTTPS)
|
24
(smtp)
|
3 | ||
June 22, 2021
3:58:24 PM
|
443
(HTTPS)
|
24
(smtp)
|
3 | ||
June 22, 2021
3:58:24 PM
|
443
(HTTPS)
|
24
(smtp)
|
3 | ||
June 22, 2021
3:58:24 PM
|
443
(HTTPS)
|
24
(smtp)
|
3 | ||
June 22, 2021
3:58:24 PM
|
443
(HTTPS)
|
24
(smtp)
|
3 | ||
June 22, 2021
3:58:24 PM
|
443
(HTTPS)
|
24
(smtp)
|
3 | ||
June 22, 2021
3:58:24 PM
|
443
(HTTPS)
|
24
(smtp)
|
3 | ||
June 22, 2021
3:58:24 PM
|
443
(HTTPS)
|
24
(smtp)
|
3 |
Nested column headers, sticky header
Pods | Ports | ||||
---|---|---|---|---|---|
June 22, 2021
3:58:24 PM
|
443
(HTTPS)
|
24
(smtp)
|
3 | ||
June 22, 2021
3:58:24 PM
|
443
(HTTPS)
|
24
(smtp)
|
3 | ||
June 22, 2021
3:58:24 PM
|
443
(HTTPS)
|
24
(smtp)
|
3 | ||
June 22, 2021
3:58:24 PM
|
443
(HTTPS)
|
24
(smtp)
|
3 | ||
June 22, 2021
3:58:24 PM
|
443
(HTTPS)
|
24
(smtp)
|
3 | ||
June 22, 2021
3:58:24 PM
|
443
(HTTPS)
|
24
(smtp)
|
3 | ||
June 22, 2021
3:58:24 PM
|
443
(HTTPS)
|
24
(smtp)
|
3 | ||
June 22, 2021
3:58:24 PM
|
443
(HTTPS)
|
24
(smtp)
|
3 | ||
June 22, 2021
3:58:24 PM
|
443
(HTTPS)
|
24
(smtp)
|
3 | ||
June 22, 2021
3:58:24 PM
|
443
(HTTPS)
|
24
(smtp)
|
3 |
Nested column header modifier usage
Favorites
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 examples
Row favorited | Repositories | Branches | Pull requests | Workspaces | Last commit | Actions | |
---|---|---|---|---|---|---|---|
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-v6-c-table | Identifies the element that serves as the grid widget container. Required |
aria-label | .pf-v6-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-v6-c-table__favorite | td | Initiates a favorite table body cell. |
.pf-m-favorited | .pf-v6-c-table__favorite | Modifies a favorite cell for the favorited state. |
.pf-m-favorite | .pf-v6-c-table__sort | Modifies a sortable table header cell for use with a favorites column. |
Draggable rows
Draggable rows example
Drag row | 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-v6-c-table__draggable .pf-v6-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-v6-c-table__draggable .pf-v6-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-v6-c-table__draggable .pf-v6-c-button] [id of row title text]" | .pf-v6-c-table__draggable .pf-v6-c-button | Provides an accessible name for the draggable button. |
id="[]" | .pf-v6-c-table__draggable .pf-v6-c-button , [element with row title text] | Gives the button and the text element accessible IDs. |
Draggable rows usage
Class | Applied to | Outcome |
---|---|---|
.pf-v6-c-table__draggable | <td> | Initiates a draggable table cell. |
.pf-m-drag-over | .pf-v6-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-v6-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
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
Expand row | Links | Actions | ||||
---|---|---|---|---|---|---|
Node 1
siemur/test-space
|
10 | 25 | Link 1 | |||
Actions | Actions | Actions | ||||
Node 2
siemur/test-space
|
10 | 25 | Link 2 | |||
Node 3
siemur/test-space
|
10 | 25 | Link 3 | |||
Node 4
siemur/test-space
|
10 | 25 | Link 4 | |||
Striped multiple tbody example
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
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-v6-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-v6-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
Expand or collapse column | Selector | Variable | Value | |
---|---|---|---|---|
.pf-v6-c-table | --pf-v6-c-table--BackgroundColor | (In light theme) #ffffff | ||
| ||||
.pf-v6-c-table | --pf-v6-c-table--BorderColor | (In light theme) #c7c7c7 | ||
| ||||
.pf-v6-c-table | --pf-v6-c-table--border-width--base | 1px | ||
| ||||
.pf-v6-c-table | --pf-v6-c-table__caption--FontSize | 0.875rem | ||
| ||||
.pf-v6-c-table | --pf-v6-c-table__caption--Color | (In light theme) #4d4d4d | ||
| ||||
.pf-v6-c-table | --pf-v6-c-table__caption--PaddingBlockStart | 1rem | ||
| ||||
.pf-v6-c-table | --pf-v6-c-table__caption--PaddingInlineEnd | 1.5rem | ||
| ||||
.pf-v6-c-table | --pf-v6-c-table__caption--PaddingBlockEnd | 1rem | ||
| ||||
.pf-v6-c-table | --pf-v6-c-table__caption--PaddingInlineStart | 1.5rem | ||
| ||||
.pf-v6-c-table | --pf-v6-c-table__thead--cell--FontSize | 0.75rem | ||
| ||||
.pf-v6-c-table | --pf-v6-c-table__thead--cell--FontWeight | 500 | ||
| ||||
.pf-v6-c-table | --pf-v6-c-table__thead__toggle--PaddingBlockEnd | 0.25rem | ||
| ||||
.pf-v6-c-table | --pf-v6-c-table__tbody--cell--PaddingBlockStart | 1rem | ||
| ||||
.pf-v6-c-table | --pf-v6-c-table__tbody--cell--PaddingBlockEnd | 1rem | ||
| ||||
.pf-v6-c-table | --pf-v6-c-table__tbody--cell--FontSize | 0.875rem | ||
| ||||
.pf-v6-c-table | --pf-v6-c-table__tr--BorderBlockEndWidth | 1px | ||
| ||||
.pf-v6-c-table | --pf-v6-c-table__tr--BorderBlockEndColor | (In light theme) #c7c7c7 | ||
| ||||
.pf-v6-c-table | --pf-v6-c-table--cell--Padding--base | 1rem | ||
| ||||
.pf-v6-c-table | --pf-v6-c-table--cell--PaddingBlockStart | 1rem | ||
| ||||
.pf-v6-c-table | --pf-v6-c-table--cell--PaddingInlineEnd | 1rem | ||
| ||||
.pf-v6-c-table | --pf-v6-c-table--cell--PaddingBlockEnd | 1rem | ||
| ||||
.pf-v6-c-table | --pf-v6-c-table--cell--PaddingInlineStart | 1rem | ||
| ||||
.pf-v6-c-table | --pf-v6-c-table--cell--FontSize | 0.875rem | ||
| ||||
.pf-v6-c-table | --pf-v6-c-table--cell--FontWeight | 400 | ||
| ||||
.pf-v6-c-table | --pf-v6-c-table--cell--LineHeight | 1.5 | ||
| ||||
.pf-v6-c-table | --pf-v6-c-table--cell--Color | (In light theme) #151515 | ||
| ||||
.pf-v6-c-table | --pf-v6-c-table--cell--first-last-child--PaddingInline | 1.5rem | ||
| ||||
.pf-v6-c-table | --pf-v6-c-table__tr--m-first-cell-offset-reset--cell--PaddingInlineStart | 1rem | ||
| ||||
.pf-v6-c-table | --pf-v6-c-table--cell--MinWidth | calc(0 + 0) | ||
| ||||
.pf-v6-c-table | --pf-v6-c-table--cell--MaxWidth | none | ||
.pf-v6-c-table | --pf-v6-c-table--cell--Width | auto | ||
.pf-v6-c-table | --pf-v6-c-table--cell--Overflow | visible | ||
.pf-v6-c-table | --pf-v6-c-table--cell--TextOverflow | clip | ||
.pf-v6-c-table | --pf-v6-c-table--cell--WhiteSpace | normal | ||
.pf-v6-c-table | --pf-v6-c-table--cell--WordBreak | normal | ||
.pf-v6-c-table | --pf-v6-c-table--cell--m-border-right--before--BorderInlineEndWidth | 1px | ||
| ||||
.pf-v6-c-table | --pf-v6-c-table--cell--m-border-right--before--BorderInlineEndColor | (In light theme) #c7c7c7 | ||
| ||||
.pf-v6-c-table | --pf-v6-c-table--cell--m-border-left--before--BorderInlineStartWidth | 1px | ||
| ||||
.pf-v6-c-table | --pf-v6-c-table--cell--m-border-left--before--BorderInlineStartColor | (In light theme) #c7c7c7 | ||
| ||||
.pf-v6-c-table | --pf-v6-c-table--cell--m-help--MinWidth | 11ch | ||
.pf-v6-c-table | --pf-v6-c-table--m-truncate--cell--MaxWidth | 1px | ||
.pf-v6-c-table | --pf-v6-c-table--m-truncate--cell--MinWidth | calc(5ch + 0 + 0) | ||
| ||||
.pf-v6-c-table | --pf-v6-c-table__text--MinWidth | 100% | ||
.pf-v6-c-table | --pf-v6-c-table__text--m-truncate--MinWidth | 5ch | ||
.pf-v6-c-table | --pf-v6-c-table--m-truncate__text--MinWidth | 5ch | ||
.pf-v6-c-table | --pf-v6-c-table--cell--hidden-visible--Display | table-cell | ||
.pf-v6-c-table | --pf-v6-c-table__toggle--PaddingBlockStart | 0.5rem | ||
| ||||
.pf-v6-c-table | --pf-v6-c-table__toggle--PaddingBlockEnd | 0.5rem | ||
| ||||
.pf-v6-c-table | --pf-v6-c-table__toggle--PaddingInlineStart | 0.5rem | ||
| ||||
.pf-v6-c-table | --pf-v6-c-table__toggle--PaddingInlineEnd | 0.5rem | ||
| ||||
.pf-v6-c-table | --pf-v6-c-table__toggle--c-button__toggle-icon--Rotate | 270deg | ||
.pf-v6-c-table | --pf-v6-c-table__toggle--c-button__toggle-icon--TransitionDuration | 200ms | ||
| ||||
.pf-v6-c-table | --pf-v6-c-table__toggle--c-button__toggle-icon--TransitionTimingFunction | cubic-bezier(.4, 0, .2, 1) | ||
| ||||
.pf-v6-c-table | --pf-v6-c-table__toggle--c-button--m-expanded__toggle-icon--Rotate | 360deg | ||
.pf-v6-c-table | --pf-v6-c-table__button--PaddingBlockStart | 0.5rem | ||
| ||||
.pf-v6-c-table | --pf-v6-c-table__button--PaddingBlockEnd | 0.5rem | ||
| ||||
.pf-v6-c-table | --pf-v6-c-table__button--PaddingInlineStart | 1rem | ||
| ||||
.pf-v6-c-table | --pf-v6-c-table__button--PaddingInlineEnd | 1rem | ||
| ||||
.pf-v6-c-table | --pf-v6-c-table__button--Color | (In light theme) #151515 | ||
| ||||
.pf-v6-c-table | --pf-v6-c-table__button--BackgroundColor | (In light theme) rgba(255, 255, 255, 0.0000) | ||
| ||||
.pf-v6-c-table | --pf-v6-c-table__button--OutlineOffset | calc(2px * -1) | ||
| ||||
.pf-v6-c-table | --pf-v6-c-table__button--BorderRadius | 6px | ||
| ||||
.pf-v6-c-table | --pf-v6-c-table__button--hover--Color | (In light theme) #151515 | ||
| ||||
.pf-v6-c-table | --pf-v6-c-table__button--hover--BackgroundColor | (In light theme) rgba(199, 199, 199, 0.2500) | ||
| ||||
.pf-v6-c-table | --pf-v6-c-table__check--PaddingInlineStart | 0.5rem | ||
| ||||
.pf-v6-c-table | --pf-v6-c-table__check--PaddingInlineEnd | 0.5rem | ||
| ||||
.pf-v6-c-table | --pf-v6-c-table__favorite--c-button--FontSize | 0.875rem | ||
| ||||
.pf-v6-c-table | --pf-v6-c-table--cell--m-favorite--Color | (In light theme) #4d4d4d | ||
| ||||
.pf-v6-c-table | --pf-v6-c-table__favorite--m-favorited--c-button--Color | (In light theme) #dca614 | ||
| ||||
.pf-v6-c-table | --pf-v6-c-table__tr--m-ghost-row--Opacity | .4 | ||
.pf-v6-c-table | --pf-v6-c-table__tr--m-ghost-row--BackgroundColor | (In light theme) #ffffff | ||
| ||||
.pf-v6-c-table | --pf-v6-c-table__action--PaddingBlockStart | 0.5rem | ||
| ||||
.pf-v6-c-table | --pf-v6-c-table__action--PaddingBlockEnd | 0.5rem | ||
| ||||
.pf-v6-c-table | --pf-v6-c-table__action--PaddingInlineStart | 0.5rem | ||
| ||||
.pf-v6-c-table | --pf-v6-c-table__action--PaddingInlineEnd | 0.5rem | ||
| ||||
.pf-v6-c-table | --pf-v6-c-table__expandable-row-content--PaddingBlockStart | 1rem | ||
| ||||
.pf-v6-c-table | --pf-v6-c-table__expandable-row-content--PaddingBlockEnd | 1rem | ||
| ||||
.pf-v6-c-table | --pf-v6-c-table__expandable-row-content--PaddingInlineStart | 1rem | ||
| ||||
.pf-v6-c-table | --pf-v6-c-table__expandable-row-content--PaddingInlineEnd | 1rem | ||
| ||||
.pf-v6-c-table | --pf-v6-c-table__expandable-row-content--BorderRadius | 6px | ||
| ||||
.pf-v6-c-table | --pf-v6-c-table__expandable-row-content--BackgroundColor | (In light theme) #ffffff | ||
| ||||
.pf-v6-c-table | --pf-v6-c-table__control-row--BackgroundColor | (In light theme) #ffffff | ||
| ||||
.pf-v6-c-table | --pf-v6-c-table__control-row--BorderBlockEndWidth | 1px | ||
| ||||
.pf-v6-c-table | --pf-v6-c-table__control-row__tbody--BorderBlockEndColor | (In light theme) #c7c7c7 | ||
| ||||
.pf-v6-c-table | --pf-v6-c-table__icon-inline--MarginInlineEnd | 0.5rem | ||
| ||||
.pf-v6-c-table | --pf-v6-c-table__sort--MinWidth | calc(6ch + 0 + 0 + 1rem) | ||
| ||||
.pf-v6-c-table | --pf-v6-c-table__sort--m-selected__button--Color | (In light theme) #004d99 | ||
| ||||
.pf-v6-c-table | --pf-v6-c-table__sort--m-help--MinWidth | 15ch | ||
.pf-v6-c-table | --pf-v6-c-table__sort__button__text--Color | currentcolor | ||
.pf-v6-c-table | --pf-v6-c-table__sort__button--hover__text--Color | currentcolor | ||
.pf-v6-c-table | --pf-v6-c-table__sort-indicator--Color | (In light theme) #707070 | ||
| ||||
.pf-v6-c-table | --pf-v6-c-table__sort-indicator--MarginInlineStart | 1rem | ||
| ||||
.pf-v6-c-table | --pf-v6-c-table__sort--m-selected__sort-indicator--Color | (In light theme) #004d99 | ||
| ||||
.pf-v6-c-table | --pf-v6-c-table__sort__button--hover__sort-indicator--Color | (In light theme) #151515 | ||
| ||||
.pf-v6-c-table | --pf-v6-c-table__th--m-help--MinWidth | 11ch | ||
.pf-v6-c-table | --pf-v6-c-table__column-help--MarginInlineStart | 0.5rem | ||
| ||||
.pf-v6-c-table | --pf-v6-c-table__compound-expansion-toggle__button--Color | (In light theme) #0066cc | ||
| ||||
.pf-v6-c-table | --pf-v6-c-table__compound-expansion-toggle__button--BackgroundColor | (In light theme) rgba(255, 255, 255, 0.0000) | ||
| ||||
.pf-v6-c-table | --pf-v6-c-table__compound-expansion-toggle__button--hover--Color | (In light theme) #004d99 | ||
| ||||
.pf-v6-c-table | --pf-v6-c-table__compound-expansion-toggle__button--hover--BackgroundColor | (In light theme) rgba(199, 199, 199, 0.2500) | ||
| ||||
.pf-v6-c-table | --pf-v6-c-table__compound-expansion-toggle__button--expanded--BackgroundColor | (In light theme) rgba(199, 199, 199, 0.2500) | ||
| ||||
.pf-v6-c-table | --pf-v6-c-table__compound-expansion-toggle__button--after--BorderColor | (In light theme) #0066cc | ||
| ||||
.pf-v6-c-table | --pf-v6-c-table__compound-expansion-toggle__button--after--BorderBlockStartWidth | 0 | ||
.pf-v6-c-table | --pf-v6-c-table__compound-expansion-toggle__button--hover--after--BorderBlockStartWidth | 2px | ||
| ||||
.pf-v6-c-table | --pf-v6-c-table__compound-expansion-toggle--m-expanded__button--after--BorderBlockStartWidth | 2px | ||
| ||||
.pf-v6-c-table | --pf-v6-c-table--compound-expansion--m-expanded--BackgroundColor | (In light theme) #f2f2f2 | ||
| ||||
.pf-v6-c-table | --pf-v6-c-table--m-compact__th--PaddingBlockStart | calc(0.5rem + 0.25rem) | ||
| ||||
.pf-v6-c-table | --pf-v6-c-table--m-compact__th--PaddingBlockEnd | 0.5rem | ||
| ||||
.pf-v6-c-table | --pf-v6-c-table--m-compact--cell--PaddingBlockStart | 0.5rem | ||
| ||||
.pf-v6-c-table | --pf-v6-c-table--m-compact--cell--PaddingBlockEnd | 0.5rem | ||
| ||||
.pf-v6-c-table | --pf-v6-c-table--m-compact__action--PaddingBlockStart | 0.25rem | ||
| ||||
.pf-v6-c-table | --pf-v6-c-table--m-compact__action--PaddingBlockEnd | 0.25rem | ||
| ||||
.pf-v6-c-table | --pf-v6-c-table__expandable-row--m-expanded--BorderBlockEndColor | (In light theme) #c7c7c7 | ||
| ||||
.pf-v6-c-table | --pf-v6-c-table__tr--m-clickable--BackgroundColor | transparent | ||
.pf-v6-c-table | --pf-v6-c-table__tr--m-clickable--OutlineOffset | calc(-1 * 0.25rem) | ||
| ||||
.pf-v6-c-table | --pf-v6-c-table__tr--m-clickable--hover--BackgroundColor | (In light theme) #f2f2f2 | ||
| ||||
.pf-v6-c-table | --pf-v6-c-table__tr--m-selected--BackgroundColor | (In light theme) #f2f2f2 | ||
| ||||
.pf-v6-c-table | --pf-v6-c-table__tr--m-selected--OutlineOffset | calc(-1 * 0.25rem) | ||
| ||||
.pf-v6-c-table | --pf-v6-c-table__tbody--m-clickable--BackgroundColor | transparent | ||
.pf-v6-c-table | --pf-v6-c-table__tbody--m-clickable--OutlineOffset | calc(-1 * 0.25rem) | ||
| ||||
.pf-v6-c-table | --pf-v6-c-table__tbody--m-clickable--hover--BackgroundColor | (In light theme) #f2f2f2 | ||
| ||||
.pf-v6-c-table | --pf-v6-c-table__tbody--m-clickable--m-expanded--BackgroundColor | (In light theme) #f2f2f2 | ||
| ||||
.pf-v6-c-table | --pf-v6-c-table__tbody--m-selected--BackgroundColor | (In light theme) #f2f2f2 | ||
| ||||
.pf-v6-c-table | --pf-v6-c-table__tbody--m-selected--OutlineOffset | calc(-1 * 0.25rem) | ||
| ||||
.pf-v6-c-table | --pf-v6-c-table__thead--m-nested-column-header--button--OutlineOffset | -0.1875rem | ||
.pf-v6-c-table | --pf-v6-c-table__thead--m-nested-column-header__tr--PaddingBlockStart | 0.25rem | ||
| ||||
.pf-v6-c-table | --pf-v6-c-table__thead--m-nested-column-header__tr--PaddingBlockEnd | 1rem | ||
| ||||
.pf-v6-c-table | --pf-v6-c-table__subhead--Color | (In light theme) #4d4d4d | ||
| ||||
.pf-v6-c-table | --pf-v6-c-table__nested-column-header__button--PaddingInlineStart | calc(1rem - 0.5rem) | ||
| ||||
.pf-v6-c-table | --pf-v6-c-table__nested-column-header__button--PaddingInlineEnd | calc(1rem - (0.5rem / 2)) | ||
| ||||
.pf-v6-c-table | --pf-v6-c-table--m-striped__tr--BackgroundColor | (In light theme) #f2f2f2 | ||
| ||||
.pf-v6-c-table | --pf-v6-c-table--m-sticky-header--cell--ZIndex | 100 | ||
| ||||
.pf-v6-c-table | --pf-v6-c-table--m-sticky-header--ZIndex | calc(100 + 1) | ||
| ||||
.pf-v6-c-table | --pf-v6-c-table--m-sticky-header--border--ZIndex | calc(100 + 2) | ||
| ||||
.pf-v6-c-table:not(.pf-m-sticky-header) > .pf-m-nested-column-header tr:where(.pf-v6-c-table__tr):not(:last-child) th:where(.pf-v6-c-table__th):not([rowspan]) | --pf-v6-c-table--cell--PaddingBlockEnd | 1rem | ||
| ||||
.pf-v6-c-table.pf-m-striped:not(.pf-m-expandable) > tbody:where(.pf-v6-c-table__tbody) > tr:where(.pf-v6-c-table__tr):nth-child(odd) | --pf-v6-c-table__sticky-column--BackgroundColor | (In light theme) #f2f2f2 | ||
| ||||
.pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td) | --pf-v6-hidden-visible--visible--Display | grid | ||
| ||||
.pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td) | --pf-v6-hidden-visible--hidden--Display | none | ||
.pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td) | --pf-v6-hidden-visible--Display | flex | ||
| ||||
.pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td).pf-m-hidden | --pf-v6-hidden-visible--Display | none | ||
| ||||
.pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td).pf-m-help | --pf-v6-c-table--cell--MinWidth | 11ch | ||
| ||||
.pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td).pf-m-favorite | --pf-v6-c-table__button--Color | (In light theme) #4d4d4d | ||
| ||||
.pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td).pf-m-favorite | --pf-v6-c-table__sort--MinWidth | fit-content | ||
.pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td).pf-m-favorite | --pf-v6-c-table--cell--MaxWidth | fit-content | ||
.pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td).pf-m-favorite | --pf-v6-c-table--cell--Overflow | visible | ||
.pf-v6-c-table thead:where(.pf-v6-c-table__thead) | --pf-v6-c-table--cell--FontSize | 0.75rem | ||
| ||||
.pf-v6-c-table thead:where(.pf-v6-c-table__thead) | --pf-v6-c-table--cell--FontWeight | 500 | ||
| ||||
.pf-v6-c-table thead:where(.pf-v6-c-table__thead) | --pf-v6-c-table--cell--MinWidth | calc(5ch + 0 + 0) | ||
| ||||
.pf-v6-c-table thead:where(.pf-v6-c-table__thead) | --pf-v6-c-table--cell--MaxWidth | 1px | ||
| ||||
.pf-v6-c-table thead:where(.pf-v6-c-table__thead) | --pf-v6-c-table--cell--Overflow | hidden | ||
.pf-v6-c-table thead:where(.pf-v6-c-table__thead) | --pf-v6-c-table--cell--TextOverflow | ellipsis | ||
.pf-v6-c-table thead:where(.pf-v6-c-table__thead) | --pf-v6-c-table--cell--WhiteSpace | nowrap | ||
.pf-v6-c-table thead:where(.pf-v6-c-table__thead).pf-m-nested-column-header tr:where(.pf-v6-c-table__tr):not(:first-child) th:where(.pf-v6-c-table__th):not([rowspan]) | --pf-v6-c-table--cell--PaddingBlockStart | 0.25rem | ||
| ||||
.pf-v6-c-table thead:where(.pf-v6-c-table__thead) .pf-v6-c-table__subhead | --pf-v6-c-table__sort__button__text--Color | (In light theme) #4d4d4d | ||
| ||||
.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody) | --pf-v6-c-table--cell--PaddingBlockStart | 1rem | ||
| ||||
.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody) | --pf-v6-c-table--cell--PaddingBlockEnd | 1rem | ||
| ||||
.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody) | --pf-v6-c-table--cell--FontSize | 0.875rem | ||
| ||||
.pf-v6-c-table.pf-m-no-border-rows > tbody:where(.pf-v6-c-table__tbody) | --pf-v6-c-table__tr--BorderBlockEndWidth | 0 | ||
.pf-v6-c-table.pf-m-no-border-rows > tbody:where(.pf-v6-c-table__tbody) | --pf-v6-c-table__tbody--BorderBlockEndWidth | 0 | ||
.pf-v6-c-table.pf-m-no-border-rows > tbody:where(.pf-v6-c-table__tbody) | --pf-v6-c-table--m-expandable__tbody--BorderBlockEndWidth | 0 | ||
.pf-v6-c-table.pf-m-no-border-rows > tbody:where(.pf-v6-c-table__tbody) | --pf-v6-c-table__control-row--BorderBlockEndWidth | 0 | ||
.pf-v6-c-table tr:where(.pf-v6-c-table__tr).pf-m-clickable:is(:hover, :focus) | --pf-v6-c-table__tr--m-clickable--BackgroundColor | (In light theme) #f2f2f2 | ||
| ||||
.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody).pf-m-clickable:is(:hover, :focus) | --pf-v6-c-table__tbody--m-clickable--BackgroundColor | (In light theme) #f2f2f2 | ||
| ||||
.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody).pf-m-clickable.pf-m-expanded | --pf-v6-c-table__tbody--m-clickable--BackgroundColor | (In light theme) #f2f2f2 | ||
| ||||
.pf-v6-c-table .pf-v6-c-button .pf-v6-c-table__sort-indicator | --pf-v6-c-table__sort-indicator--MarginInlineStart | 0 | ||
[class*=pf-v6-c-table].pf-m-truncate | --pf-v6-c-table--cell--MinWidth | calc(5ch + 0 + 0) | ||
| ||||
[class*=pf-v6-c-table].pf-m-truncate | --pf-v6-c-table--cell--MaxWidth | 1px | ||
| ||||
[class*=pf-v6-c-table].pf-m-truncate | --pf-v6-c-table--cell--Overflow | hidden | ||
[class*=pf-v6-c-table].pf-m-truncate | --pf-v6-c-table--cell--TextOverflow | ellipsis | ||
[class*=pf-v6-c-table].pf-m-truncate | --pf-v6-c-table--cell--WhiteSpace | nowrap | ||
[class*=pf-v6-c-table].pf-m-wrap | --pf-v6-c-table--cell--MinWidth | 0 | ||
[class*=pf-v6-c-table].pf-m-wrap | --pf-v6-c-table--cell--MaxWidth | none | ||
[class*=pf-v6-c-table].pf-m-wrap | --pf-v6-c-table--cell--Overflow | visible | ||
[class*=pf-v6-c-table].pf-m-wrap | --pf-v6-c-table--cell--TextOverflow | clip | ||
[class*=pf-v6-c-table].pf-m-wrap | --pf-v6-c-table--cell--WhiteSpace | normal | ||
[class*=pf-v6-c-table].pf-m-nowrap | --pf-v6-c-table--cell--MinWidth | 0 | ||
[class*=pf-v6-c-table].pf-m-nowrap | --pf-v6-c-table--cell--MaxWidth | none | ||
[class*=pf-v6-c-table].pf-m-nowrap | --pf-v6-c-table--cell--Overflow | visible | ||
[class*=pf-v6-c-table].pf-m-nowrap | --pf-v6-c-table--cell--TextOverflow | clip | ||
[class*=pf-v6-c-table].pf-m-nowrap | --pf-v6-c-table--cell--WhiteSpace | nowrap | ||
[class*=pf-v6-c-table] .pf-v6-c-table__icon | --pf-v6-c-table--cell--MinWidth | fit-content | ||
[class*=pf-v6-c-table] .pf-v6-c-table__icon | --pf-v6-c-table--cell--MaxWidth | none | ||
[class*=pf-v6-c-table] .pf-v6-c-table__icon | --pf-v6-c-table--cell--Width | 1% | ||
[class*=pf-v6-c-table] .pf-v6-c-table__icon | --pf-v6-c-table--cell--Overflow | visible | ||
[class*=pf-v6-c-table] .pf-v6-c-table__icon | --pf-v6-c-table--cell--TextOverflow | clip | ||
[class*=pf-v6-c-table] .pf-v6-c-table__icon | --pf-v6-c-table--cell--WhiteSpace | nowrap | ||
[class*=pf-v6-c-table].pf-m-break-word | --pf-v6-c-table--cell--WordBreak | break-word | ||
[class*=pf-v6-c-table].pf-m-break-word | --pf-v6-c-table--cell--WhiteSpace | normal | ||
.pf-v6-c-table__text.pf-m-truncate | --pf-v6-c-table--cell--MinWidth | 100% | ||
.pf-v6-c-table .pf-v6-c-table__check | --pf-v6-c-table--cell--MinWidth | 0 | ||
.pf-v6-c-table .pf-v6-c-table__check | --pf-v6-c-table--cell--Width | 1% | ||
.pf-v6-c-table .pf-v6-c-table__favorite | --pf-v6-c-table--cell--MaxWidth | auto | ||
.pf-v6-c-table__toggle | --pf-v6-c-table--cell--PaddingBlockStart | 0.5rem | ||
| ||||
.pf-v6-c-table__toggle | --pf-v6-c-table--cell--PaddingBlockEnd | 0.5rem | ||
| ||||
.pf-v6-c-table__toggle | --pf-v6-c-table--cell--PaddingInlineStart | 0.5rem | ||
| ||||
.pf-v6-c-table__toggle | --pf-v6-c-table--cell--PaddingInlineEnd | 0.5rem | ||
| ||||
.pf-v6-c-table__check | --pf-v6-c-table--cell--PaddingInlineStart | 0.5rem | ||
| ||||
.pf-v6-c-table__check | --pf-v6-c-table--cell--PaddingInlineEnd | 0.5rem | ||
| ||||
.pf-v6-c-table__check .pf-v6-c-check | --pf-v6-c-check__label--FontSize | 0.875rem | ||
| ||||
.pf-v6-c-table__check .pf-v6-c-check | --pf-v6-c-check__label--LineHeight | 1.5 | ||
| ||||
.pf-v6-c-table__check .pf-v6-c-radio | --pf-v6-c-radio__label--FontSize | 0.875rem | ||
| ||||
.pf-v6-c-table__check .pf-v6-c-radio | --pf-v6-c-radio__label--LineHeight | 1.5 | ||
| ||||
.pf-v6-c-table__favorite .pf-v6-c-button | --pf-v6-c-button--FontSize | 0.875rem | ||
| ||||
.pf-v6-c-table__favorite.pf-m-favorited .pf-v6-c-button | --pf-v6-c-button--m-plain__icon--Color | (In light theme) #dca614 | ||
| ||||
.pf-v6-c-table__favorite.pf-m-favorited .pf-v6-c-button:is(:hover, :focus) | --pf-v6-c-button--hover__icon--Color | (In light theme) #dca614 | ||
| ||||
.pf-v6-c-table__action | --pf-v6-c-table--cell--PaddingBlockStart | 0.5rem | ||
| ||||
.pf-v6-c-table__action | --pf-v6-c-table--cell--PaddingBlockEnd | 0.5rem | ||
| ||||
.pf-v6-c-table__action | --pf-v6-c-table--cell--PaddingInlineStart | 0.5rem | ||
| ||||
.pf-v6-c-table__action | --pf-v6-c-table--cell--PaddingInlineEnd | 0.5rem | ||
| ||||
.pf-v6-c-table__compound-expansion-toggle | --pf-v6-c-table__button--Color | (In light theme) #0066cc | ||
| ||||
.pf-v6-c-table__compound-expansion-toggle | --pf-v6-c-table__button--hover--Color | (In light theme) #004d99 | ||
| ||||
.pf-v6-c-table__compound-expansion-toggle:hover | --pf-v6-c-table__compound-expansion-toggle__button--BackgroundColor | (In light theme) rgba(199, 199, 199, 0.2500) | ||
| ||||
.pf-v6-c-table__compound-expansion-toggle:hover | --pf-v6-c-table__compound-expansion-toggle__button--after--BorderBlockStartWidth | 2px | ||
| ||||
.pf-v6-c-table__compound-expansion-toggle.pf-m-expanded | --pf-v6-c-table__compound-expansion-toggle__button--BackgroundColor | (In light theme) rgba(199, 199, 199, 0.2500) | ||
| ||||
.pf-v6-c-table__compound-expansion-toggle.pf-m-expanded | --pf-v6-c-table__compound-expansion-toggle__button--after--BorderBlockStartWidth | 2px | ||
| ||||
.pf-v6-c-table__sort .pf-v6-c-table__button:is(:hover, :focus) | --pf-v6-c-table__sort-indicator--Color | (In light theme) #151515 | ||
| ||||
.pf-v6-c-table__sort .pf-v6-c-table__button:is(:hover, :focus) | --pf-v6-c-table__sort__button__text--Color | currentcolor | ||
| ||||
.pf-v6-c-table__sort .pf-v6-c-table__button:is(:hover, :focus) | --pf-v6-c-table__button--BackgroundColor | (In light theme) rgba(199, 199, 199, 0.2500) | ||
| ||||
.pf-v6-c-table__sort.pf-m-selected .pf-v6-c-table__button | --pf-v6-c-table__sort-indicator--Color | (In light theme) #004d99 | ||
| ||||
.pf-v6-c-table__sort.pf-m-help | --pf-v6-c-table__th--m-help--MinWidth | 15ch | ||
| ||||
.pf-v6-c-table.pf-m-compact | --pf-v6-c-table--cell--PaddingBlockStart | 0.5rem | ||
| ||||
.pf-v6-c-table.pf-m-compact | --pf-v6-c-table--cell--PaddingBlockEnd | 0.5rem | ||
| ||||
.pf-v6-c-table.pf-m-compact tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) | --pf-v6-c-table--cell--PaddingBlockStart | 0.5rem | ||
| ||||
.pf-v6-c-table.pf-m-compact tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) | --pf-v6-c-table--cell--PaddingBlockEnd | 0.5rem | ||
| ||||
.pf-v6-c-table.pf-m-compact thead:where(.pf-v6-c-table__thead) th:where(.pf-v6-c-table__th) | --pf-v6-c-table--cell--PaddingBlockStart | calc(0.5rem + 0.25rem) | ||
| ||||
.pf-v6-c-table.pf-m-compact thead:where(.pf-v6-c-table__thead) th:where(.pf-v6-c-table__th) | --pf-v6-c-table--cell--PaddingBlockEnd | 0.5rem | ||
| ||||
.pf-v6-c-table.pf-m-compact .pf-v6-c-table__action | --pf-v6-c-table--cell--PaddingBlockStart | 0.25rem | ||
| ||||
.pf-v6-c-table.pf-m-compact .pf-v6-c-table__action | --pf-v6-c-table--cell--PaddingBlockEnd | 0.25rem | ||
| ||||
.pf-v6-c-table__thead | --pf-v6-c-table__tr--BorderBlockEndWidth | 0 | ||
.pf-v6-c-table__thead | --pf-v6-c-table__toggle--PaddingBlockEnd | 0.25rem | ||
| ||||
.pf-v6-c-table__thead.pf-m-nested-column-header .pf-v6-c-table__button | --pf-v6-c-table__button--PaddingInlineStart | calc(1rem - 0.5rem) | ||
| ||||
.pf-v6-c-table__thead.pf-m-nested-column-header .pf-v6-c-table__button | --pf-v6-c-table__button--PaddingInlineEnd | calc(1rem - (0.5rem / 2)) | ||
| ||||
.pf-v6-c-table .pf-m-width-10 | --pf-v6-c-table--cell--Width | 10% | ||
.pf-v6-c-table .pf-m-width-15 | --pf-v6-c-table--cell--Width | 15% | ||
.pf-v6-c-table .pf-m-width-20 | --pf-v6-c-table--cell--Width | 20% | ||
.pf-v6-c-table .pf-m-width-25 | --pf-v6-c-table--cell--Width | 25% | ||
.pf-v6-c-table .pf-m-width-30 | --pf-v6-c-table--cell--Width | 30% | ||
.pf-v6-c-table .pf-m-width-35 | --pf-v6-c-table--cell--Width | 35% | ||
.pf-v6-c-table .pf-m-width-40 | --pf-v6-c-table--cell--Width | 40% | ||
.pf-v6-c-table .pf-m-width-45 | --pf-v6-c-table--cell--Width | 45% | ||
.pf-v6-c-table .pf-m-width-50 | --pf-v6-c-table--cell--Width | 50% | ||
.pf-v6-c-table .pf-m-width-60 | --pf-v6-c-table--cell--Width | 60% | ||
.pf-v6-c-table .pf-m-width-70 | --pf-v6-c-table--cell--Width | 70% | ||
.pf-v6-c-table .pf-m-width-80 | --pf-v6-c-table--cell--Width | 80% | ||
.pf-v6-c-table .pf-m-width-90 | --pf-v6-c-table--cell--Width | 90% | ||
.pf-v6-c-table .pf-m-width-100 | --pf-v6-c-table--cell--Width | 100% |