Skip to content
PatternFly

Table

A table is used to display large data sets that can be easily laid out 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-v5-c-table
Identifies the element that serves as the grid widget container. Required
aria-label
.pf-v5-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-v5-c-table
<table>
Initiates a table element. Required
.pf-v5-c-table__thead
<tr>
Initiates a table header. Required
.pf-v5-c-table__tbody
<tr>
Initiates a table body. Required
.pf-v5-c-table__tfoot
<tr>
Initiates a table footer.
.pf-v5-c-table__tr
<tr>
Initiates a table row. Required
.pf-v5-c-table__th
<th>
Initiates a table header cell. Required
.pf-v5-c-table__td
<td>
Initiates a table data cell. Required
.pf-v5-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-v5-c-table
Changes tabular layout to responsive, grid based layout at optional breakpoint.
.pf-m-grid
.pf-v5-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-v5-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-v5-c-table__sort
<th>
Initiates a table header sort cell. Required for sortable table columns
.pf-v5-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-v5-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-v5-c-table__sort-indicator
.pf-v5-c-table__sort > .pf-v5-c-table__button > span
Initiates a sort indicator. Required for sortable table columns
.pf-m-selected
.pf-v5-c-table__sort
Modifies for sort selected state. Required for sortable table columns
.pf-m-help
.pf-v5-c-table__sort, .pf-v5-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-v5-c-table__sort > .pf-v5-c-table__button > .pf-v5-c-table__sort-indicator > .fas
Initiates icon within unsorted, sortable table header. Required for sortable table columns
.fa-long-arrow-alt-up
.pf-v5-c-table__sort > .pf-v5-c-table__button > .pf-v5-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-v5-c-table__sort > .pf-v5-c-table__button > .pf-v5-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
Repository 1 10 25
Repository 2 10 25

Overflow menu usage, overflow menu collapsed

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

Overflow menu usage, mobile

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

With checkboxes, radio select, and actions

Checkboxes and actions example

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

Single select radio example

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

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

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

Checkboxes, radio select, and actions accessibility

Attribute
Applied to
Outcome
aria-labelledby="[row_header_id]" or aria-label="[descriptive text]
.pf-v5-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-v5-c-table__check input

Checkboxes, radio select, and actions usage

Class
Applied to
Outcome
.pf-v5-c-table__check
<th>, <td>
Initiates a checkbox or radio input table cell.
.pf-v5-c-table__action
<th>, <td>
Initiates an action table cell.
.pf-v5-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
Node 1
siemur/test-space 		10 25 Link 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Node 2
siemur/test-space 		10 25 Link 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Node 3
siemur/test-space 		10 25 Link 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Node 4
siemur/test-space 		10 25 Link 4
Expandable row content has no padding.

Expandable with set width columns example

Links
Node 1
siemur/test-space 		10 25 Link 1
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.
Node 2
siemur/test-space 		10 25 Link 2
Span three and four
Span five and six
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
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-v5-c-table__expandable-row, wrap the content in .pf-v5-c-table__expandable-row-content. For no padding add .pf-m-no-padding to .pf-v5-c-table__expandable-row > <td>

Expandable accessibility

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

Expandable usage

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

Compound expansion

Compound expansion example

Workspaces Last commit
siemur/test-space 20 minutes Open in Github
Date Status
Item one May 9, 2018 Active
Item two May 9, 2018 Warning
Item three May 9, 2018 Active
Item four May 9, 2018 Active
Item five May 9, 2018 Active
Date Status
Item one May 9, 2018 Active
Item two May 9, 2018 Warning
Item three May 9, 2018 Active
Item four May 9, 2018 Active
Item five May 9, 2018 Active
Date Status
Item one May 9, 2018 Active
Item two May 9, 2018 Warning
Item three May 9, 2018 Active
Item four May 9, 2018 Active
Item five May 9, 2018 Active
siemur/test-space 1 day ago Open in Github
Date Status
Item one May 9, 2018 Active
Item two May 9, 2018 Warning
Item three May 9, 2018 Active
Item four May 9, 2018 Active
Item five May 9, 2018 Active
Date Status
Item one May 9, 2018 Active
Item two May 9, 2018 Warning
Item three May 9, 2018 Active
Item four May 9, 2018 Active
Item five May 9, 2018 Active
Date Status
Item one May 9, 2018 Active
Item two May 9, 2018 Warning
Item three May 9, 2018 Active
Item four May 9, 2018 Active
Item five May 9, 2018 Active
siemur/test-space 2 days ago Open in Github
Date Status
Item one May 9, 2018 Active
Item two May 9, 2018 Warning
Item three May 9, 2018 Active
Item four May 9, 2018 Active
Item five May 9, 2018 Active
Date Status
Item one May 9, 2018 Active
Item two May 9, 2018 Warning
Item three May 9, 2018 Active
Item four May 9, 2018 Active
Item five May 9, 2018 Active
Date Status
Item one May 9, 2018 Active
Item two May 9, 2018 Warning
Item three May 9, 2018 Active
Item four May 9, 2018 Active
Item five May 9, 2018 Active

Compound expansion accessibility

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

Compound expansion usage

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

Compact variant

Compact example

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

Compact expandable example

Repositories Branches Pull requests
Node 1
 10 25 Link
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Node 2
 10 25 Link
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Node 3
 10 25 Link
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Node 4
 10 25 Link
This content has no padding.
Node 5
 10 25 Link
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Node 6
 10 25 Link
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Node 7
 10 25 Link
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Node 8
 10 25 Link
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Node 9
 10 25 Link
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Compact Usage

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

Clickable

Clickable example
Clickable
Clicked
Clickable

Clickable and expandable example
Clickable and not expanded
 10 25 Link 1
Expandable content
Clicked and expanded
10 25 Link 2
Expandable content
Clickable and not expanded
 10 25 Link 3
Expandable content
Clickable and expanded
 10 25 Link 4
Expandable content

Clickable accessibility

Attribute
Applied to
Outcome
tabindex="0"
.pf-v5-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-v5-c-table tbody, .pf-v5-c-table tr
Modifies a tbody or tr table element to be clickable.
.pf-m-selected
.pf-v5-c-table tbody, .pf-v5-c-table tr
Modifies a selectable tbody or tr table element to be selected.

Tree table

Tree table basic

Name Count Size Data Stores
Level 1 all folders
10 25 5
Level 2 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
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
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