Table

A table displays large data sets in a simple grid with column headers.

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

Overflow menu usage, desktop

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

Overflow menu usage, overflow menu collapsed

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

Overflow menu usage, mobile

Repositories Branches Pull requests Actions
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 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
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.
Actions
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 set width columns example

Links Actions
Node 1
siemur/test-space
10 25 Link 1
Actions Actions
Span four 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.
Actions
Node 2
siemur/test-space
10 25 Link 2
Actions Actions
Span three and four
Span five and six
Actions
Node 3
siemur/test-space
10 25 Link 3
Span all 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
Span one, two, and three
Span four and five
Span six and seven

Expandable with nested table example

Links Actions
Node 1
siemur/test-space
10 25 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
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.

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
Date Status Actions
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 Actions
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 Actions
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 Actions
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 Actions
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 Actions
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 Actions
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 Actions
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 Actions
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-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

Repositories Branches Pull requests Links Actions
Node 1
10 25 Link
Actions Actions
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.
Actions
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
Actions Actions
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.
Actions
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-v6-c-table
Modifies for a compact table.

Clickable

Clickable example

Actions
Clickable
Clicked
Clickable

Clickable and expandable example

Actions Links Actions
Clickable and not expanded
10 25 Link 1
Actions Actions
Expandable content
Actions
Clicked and expanded
10 25 Link 2
Actions Actions
Expandable content
Actions
Clickable and not expanded
10 25 Link 3
Actions Actions
Expandable content
Actions
Clickable and expanded
10 25 Link 4
Actions Actions
Expandable content
Actions

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

Tree table with checkboxes

Name Count Size Data Stores Actions
Level 1 all folders
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

Tree table with checkboxes and icons

Name Count Size Data Stores Actions
Level 1 all folders
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

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
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.
Actions
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 Links Actions
siemur/test-space 20 minutes Open in Github
Date Status Actions
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 Actions
Item one May 9, 2018 Active
Item two May 9, 2018 Warning