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