@patternfly/patternfly

--- id: Table section: components cssPrefix: pf-v5-c-table ---import './Table.css' # Examples ## Basic table ### Basic table example ```html <table class="pf-v5-c-table pf-m-grid-md" role="grid" aria-label="This is a simple table example" id="table-basic" > <caption class="pf-v5-c-table__caption">This is the table caption</caption> <thead class="pf-v5-c-table__thead"> <tr class="pf-v5-c-table__tr" role="row"> <th class="pf-v5-c-table__th" role="columnheader" scope="col">Repositories</th> <th class="pf-v5-c-table__th" role="columnheader" scope="col">Branches</th> <th class="pf-v5-c-table__th" role="columnheader" scope="col" >Pull requests</th> <th class="pf-v5-c-table__th" role="columnheader" scope="col">Workspaces</th> <th class="pf-v5-c-table__th" role="columnheader" scope="col">Last commit</th> </tr> </thead> <tbody class="pf-v5-c-table__tbody" role="rowgroup"> <tr class="pf-v5-c-table__tr" role="row"> <td class="pf-v5-c-table__td" role="cell" data-label="Repository name" >Repository 1</td> <td class="pf-v5-c-table__td" role="cell" data-label="Branches">10</td> <td class="pf-v5-c-table__td" role="cell" data-label="Pull requests">25</td> <td class="pf-v5-c-table__td" role="cell" data-label="Workspaces">5</td> <td class="pf-v5-c-table__td" role="cell" data-label="Last commit" >2 days ago</td> </tr> <tr class="pf-v5-c-table__tr" role="row"> <td class="pf-v5-c-table__td" role="cell" data-label="Repository name" >Repository 2</td> <td class="pf-v5-c-table__td" role="cell" data-label="Branches">10</td> <td class="pf-v5-c-table__td" role="cell" data-label="Pull requests">25</td> <td class="pf-v5-c-table__td" role="cell" data-label="Workspaces">5</td> <td class="pf-v5-c-table__td" role="cell" data-label="Last commit" >2 days ago</td> </tr> <tr class="pf-v5-c-table__tr" role="row"> <td class="pf-v5-c-table__td" role="cell" data-label="Repository name" >Repository 3</td> <td class="pf-v5-c-table__td" role="cell" data-label="Branches">10</td> <td class="pf-v5-c-table__td" role="cell" data-label="Pull requests">25</td> <td class="pf-v5-c-table__td" role="cell" data-label="Workspaces">5</td> <td class="pf-v5-c-table__td" role="cell" data-label="Last commit" >2 days ago</td> </tr> <tr class="pf-v5-c-table__tr" role="row"> <td class="pf-v5-c-table__td" role="cell" data-label="Repository name" >Repository 4</td> <td class="pf-v5-c-table__td" role="cell" data-label="Branches">10</td> <td class="pf-v5-c-table__td" role="cell" data-label="Pull requests">25</td> <td class="pf-v5-c-table__td" role="cell" data-label="Workspaces">5</td> <td class="pf-v5-c-table__td" role="cell" data-label="Last commit" >2 days ago</td> </tr> </tbody> </table> ``` ### 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](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). | | `.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 ```html <table class="pf-v5-c-table pf-m-grid-lg" role="grid" aria-label="This is a sortable table example" id="table-sortable" > <thead class="pf-v5-c-table__thead"> <tr class="pf-v5-c-table__tr" role="row"> <th class="pf-v5-c-table__th pf-v5-c-table__sort pf-m-selected" role="columnheader" aria-sort="ascending" scope="col" > <button class="pf-v5-c-table__button"> <div class="pf-v5-c-table__button-content"> <span class="pf-v5-c-table__text">Repositories</span> <span class="pf-v5-c-table__sort-indicator"> <i class="fas fa-long-arrow-alt-up"></i> </span> </div> </button> </th> <th class="pf-v5-c-table__th pf-v5-c-table__sort pf-m-help" role="columnheader" aria-sort="none" scope="col" > <div class="pf-v5-c-table__column-help"> <button class="pf-v5-c-table__button"> <div class="pf-v5-c-table__button-content"> <span class="pf-v5-c-table__text">Branches</span> <span class="pf-v5-c-table__sort-indicator"> <i class="fas fa-arrows-alt-v"></i> </span> </div> </button> <span class="pf-v5-c-table__column-help-action"> <button class="pf-v5-c-button pf-m-plain" type="button" aria-label="More info" > <i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i> </button> </span> </div> </th> <th class="pf-v5-c-table__th pf-v5-c-table__sort" role="columnheader" aria-sort="none" scope="col" > <button class="pf-v5-c-table__button"> <div class="pf-v5-c-table__button-content"> <span class="pf-v5-c-table__text">Pull requests</span> <span class="pf-v5-c-table__sort-indicator"> <i class="fas fa-arrows-alt-v"></i> </span> </div> </button> </th> <th class="pf-v5-c-table__th" role="columnheader" scope="col">Workspaces</th> <th class="pf-v5-c-table__th pf-m-help" role="columnheader" scope="col"> <div class="pf-v5-c-table__column-help"> <span class="pf-v5-c-table__text">Last commit</span> <span class="pf-v5-c-table__column-help-action"> <button class="pf-v5-c-button pf-m-plain" type="button" aria-label="More info" > <i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i> </button> </span> </div> </th> </tr> </thead> <tbody class="pf-v5-c-table__tbody" role="rowgroup"> <tr class="pf-v5-c-table__tr" role="row"> <td class="pf-v5-c-table__td" role="cell" data-label="Repository name" >Repository 1</td> <td class="pf-v5-c-table__td" role="cell" data-label="Branches">10</td> <td class="pf-v5-c-table__td" role="cell" data-label="Pull requests">25</td> <td class="pf-v5-c-table__td" role="cell" data-label="Workspaces">5</td> <td class="pf-v5-c-table__td" role="cell" data-label="Last commit" >2 days ago</td> </tr> <tr class="pf-v5-c-table__tr" role="row"> <td class="pf-v5-c-table__td" role="cell" data-label="Repository name" >Repository 2</td> <td class="pf-v5-c-table__td" role="cell" data-label="Branches">10</td> <td class="pf-v5-c-table__td" role="cell" data-label="Pull requests">25</td> <td class="pf-v5-c-table__td" role="cell" data-label="Workspaces">5</td> <td class="pf-v5-c-table__td" role="cell" data-label="Last commit" >2 days ago</td> </tr> <tr class="pf-v5-c-table__tr" role="row"> <td class="pf-v5-c-table__td" role="cell" data-label="Repository name" >Repository 3</td> <td class="pf-v5-c-table__td" role="cell" data-label="Branches">10</td> <td class="pf-v5-c-table__td" role="cell" data-label="Pull requests">25</td> <td class="pf-v5-c-table__td" role="cell" data-label="Workspaces">5</td> <td class="pf-v5-c-table__td" role="cell" data-label="Last commit" >2 days ago</td> </tr> <tr class="pf-v5-c-table__tr" role="row"> <td class="pf-v5-c-table__td" role="cell" data-label="Repository name" >Repository 4</td> <td class="pf-v5-c-table__td" role="cell" data-label="Branches">10</td> <td class="pf-v5-c-table__td" role="cell" data-label="Pull requests">25</td> <td class="pf-v5-c-table__td" role="cell" data-label="Workspaces">5</td> <td class="pf-v5-c-table__td" role="cell" data-label="Last commit" >2 days ago</td> </tr> </tbody> </table> ``` ### 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 support`display: 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 ```html <table class="pf-v5-c-table" aria-label="This is a simple table example" id="table-with-expanded-overflow-menu" > <thead class="pf-v5-c-table__thead"> <tr class="pf-v5-c-table__tr"> <th class="pf-v5-c-table__th" scope="col">Repositories</th> <th class="pf-v5-c-table__th" scope="col">Branches</th> <th class="pf-v5-c-table__th" scope="col">Pull requests</th> <td class="pf-v5-c-table__td"></td> </tr> </thead> <tbody class="pf-v5-c-table__tbody"> <tr class="pf-v5-c-table__tr"> <td class="pf-v5-c-table__td" role="cell" data-label="Repository name" >Repository 1</td> <td class="pf-v5-c-table__td" role="cell" data-label="Branches">10</td> <td class="pf-v5-c-table__td" role="cell" data-label="Pull requests">25</td> <td class="pf-v5-c-table__td pf-v5-c-table__action" role="cell"> <div class="pf-v5-c-overflow-menu" id="table-with-expanded-overflow-menu-overflow-menu-1" > <div class="pf-v5-c-overflow-menu__content"> <div class="pf-v5-c-overflow-menu__group pf-m-button-group"> <div class="pf-v5-c-overflow-menu__item"> <button class="pf-v5-c-button pf-m-primary" type="button">Start</button> </div> <div class="pf-v5-c-overflow-menu__item"> <button class="pf-v5-c-button pf-m-secondary" type="button">Stop</button> </div> </div> </div> </div> </td> </tr> <tr class="pf-v5-c-table__tr"> <td class="pf-v5-c-table__td" role="cell" data-label="Repository name" >Repository 2</td> <td class="pf-v5-c-table__td" role="cell" data-label="Branches">10</td> <td class="pf-v5-c-table__td" role="cell" data-label="Pull requests">25</td> <td class="pf-v5-c-table__td pf-v5-c-table__action" role="cell"> <div class="pf-v5-c-overflow-menu" id="table-with-expanded-overflow-menu-overflow-menu-2" > <div class="pf-v5-c-overflow-menu__content"> <div class="pf-v5-c-overflow-menu__group pf-m-button-group"> <div class="pf-v5-c-overflow-menu__item"> <button class="pf-v5-c-button pf-m-primary" type="button">Start</button> </div> <div class="pf-v5-c-overflow-menu__item"> <button class="pf-v5-c-button pf-m-secondary" type="button">Stop</button> </div> </div> </div> </div> </td> </tr> </tbody> </table> ``` ### Overflow menu usage, overflow menu collapsed ```html <table class="pf-v5-c-table" role="grid" aria-label="This is a simple table example" id="table-with-overflow-menu-collapsed" > <thead class="pf-v5-c-table__thead"> <tr class="pf-v5-c-table__tr" role="row"> <th class="pf-v5-c-table__th" role="columnheader" scope="col">Repositories</th> <th class="pf-v5-c-table__th" role="columnheader" scope="col">Branches</th> <th class="pf-v5-c-table__th" role="columnheader" scope="col" >Pull requests</th> <td class="pf-v5-c-table__td"></td> </tr> </thead> <tbody class="pf-v5-c-table__tbody" role="rowgroup"> <tr class="pf-v5-c-table__tr" role="row"> <td class="pf-v5-c-table__td" role="cell" data-label="Repository name" >Repository 1</td> <td class="pf-v5-c-table__td" role="cell" data-label="Branches">10</td> <td class="pf-v5-c-table__td" role="cell" data-label="Pull requests">25</td> <td class="pf-v5-c-table__td pf-v5-c-table__action" role="cell"> <div class="pf-v5-c-overflow-menu" id="table-with-overflow-menu-collapsed-overflow-menu-1" > <div class="pf-v5-c-overflow-menu__control"> <div class="pf-v5-c-dropdown pf-m-expanded"> <button class="pf-v5-c-button pf-v5-c-dropdown__toggle pf-m-plain" type="button" id="table-with-overflow-menu-collapsed-overflow-menu-1-dropdown-toggle" aria-label="Generic options" aria-expanded="true" > <i class="fas fa-ellipsis-v" aria-hidden="true"></i> </button> <ul class="pf-v5-c-dropdown__menu pf-m-align-right" role="menu" aria-labelledby="table-with-overflow-menu-collapsed-overflow-menu-1-dropdown-toggle" > <li role="none"> <button role="menuitem" class="pf-v5-c-dropdown__menu-item" >Start</button> </li> <li role="none"> <button role="menuitem" class="pf-v5-c-dropdown__menu-item" >Stop</button> </li> </ul> </div> </div> </div> </td> </tr> <tr class="pf-v5-c-table__tr" role="row"> <td class="pf-v5-c-table__td" role="cell" data-label="Repository name" >Repository 2</td> <td class="pf-v5-c-table__td" role="cell" data-label="Branches">10</td> <td class="pf-v5-c-table__td" role="cell" data-label="Pull requests">25</td> <td class="pf-v5-c-table__td pf-v5-c-table__action" role="cell"> <div class="pf-v5-c-overflow-menu" id="table-with-overflow-menu-collapsed-overflow-menu-2" > <div class="pf-v5-c-overflow-menu__control"> <div class="pf-v5-c-dropdown"> <button class="pf-v5-c-button pf-v5-c-dropdown__toggle pf-m-plain" type="button" id="table-with-overflow-menu-collapsed-overflow-menu-2-dropdown-toggle" aria-label="Generic options" aria-expanded="true" > <i class="fas fa-ellipsis-v" aria-hidden="true"></i> </button> <ul class="pf-v5-c-dropdown__menu pf-m-align-right" role="menu" aria-labelledby="table-with-overflow-menu-collapsed-overflow-menu-2-dropdown-toggle" hidden > <li role="none"> <button role="menuitem" class="pf-v5-c-dropdown__menu-item" >Start</button> </li> <li role="none"> <button role="menuitem" class="pf-v5-c-dropdown__menu-item" >Stop</button> </li> </ul> </div> </div> </div> </td> </tr> </tbody> </table> ``` ### Overflow menu usage, mobile ```html <table class="pf-v5-c-table pf-m-grid" role="grid" aria-label="This is a simple table example" id="table-with-overflow-menu-collapsed-mobile" > <thead class="pf-v5-c-table__thead"> <tr class="pf-v5-c-table__tr" role="row"> <th class="pf-v5-c-table__th" role="columnheader" scope="col">Repositories</th> <th class="pf-v5-c-table__th" role="columnheader" scope="col">Branches</th> <th class="pf-v5-c-table__th" role="columnheader" scope="col" >Pull requests</th> <td class="pf-v5-c-table__td"></td> </tr> </thead> <tbody class="pf-v5-c-table__tbody" role="rowgroup"> <tr class="pf-v5-c-table__tr" role="row"> <td class="pf-v5-c-table__td" role="cell" data-label="Repository name" >Repository 1</td> <td class="pf-v5-c-table__td" role="cell" data-label="Branches">10</td> <td class="pf-v5-c-table__td" role="cell" data-label="Pull requests">25</td> <td class="pf-v5-c-table__td pf-v5-c-table__action" role="cell"> <div class="pf-v5-c-overflow-menu" id="table-with-overflow-menu-collapsed-mobile-overflow-menu-1" > <div class="pf-v5-c-overflow-menu__control"> <div class="pf-v5-c-dropdown pf-m-expanded"> <button class="pf-v5-c-button pf-v5-c-dropdown__toggle pf-m-plain" type="button" id="table-with-overflow-menu-collapsed-mobile-overflow-menu-1-dropdown-toggle" aria-label="Generic options" aria-expanded="true" > <i class="fas fa-ellipsis-v" aria-hidden="true"></i> </button> <ul class="pf-v5-c-dropdown__menu pf-m-align-right" role="menu" aria-labelledby="table-with-overflow-menu-collapsed-mobile-overflow-menu-1-dropdown-toggle" > <li role="none"> <button role="menuitem" class="pf-v5-c-dropdown__menu-item" >Start</button> </li> <li role="none"> <button role="menuitem" class="pf-v5-c-dropdown__menu-item" >Stop</button> </li> </ul> </div> </div> </div> </td> </tr> <tr class="pf-v5-c-table__tr" role="row"> <td class="pf-v5-c-table__td" role="cell" data-label="Repository name" >Repository 2</td> <td class="pf-v5-c-table__td" role="cell" data-label="Branches">10</td> <td class="pf-v5-c-table__td" role="cell" data-label="Pull requests">25</td> <td class="pf-v5-c-table__td pf-v5-c-table__action" role="cell"> <div class="pf-v5-c-overflow-menu" id="table-with-overflow-menu-collapsed-mobile-overflow-menu-2" > <div class="pf-v5-c-overflow-menu__control"> <div class="pf-v5-c-dropdown"> <button class="pf-v5-c-button pf-v5-c-dropdown__toggle pf-m-plain" type="button" id="table-with-overflow-menu-collapsed-mobile-overflow-menu-2-dropdown-toggle" aria-label="Generic options" aria-expanded="true" > <i class="fas fa-ellipsis-v" aria-hidden="true"></i> </button> <ul class="pf-v5-c-dropdown__menu pf-m-align-right" role="menu" aria-labelledby="table-with-overflow-menu-collapsed-mobile-overflow-menu-2-dropdown-toggle" hidden > <li role="none"> <button role="menuitem" class="pf-v5-c-dropdown__menu-item" >Start</button> </li> <li role="none"> <button role="menuitem" class="pf-v5-c-dropdown__menu-item" >Stop</button> </li> </ul> </div> </div> </div> </td> </tr> </tbody> </table> ``` ## With checkboxes, radio select, and actions ### Checkboxes and actions example ```html <table class="pf-v5-c-table pf-m-grid-lg" role="grid" aria-label="This is a table with checkboxes" id="table-checkboxes-and-actions" > <thead class="pf-v5-c-table__thead"> <tr class="pf-v5-c-table__tr" role="row"> <td class="pf-v5-c-table__td pf-v5-c-table__check" role="cell"> <label> <div class="pf-v5-c-check pf-m-standalone"> <input class="pf-v5-c-check__input" type="checkbox" name="table-checkboxes-and-actions-checkrowthead" aria-label="Select all rows" /> </div> </label> </td> <th class="pf-v5-c-table__th" role="columnheader" scope="col">Repositories</th> <th class="pf-v5-c-table__th" role="columnheader" scope="col">Branches</th> <th class="pf-v5-c-table__th" role="columnheader" scope="col" >Pull requests</th> <th class="pf-v5-c-table__th" role="columnheader" scope="col">Workspaces</th> <th class="pf-v5-c-table__th" role="columnheader" scope="col">Last commit</th> <td class="pf-v5-c-table__td"></td> </tr> </thead> <tbody class="pf-v5-c-table__tbody" role="rowgroup"> <tr class="pf-v5-c-table__tr" role="row"> <td class="pf-v5-c-table__td pf-v5-c-table__check" role="cell"> <label> <div class="pf-v5-c-check pf-m-standalone"> <input class="pf-v5-c-check__input" type="checkbox" name="table-checkboxes-and-actions-checkrow1" aria-labelledby="table-checkboxes-and-actions-node1" /> </div> </label> </td> <th class="pf-v5-c-table__th" role="columnheader" data-label="Data label name" > <div id="table-checkboxes-and-actions-node1">Node 1</div> </th> <td class="pf-v5-c-table__td" role="cell" data-label="Branches">10</td> <td class="pf-v5-c-table__td" role="cell" data-label="Pull requests">25</td> <td class="pf-v5-c-table__td" role="cell" data-label="Workspaces">5</td> <td class="pf-v5-c-table__td" role="cell" data-label="Last commit" >2 days ago</td> <td class="pf-v5-c-table__td pf-v5-c-table__action" role="cell"> <div class="pf-v5-c-dropdown"> <button class="pf-v5-c-dropdown__toggle pf-m-plain" id="table-checkboxes-and-actions-dropdown-kebab-1-button" aria-expanded="false" type="button" aria-label="Actions" > <i class="fas fa-ellipsis-v" aria-hidden="true"></i> </button> <ul class="pf-v5-c-dropdown__menu pf-m-align-right" aria-labelledby="table-checkboxes-and-actions-dropdown-kebab-1-button" hidden role="menu" > <li role="none"> <a class="pf-v5-c-dropdown__menu-item" role="menuitem" href="#" >Link</a> </li> <li role="none"> <button class="pf-v5-c-dropdown__menu-item" role="menuitem" type="button" >Action</button> </li> <li role="none"> <a class="pf-v5-c-dropdown__menu-item pf-m-disabled" role="menuitem" href="#" aria-disabled="true" tabindex="-1" >Disabled link</a> </li> <li role="none"> <button class="pf-v5-c-dropdown__menu-item" role="menuitem" type="button" disabled >Disabled action</button> </li> <li class="pf-v5-c-divider" role="separator"></li> <li role="none"> <a class="pf-v5-c-dropdown__menu-item" role="menuitem" href="#" >Separated link</a> </li> </ul> </div> </td> </tr> <tr class="pf-v5-c-table__tr" role="row"> <td class="pf-v5-c-table__td pf-v5-c-table__check" role="cell"> <label> <div class="pf-v5-c-check pf-m-standalone"> <input class="pf-v5-c-check__input" type="checkbox" name="table-checkboxes-and-actions-checkrow2" aria-labelledby="table-checkboxes-and-actions-node2" /> </div> </label> </td> <th class="pf-v5-c-table__th" role="columnheader" data-label="Data label name" > <div id="table-checkboxes-and-actions-node2">Node 2</div> <a href="#">siemur/test-space</a> </th> <td class="pf-v5-c-table__td" role="cell" data-label="Branches">10</td> <td class="pf-v5-c-table__td" role="cell" data-label="Pull requests">25</td> <td class="pf-v5-c-table__td" role="cell" data-label="Workspaces">5</td> <td class="pf-v5-c-table__td" role="cell" data-label="Last commit" >2 days ago</td> <td class="pf-v5-c-table__td pf-v5-c-table__action" role="cell"> <div class="pf-v5-c-dropdown"> <button class="pf-v5-c-dropdown__toggle pf-m-plain" id="table-checkboxes-and-actions-dropdown-kebab-2-button" aria-expanded="false" type="button" aria-label="Actions" > <i class="fas fa-ellipsis-v" aria-hidden="true"></i> </button> <ul class="pf-v5-c-dropdown__menu pf-m-align-right" aria-labelledby="table-checkboxes-and-actions-dropdown-kebab-2-button" hidden role="menu" > <li role="none"> <a class="pf-v5-c-dropdown__menu-item" role="menuitem" href="#" >Link</a> </li> <li role="none"> <button class="pf-v5-c-dropdown__menu-item" role="menuitem" type="button" >Action</button> </li> <li role="none"> <a class="pf-v5-c-dropdown__menu-item pf-m-disabled" role="menuitem" href="#" aria-disabled="true" tabindex="-1" >Disabled link</a> </li> <li role="none"> <button class="pf-v5-c-dropdown__menu-item" role="menuitem" type="button" disabled >Disabled action</button> </li> <li class="pf-v5-c-divider" role="separator"></li> <li role="none"> <a class="pf-v5-c-dropdown__menu-item" role="menuitem" href="#" >Separated link</a> </li> </ul> </div> </td> </tr> <tr class="pf-v5-c-table__tr" role="row"> <td class="pf-v5-c-table__td pf-v5-c-table__check" role="cell"> <label> <div class="pf-v5-c-check pf-m-standalone"> <input class="pf-v5-c-check__input" type="checkbox" name="table-checkboxes-and-actions-checkrow3" aria-labelledby="table-checkboxes-and-actions-node3" /> </div> </label> </td> <th class="pf-v5-c-table__th" role="columnheader" data-label="Data label name" > <div id="table-checkboxes-and-actions-node3">Node 3</div> <a href="#">siemur/test-space</a> </th> <td class="pf-v5-c-table__td" role="cell" data-label="Branches">10</td> <td class="pf-v5-c-table__td" role="cell" data-label="Pull requests">25</td> <td class="pf-v5-c-table__td" role="cell" data-label="Workspaces">5</td> <td class="pf-v5-c-table__td" role="cell" data-label="Last commit" >2 days ago</td> <td class="pf-v5-c-table__td pf-v5-c-table__action" role="cell"> <div class="pf-v5-c-dropdown"> <button class="pf-v5-c-dropdown__toggle pf-m-plain" id="table-checkboxes-and-actions-dropdown-kebab-3-button" aria-expanded="false" type="button" aria-label="Actions" > <i class="fas fa-ellipsis-v" aria-hidden="true"></i> </button> <ul class="pf-v5-c-dropdown__menu pf-m-align-right" aria-labelledby="table-checkboxes-and-actions-dropdown-kebab-3-button" hidden role="menu" > <li role="none"> <a class="pf-v5-c-dropdown__menu-item" role="menuitem" href="#" >Link</a> </li> <li role="none"> <button class="pf-v5-c-dropdown__menu-item" role="menuitem" type="button" >Action</button> </li> <li role="none"> <a class="pf-v5-c-dropdown__menu-item pf-m-disabled" role="menuitem" href="#" aria-disabled="true" tabindex="-1" >Disabled link</a> </li> <li role="none"> <button class="pf-v5-c-dropdown__menu-item" role="menuitem" type="button" disabled >Disabled action</button> </li> <li class="pf-v5-c-divider" role="separator"></li> <li role="none"> <a class="pf-v5-c-dropdown__menu-item" role="menuitem" href="#" >Separated link</a> </li> </ul> </div> </td> </tr> <tr class="pf-v5-c-table__tr" role="row"> <td class="pf-v5-c-table__td pf-v5-c-table__check" role="cell"> <label> <div class="pf-v5-c-check pf-m-standalone"> <input class="pf-v5-c-check__input" type="checkbox" name="table-checkboxes-and-actions-checkrow4" aria-labelledby="table-checkboxes-and-actions-node4" /> </div> </label> </td> <th class="pf-v5-c-table__th" role="columnheader" data-label="Data label name" > <div id="table-checkboxes-and-actions-node4">Node 4</div> <a href="#">siemur/test-space</a> </th> <td class="pf-v5-c-table__td" role="cell" data-label="Branches">10</td> <td class="pf-v5-c-table__td" role="cell" data-label="Pull requests">25</td> <td class="pf-v5-c-table__td" role="cell" data-label="Workspaces">5</td> <td class="pf-v5-c-table__td" role="cell" data-label="Last commit" >2 days ago</td> <td class="pf-v5-c-table__td pf-v5-c-table__action" role="cell"> <div class="pf-v5-c-dropdown"> <button class="pf-v5-c-dropdown__toggle pf-m-plain" id="table-checkboxes-and-actions-dropdown-kebab-4-button" aria-expanded="false" type="button" aria-label="Actions" > <i class="fas fa-ellipsis-v" aria-hidden="true"></i> </button> <ul class="pf-v5-c-dropdown__menu pf-m-align-right" aria-labelledby="table-checkboxes-and-actions-dropdown-kebab-4-button" hidden role="menu" > <li role="none"> <a class="pf-v5-c-dropdown__menu-item" role="menuitem" href="#" >Link</a> </li> <li role="none"> <button class="pf-v5-c-dropdown__menu-item" role="menuitem" type="button" >Action</button> </li> <li role="none"> <a class="pf-v5-c-dropdown__menu-item pf-m-disabled" role="menuitem" href="#" aria-disabled="true" tabindex="-1" >Disabled link</a> </li> <li role="none"> <button class="pf-v5-c-dropdown__menu-item" role="menuitem" type="button" disabled >Disabled action</button> </li> <li class="pf-v5-c-divider" role="separator"></li> <li role="none"> <a class="pf-v5-c-dropdown__menu-item" role="menuitem" href="#" >Separated link</a> </li> </ul> </div> </td> </tr> </tbody> </table> ``` ### Single select radio example ```html <table class="pf-v5-c-table pf-m-grid-lg" role="grid" aria-label="This is single select table with radio inputs" id="table-single-select-radio" > <thead class="pf-v5-c-table__thead"> <tr class="pf-v5-c-table__tr" role="row"> <td class="pf-v5-c-table__td"></td> <th class="pf-v5-c-table__th" role="columnheader" scope="col">Repositories</th> <th class="pf-v5-c-table__th" role="columnheader" scope="col">Branches</th> <th class="pf-v5-c-table__th" role="columnheader" scope="col" >Pull requests</th> <th class="pf-v5-c-table__th" role="columnheader" scope="col">Workspaces</th> <th class="pf-v5-c-table__th" role="columnheader" scope="col">Last commit</th> <td class="pf-v5-c-table__td"></td> </tr> </thead> <tbody class="pf-v5-c-table__tbody" role="rowgroup"> <tr class="pf-v5-c-table__tr" role="row"> <td class="pf-v5-c-table__td pf-v5-c-table__check" role="cell"> <label> <div class="pf-v5-c-radio pf-m-standalone"> <input class="pf-v5-c-radio__input" type="radio" name="table-single-select-radio-radio" aria-labelledby="table-single-select-radio-node1" /> </div> </label> </td> <th class="pf-v5-c-table__th" role="columnheader" data-label="Data label name" > <div id="table-single-select-radio-node1">Node 1</div> </th> <td class="pf-v5-c-table__td" role="cell" data-label="Branches">10</td> <td class="pf-v5-c-table__td" role="cell" data-label="Pull requests">25</td> <td class="pf-v5-c-table__td" role="cell" data-label="Workspaces">5</td> <td class="pf-v5-c-table__td" role="cell" data-label="Last commit" >2 days ago</td> <td class="pf-v5-c-table__td pf-v5-c-table__action" role="cell"> <div class="pf-v5-c-dropdown"> <button class="pf-v5-c-dropdown__toggle pf-m-plain" id="table-single-select-radio-dropdown-kebab-1-button" aria-expanded="false" type="button" aria-label="Actions" > <i class="fas fa-ellipsis-v" aria-hidden="true"></i> </button> <ul class="pf-v5-c-dropdown__menu pf-m-align-right" aria-labelledby="table-single-select-radio-dropdown-kebab-1-button" hidden role="menu" > <li role="none"> <a class="pf-v5-c-dropdown__menu-item" role="menuitem" href="#" >Link</a> </li> <li role="none"> <button class="pf-v5-c-dropdown__menu-item" role="menuitem" type="button" >Action</button> </li> <li role="none"> <a class="pf-v5-c-dropdown__menu-item pf-m-disabled" role="menuitem" href="#" aria-disabled="true" tabindex="-1" >Disabled link</a> </li> <li role="none"> <button class="pf-v5-c-dropdown__menu-item" role="menuitem" type="button" disabled >Disabled action</button> </li> <li class="pf-v5-c-divider" role="separator"></li> <li role="none"> <a class="pf-v5-c-dropdown__menu-item" role="menuitem" href="#" >Separated link</a> </li> </ul> </div> </td> </tr> <tr class="pf-v5-c-table__tr" role="row"> <td class="pf-v5-c-table__td pf-v5-c-table__check" role="cell"> <label> <div class="pf-v5-c-radio pf-m-standalone"> <input class="pf-v5-c-radio__input" type="radio" name="table-single-select-radio-radio" aria-labelledby="table-single-select-radio-node2" /> </div> </label> </td> <th class="pf-v5-c-table__th" role="columnheader" data-label="Data label name" > <div id="table-single-select-radio-node2">Node 2</div> <a href="#">siemur/test-space</a> </th> <td class="pf-v5-c-table__td" role="cell" data-label="Branches">10</td> <td class="pf-v5-c-table__td" role="cell" data-label="Pull requests">25</td> <td class="pf-v5-c-table__td" role="cell" data-label="Workspaces">5</td> <td class="pf-v5-c-table__td" role="cell" data-label="Last commit" >2 days ago</td> <td class="pf-v5-c-table__td pf-v5-c-table__action" role="cell"> <div class="pf-v5-c-dropdown"> <button class="pf-v5-c-dropdown__toggle pf-m-plain" id="table-single-select-radio-dropdown-kebab-2-button" aria-expanded="false" type="button" aria-label="Actions" > <i class="fas fa-ellipsis-v" aria-hidden="true"></i> </button> <ul class="pf-v5-c-dropdown__menu pf-m-align-right" aria-labelledby="table-single-select-radio-dropdown-kebab-2-button" hidden role="menu" > <li role="none"> <a class="pf-v5-c-dropdown__menu-item" role="menuitem" href="#" >Link</a> </li> <li role="none"> <button class="pf-v5-c-dropdown__menu-item" role="menuitem" type="button" >Action</button> </li> <li role="none"> <a class="pf-v5-c-dropdown__menu-item pf-m-disabled" role="menuitem" href="#" aria-disabled="true" tabindex="-1" >Disabled link</a> </li> <li role="none"> <button class="pf-v5-c-dropdown__menu-item" role="menuitem" type="button" disabled >Disabled action</button> </li> <li class="pf-v5-c-divider" role="separator"></li> <li role="none"> <a class="pf-v5-c-dropdown__menu-item" role="menuitem" href="#" >Separated link</a> </li> </ul> </div> </td> </tr> <tr class="pf-v5-c-table__tr" role="row"> <td class="pf-v5-c-table__td pf-v5-c-table__check" role="cell"> <label> <div class="pf-v5-c-radio pf-m-standalone"> <input class="pf-v5-c-radio__input" type="radio" name="table-single-select-radio-radio" aria-labelledby="table-single-select-radio-node3" /> </div> </label> </td> <th class="pf-v5-c-table__th" role="columnheader" data-label="Data label name" > <div id="table-single-select-radio-node3">Node 3</div> <a href="#">siemur/test-space</a> </th> <td class="pf-v5-c-table__td" role="cell" data-label="Branches">10</td> <td class="pf-v5-c-table__td" role="cell" data-label="Pull requests">25</td> <td class="pf-v5-c-table__td" role="cell" data-label="Workspaces">5</td> <td class="pf-v5-c-table__td" role="cell" data-label="Last commit" >2 days ago</td> <td class="pf-v5-c-table__td pf-v5-c-table__action" role="cell"> <div class="pf-v5-c-dropdown"> <button class="pf-v5-c-dropdown__toggle pf-m-plain" id="table-single-select-radio-dropdown-kebab-3-button" aria-expanded="false" type="button" aria-label="Actions" > <i class="fas fa-ellipsis-v" aria-hidden="true"></i> </button> <ul class="pf-v5-c-dropdown__menu pf-m-align-right" aria-labelledby="table-single-select-radio-dropdown-kebab-3-button" hidden role="menu" > <li role="none"> <a class="pf-v5-c-dropdown__menu-item" role="menuitem" href="#" >Link</a> </li> <li role="none"> <button class="pf-v5-c-dropdown__menu-item" role="menuitem" type="button" >Action</button> </li> <li role="none"> <a class="pf-v5-c-dropdown__menu-item pf-m-disabled" role="menuitem" href="#" aria-disabled="true" tabindex="-1" >Disabled link</a> </li> <li role="none"> <button class="pf-v5-c-dropdown__menu-item" role="menuitem" type="button" disabled >Disabled action</button> </li> <li class="pf-v5-c-divider" role="separator"></li> <li role="none"> <a class="pf-v5-c-dropdown__menu-item" role="menuitem" href="#" >Separated link</a> </li> </ul> </div> </td> </tr> <tr class="pf-v5-c-table__tr" role="row"> <td class="pf-v5-c-table__td pf-v5-c-table__check" role="cell"> <label> <div class="pf-v5-c-radio pf-m-standalone"> <input class="pf-v5-c-radio__input" type="radio" name="table-single-select-radio-radio" aria-labelledby="table-single-select-radio-node4" /> </div> </label> </td> <th class="pf-v5-c-table__th" role="columnheader" data-label="Data label name" > <div id="table-single-select-radio-node4">Node 4</div> <a href="#">siemur/test-space</a> </th> <td class="pf-v5-c-table__td" role="cell" data-label="Branches">10</td> <td class="pf-v5-c-table__td" role="cell" data-label="Pull requests">25</td> <td class="pf-v5-c-table__td" role="cell" data-label="Workspaces">5</td> <td class="pf-v5-c-table__td" role="cell" data-label="Last commit" >2 days ago</td> <td class="pf-v5-c-table__td pf-v5-c-table__action" role="cell"> <div class="pf-v5-c-dropdown"> <button class="pf-v5-c-dropdown__toggle pf-m-plain" id="table-single-select-radio-dropdown-kebab-4-button" aria-expanded="false" type="button" aria-label="Actions" > <i class="fas fa-ellipsis-v" aria-hidden="true"></i> </button> <ul class="pf-v5-c-dropdown__menu pf-m-align-right" aria-labelledby="table-single-select-radio-dropdown-kebab-4-button" hidden role="menu" > <li role="none"> <a class="pf-v5-c-dropdown__menu-item" role="menuitem" href="#" >Link</a> </li> <li role="none"> <button class="pf-v5-c-dropdown__menu-item" role="menuitem" type="button" >Action</button> </li> <li role="none"> <a class="pf-v5-c-dropdown__menu-item pf-m-disabled" role="menuitem" href="#" aria-disabled="true" tabindex="-1" >Disabled link</a> </li> <li role="none"> <button class="pf-v5-c-dropdown__menu-item" role="menuitem" type="button" disabled >Disabled action</button> </li> <li class="pf-v5-c-divider" role="separator"></li> <li role="none"> <a class="pf-v5-c-dropdown__menu-item" role="menuitem" href="#" >Separated link</a> </li> </ul> </div> </td> </tr> </tbody> </table> ``` 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 ac