@patternfly/patternfly

--- id: Table section: components cssPrefix: pf-v6-c-table ---import './Table.css' # Examples ## Basic table ### Basic table example ```html <table class="pf-v6-c-table pf-m-grid-md" role="grid" aria-label="This is a simple table example" id="table-basic" > <caption class="pf-v6-c-table__caption">This is the table caption</caption> <thead class="pf-v6-c-table__thead"> <tr class="pf-v6-c-table__tr" role="row"> <th class="pf-v6-c-table__th" role="columnheader" scope="col">Repositories</th> <th class="pf-v6-c-table__th" role="columnheader" scope="col">Branches</th> <th class="pf-v6-c-table__th" role="columnheader" scope="col" >Pull requests</th> <th class="pf-v6-c-table__th" role="columnheader" scope="col">Workspaces</th> <th class="pf-v6-c-table__th" role="columnheader" scope="col">Last commit</th> </tr> </thead> <tbody class="pf-v6-c-table__tbody" role="rowgroup"> <tr class="pf-v6-c-table__tr" role="row"> <td class="pf-v6-c-table__td" role="cell" data-label="Repository name" >Repository 1</td> <td class="pf-v6-c-table__td" role="cell" data-label="Branches">10</td> <td class="pf-v6-c-table__td" role="cell" data-label="Pull requests">25</td> <td class="pf-v6-c-table__td" role="cell" data-label="Workspaces">5</td> <td class="pf-v6-c-table__td" role="cell" data-label="Last commit" >2 days ago</td> </tr> <tr class="pf-v6-c-table__tr" role="row"> <td class="pf-v6-c-table__td" role="cell" data-label="Repository name" >Repository 2</td> <td class="pf-v6-c-table__td" role="cell" data-label="Branches">10</td> <td class="pf-v6-c-table__td" role="cell" data-label="Pull requests">25</td> <td class="pf-v6-c-table__td" role="cell" data-label="Workspaces">5</td> <td class="pf-v6-c-table__td" role="cell" data-label="Last commit" >2 days ago</td> </tr> <tr class="pf-v6-c-table__tr" role="row"> <td class="pf-v6-c-table__td" role="cell" data-label="Repository name" >Repository 3</td> <td class="pf-v6-c-table__td" role="cell" data-label="Branches">10</td> <td class="pf-v6-c-table__td" role="cell" data-label="Pull requests">25</td> <td class="pf-v6-c-table__td" role="cell" data-label="Workspaces">5</td> <td class="pf-v6-c-table__td" role="cell" data-label="Last commit" >2 days ago</td> </tr> <tr class="pf-v6-c-table__tr" role="row"> <td class="pf-v6-c-table__td" role="cell" data-label="Repository name" >Repository 4</td> <td class="pf-v6-c-table__td" role="cell" data-label="Branches">10</td> <td class="pf-v6-c-table__td" role="cell" data-label="Pull requests">25</td> <td class="pf-v6-c-table__td" role="cell" data-label="Workspaces">5</td> <td class="pf-v6-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-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](/tokens/all-patternfly-tokens). | | `.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 ```html <table class="pf-v6-c-table pf-m-grid-lg" role="grid" aria-label="This is a sortable table example" id="table-sortable" > <thead class="pf-v6-c-table__thead"> <tr class="pf-v6-c-table__tr" role="row"> <th class="pf-v6-c-table__th pf-v6-c-table__sort pf-m-selected" role="columnheader" aria-sort="ascending" scope="col" > <button class="pf-v6-c-table__button"> <span class="pf-v6-c-table__button-content"> <span class="pf-v6-c-table__text">Repositories</span> <span class="pf-v6-c-table__sort-indicator"> <i class="fas fa-long-arrow-alt-up"></i> </span> </span> </button> </th> <th class="pf-v6-c-table__th pf-v6-c-table__sort pf-m-help" role="columnheader" aria-sort="none" scope="col" > <div class="pf-v6-c-table__column-help"> <button class="pf-v6-c-table__button"> <span class="pf-v6-c-table__button-content"> <span class="pf-v6-c-table__text">Branches</span> <span class="pf-v6-c-table__sort-indicator"> <i class="fas fa-arrows-alt-v"></i> </span> </span> </button> <span class="pf-v6-c-table__column-help-action"> <button class="pf-v6-c-button pf-m-no-padding pf-m-plain" type="button" aria-label="aria-label="More info"" > <span class="pf-v6-c-button__icon"> <svg class="pf-v6-svg" viewBox="0 0 1024 1024" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em" > <path d="M521.3,576 C627.5,576 713.7,502 713.7,413.7 C713.7,325.4 627.6,253.6 521.3,253.6 C366,253.6 334.5,337.7 329.2,407.2 C329.2,414.3 335.2,416 343.5,416 L445,416 C450.5,416 458,415.5 460.8,406.5 C460.8,362.6 582.9,357.1 582.9,413.6 C582.9,441.9 556.2,470.9 521.3,473 C486.4,475.1 447.3,479.8 447.3,521.7 L447.3,553.8 C447.3,570.8 456.1,576 472,576 C487.9,576 521.3,576 521.3,576 M575.3,751.3 L575.3,655.3 C575.313862,651.055109 573.620137,646.982962 570.6,644 C567.638831,640.947672 563.552355,639.247987 559.3,639.29884 L463.3,639.29884 C459.055109,639.286138 454.982962,640.979863 452,644 C448.947672,646.961169 447.247987,651.047645 447.29884,655.3 L447.29884,751.3 C447.286138,755.544891 448.979863,759.617038 452,762.6 C454.961169,765.652328 459.047645,767.352013 463.3,767.30116 L559.3,767.30116 C563.544891,767.313862 567.617038,765.620137 570.6,762.6 C573.659349,759.643612 575.360354,755.553963 575.3,751.3 M512,896 C300.2,896 128,723.9 128,512 C128,300.3 300.2,128 512,128 C723.8,128 896,300.2 896,512 C896,723.8 723.7,896 512,896 M512.1,0 C229.7,0 0,229.8 0,512 C0,794.2 229.8,1024 512.1,1024 C794.4,1024 1024,794.3 1024,512 C1024,229.7 794.4,0 512.1,0" /> </svg> </span> </button> </span> </div> </th> <th class="pf-v6-c-table__th pf-v6-c-table__sort" role="columnheader" aria-sort="none" scope="col" > <button class="pf-v6-c-table__button"> <span class="pf-v6-c-table__button-content"> <span class="pf-v6-c-table__text">Pull requests</span> <span class="pf-v6-c-table__sort-indicator"> <i class="fas fa-arrows-alt-v"></i> </span> </span> </button> </th> <th class="pf-v6-c-table__th" role="columnheader" scope="col">Workspaces</th> <th class="pf-v6-c-table__th pf-m-help" role="columnheader" scope="col"> <div class="pf-v6-c-table__column-help"> <span class="pf-v6-c-table__text">Last commit</span> <span class="pf-v6-c-table__column-help-action"> <button class="pf-v6-c-button pf-m-no-padding pf-m-plain" type="button" aria-label="aria-label="More info"" > <span class="pf-v6-c-button__icon"> <svg class="pf-v6-svg" viewBox="0 0 1024 1024" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em" > <path d="M521.3,576 C627.5,576 713.7,502 713.7,413.7 C713.7,325.4 627.6,253.6 521.3,253.6 C366,253.6 334.5,337.7 329.2,407.2 C329.2,414.3 335.2,416 343.5,416 L445,416 C450.5,416 458,415.5 460.8,406.5 C460.8,362.6 582.9,357.1 582.9,413.6 C582.9,441.9 556.2,470.9 521.3,473 C486.4,475.1 447.3,479.8 447.3,521.7 L447.3,553.8 C447.3,570.8 456.1,576 472,576 C487.9,576 521.3,576 521.3,576 M575.3,751.3 L575.3,655.3 C575.313862,651.055109 573.620137,646.982962 570.6,644 C567.638831,640.947672 563.552355,639.247987 559.3,639.29884 L463.3,639.29884 C459.055109,639.286138 454.982962,640.979863 452,644 C448.947672,646.961169 447.247987,651.047645 447.29884,655.3 L447.29884,751.3 C447.286138,755.544891 448.979863,759.617038 452,762.6 C454.961169,765.652328 459.047645,767.352013 463.3,767.30116 L559.3,767.30116 C563.544891,767.313862 567.617038,765.620137 570.6,762.6 C573.659349,759.643612 575.360354,755.553963 575.3,751.3 M512,896 C300.2,896 128,723.9 128,512 C128,300.3 300.2,128 512,128 C723.8,128 896,300.2 896,512 C896,723.8 723.7,896 512,896 M512.1,0 C229.7,0 0,229.8 0,512 C0,794.2 229.8,1024 512.1,1024 C794.4,1024 1024,794.3 1024,512 C1024,229.7 794.4,0 512.1,0" /> </svg> </span> </button> </span> </div> </th> </tr> </thead> <tbody class="pf-v6-c-table__tbody" role="rowgroup"> <tr class="pf-v6-c-table__tr" role="row"> <td class="pf-v6-c-table__td" role="cell" data-label="Repository name" >Repository 1</td> <td class="pf-v6-c-table__td" role="cell" data-label="Branches">10</td> <td class="pf-v6-c-table__td" role="cell" data-label="Pull requests">25</td> <td class="pf-v6-c-table__td" role="cell" data-label="Workspaces">5</td> <td class="pf-v6-c-table__td" role="cell" data-label="Last commit" >2 days ago</td> </tr> <tr class="pf-v6-c-table__tr" role="row"> <td class="pf-v6-c-table__td" role="cell" data-label="Repository name" >Repository 2</td> <td class="pf-v6-c-table__td" role="cell" data-label="Branches">10</td> <td class="pf-v6-c-table__td" role="cell" data-label="Pull requests">25</td> <td class="pf-v6-c-table__td" role="cell" data-label="Workspaces">5</td> <td class="pf-v6-c-table__td" role="cell" data-label="Last commit" >2 days ago</td> </tr> <tr class="pf-v6-c-table__tr" role="row"> <td class="pf-v6-c-table__td" role="cell" data-label="Repository name" >Repository 3</td> <td class="pf-v6-c-table__td" role="cell" data-label="Branches">10</td> <td class="pf-v6-c-table__td" role="cell" data-label="Pull requests">25</td> <td class="pf-v6-c-table__td" role="cell" data-label="Workspaces">5</td> <td class="pf-v6-c-table__td" role="cell" data-label="Last commit" >2 days ago</td> </tr> <tr class="pf-v6-c-table__tr" role="row"> <td class="pf-v6-c-table__td" role="cell" data-label="Repository name" >Repository 4</td> <td class="pf-v6-c-table__td" role="cell" data-label="Branches">10</td> <td class="pf-v6-c-table__td" role="cell" data-label="Pull requests">25</td> <td class="pf-v6-c-table__td" role="cell" data-label="Workspaces">5</td> <td class="pf-v6-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-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 support`display: 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 ```html <table class="pf-v6-c-table" aria-label="This is a simple table example" id="table-with-expanded-overflow-menu" > <thead class="pf-v6-c-table__thead"> <tr class="pf-v6-c-table__tr" role="row"> <th class="pf-v6-c-table__th" scope="col">Repositories</th> <th class="pf-v6-c-table__th" scope="col">Branches</th> <th class="pf-v6-c-table__th" scope="col">Pull requests</th> <th class="pf-v6-c-table__th pf-v6-c-table__cell-empty" role="columnheader" scope="col" > <span class="pf-v6-screen-reader">Actions</span> </th> </tr> </thead> <tbody class="pf-v6-c-table__tbody"> <tr class="pf-v6-c-table__tr" role="row"> <td class="pf-v6-c-table__td" role="cell" data-label="Repository name" >Repository 1</td> <td class="pf-v6-c-table__td" role="cell" data-label="Branches">10</td> <td class="pf-v6-c-table__td" role="cell" data-label="Pull requests">25</td> <td class="pf-v6-c-table__td pf-v6-c-table__action"> <div class="pf-v6-c-overflow-menu" id="table-with-expanded-overflow-menu-overflow-menu-1" > <div class="pf-v6-c-overflow-menu__content"> <div class="pf-v6-c-overflow-menu__group pf-m-button-group"> <div class="pf-v6-c-overflow-menu__item"> <button class="pf-v6-c-button pf-m-primary" type="button"> <span class="pf-v6-c-button__text">Start</span> </button> </div> <div class="pf-v6-c-overflow-menu__item"> <button class="pf-v6-c-button pf-m-secondary" type="button"> <span class="pf-v6-c-button__text">Stop</span> </button> </div> </div> </div> </div> </td> </tr> <tr class="pf-v6-c-table__tr" role="row"> <td class="pf-v6-c-table__td" role="cell" data-label="Repository name" >Repository 2</td> <td class="pf-v6-c-table__td" role="cell" data-label="Branches">10</td> <td class="pf-v6-c-table__td" role="cell" data-label="Pull requests">25</td> <td class="pf-v6-c-table__td pf-v6-c-table__action"> <div class="pf-v6-c-overflow-menu" id="table-with-expanded-overflow-menu-overflow-menu-2" > <div class="pf-v6-c-overflow-menu__content"> <div class="pf-v6-c-overflow-menu__group pf-m-button-group"> <div class="pf-v6-c-overflow-menu__item"> <button class="pf-v6-c-button pf-m-primary" type="button"> <span class="pf-v6-c-button__text">Start</span> </button> </div> <div class="pf-v6-c-overflow-menu__item"> <button class="pf-v6-c-button pf-m-secondary" type="button"> <span class="pf-v6-c-button__text">Stop</span> </button> </div> </div> </div> </div> </td> </tr> </tbody> </table> ``` ### Overflow menu usage, overflow menu collapsed ```html <table class="pf-v6-c-table" role="grid" aria-label="This is a simple table example" id="table-with-overflow-menu-collapsed" > <thead class="pf-v6-c-table__thead"> <tr class="pf-v6-c-table__tr" role="row"> <th class="pf-v6-c-table__th" role="columnheader" scope="col">Repositories</th> <th class="pf-v6-c-table__th" role="columnheader" scope="col">Branches</th> <th class="pf-v6-c-table__th" role="columnheader" scope="col" >Pull requests</th> <th class="pf-v6-c-table__th pf-v6-c-table__cell-empty" role="columnheader" scope="col" > <span class="pf-v6-screen-reader">Actions</span> </th> </tr> </thead> <tbody class="pf-v6-c-table__tbody" role="rowgroup"> <tr class="pf-v6-c-table__tr" role="row"> <td class="pf-v6-c-table__td" role="cell" data-label="Repository name" >Repository 1</td> <td class="pf-v6-c-table__td" role="cell" data-label="Branches">10</td> <td class="pf-v6-c-table__td" role="cell" data-label="Pull requests">25</td> <td class="pf-v6-c-table__td pf-v6-c-table__action"> <div class="pf-v6-c-overflow-menu" id="table-with-overflow-menu-collapsed-overflow-menu-1" > <div class="pf-v6-c-overflow-menu__control"> <button class="pf-v6-c-menu-toggle pf-m-plain" type="button" aria-expanded="false" aria-label="Menu toggle" > <span class="pf-v6-c-menu-toggle__icon"> <i class="fas fa-ellipsis-v" aria-hidden="true"></i> </span> </button> </div> </div> </td> </tr> <tr class="pf-v6-c-table__tr" role="row"> <td class="pf-v6-c-table__td" role="cell" data-label="Repository name" >Repository 2</td> <td class="pf-v6-c-table__td" role="cell" data-label="Branches">10</td> <td class="pf-v6-c-table__td" role="cell" data-label="Pull requests">25</td> <td class="pf-v6-c-table__td pf-v6-c-table__action"> <div class="pf-v6-c-overflow-menu" id="table-with-overflow-menu-collapsed-overflow-menu-2" > <div class="pf-v6-c-overflow-menu__control"> <button class="pf-v6-c-menu-toggle pf-m-plain" type="button" aria-expanded="false" aria-label="Menu toggle" > <span class="pf-v6-c-menu-toggle__icon"> <i class="fas fa-ellipsis-v" aria-hidden="true"></i> </span> </button> </div> </div> </td> </tr> </tbody> </table> ``` ### Overflow menu usage, mobile ```html <table class="pf-v6-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-v6-c-table__thead"> <tr class="pf-v6-c-table__tr" role="row"> <th class="pf-v6-c-table__th" role="columnheader" scope="col">Repositories</th> <th class="pf-v6-c-table__th" role="columnheader" scope="col">Branches</th> <th class="pf-v6-c-table__th" role="columnheader" scope="col" >Pull requests</th> <th class="pf-v6-c-table__th pf-v6-c-table__cell-empty" role="columnheader" scope="col" > <span class="pf-v6-screen-reader">Actions</span> </th> </tr> </thead> <tbody class="pf-v6-c-table__tbody" role="rowgroup"> <tr class="pf-v6-c-table__tr" role="row"> <td class="pf-v6-c-table__td" role="cell" data-label="Repository name" >Repository 1</td> <td class="pf-v6-c-table__td" role="cell" data-label="Branches">10</td> <td class="pf-v6-c-table__td" role="cell" data-label="Pull requests">25</td> <td class="pf-v6-c-table__td pf-v6-c-table__action"> <div class="pf-v6-c-overflow-menu" id="table-with-overflow-menu-collapsed-mobile-overflow-menu-1" > <div class="pf-v6-c-overflow-menu__control"> <button class="pf-v6-c-menu-toggle pf-m-plain" type="button" aria-expanded="false" aria-label="Menu toggle" > <span class="pf-v6-c-menu-toggle__icon"> <i class="fas fa-ellipsis-v" aria-hidden="true"></i> </span> </button> </div> </div> </td> </tr> <tr class="pf-v6-c-table__tr" role="row"> <td class="pf-v6-c-table__td" role="cell" data-label="Repository name" >Repository 2</td> <td class="pf-v6-c-table__td" role="cell" data-label="Branches">10</td> <td class="pf-v6-c-table__td" role="cell" data-label="Pull requests">25</td> <td class="pf-v6-c-table__td pf-v6-c-table__action"> <div class="pf-v6-c-overflow-menu" id="table-with-overflow-menu-collapsed-mobile-overflow-menu-2" > <div class="pf-v6-c-overflow-menu__control"> <button class="pf-v6-c-menu-toggle pf-m-plain" type="button" aria-expanded="false" aria-label="Menu toggle" > <span class="pf-v6-c-menu-toggle__icon"> <i class="fas fa-ellipsis-v" aria-hidden="true"></i> </span> </button> </div> </div> </td> </tr> </tbody> </table> ``` ## With checkboxes, radio select, and actions ### Checkboxes and actions example ```html <table class="pf-v6-c-table pf-m-grid-lg" role="grid" aria-label="This is a table with checkboxes" id="table-checkboxes-and-actions" > <thead class="pf-v6-c-table__thead"> <tr class="pf-v6-c-table__tr" role="row"> <th class="pf-v6-c-table__th pf-v6-c-table__check" aria-label="Row select" role="columnheader" scope="col" > <label class="pf-v6-c-check pf-m-standalone" for="table-checkboxes-and-actions-checkrow-check-input" > <input class="pf-v6-c-check__input" type="checkbox" id="table-checkboxes-and-actions-checkrow-check-input" name="table-checkboxes-and-actions-checkrow-check-input" aria-label="Select all rows" /> </label> </th> <th class="pf-v6-c-table__th" role="columnheader" scope="col">Repositories</th> <th class="pf-v6-c-table__th" role="columnheader" scope="col">Branches</th> <th class="pf-v6-c-table__th" role="columnheader" scope="col" >Pull requests</th> <th class="pf-v6-c-table__th" role="columnheader" scope="col">Workspaces</th> <th class="pf-v6-c-table__th" role="columnheader" scope="col">Last commit</th> <th class="pf-v6-c-table__th pf-v6-c-table__cell-empty" role="columnheader" scope="col" > <span class="pf-v6-screen-reader">Actions</span> </th> </tr> </thead> <tbody class="pf-v6-c-table__tbody" role="rowgroup"> <tr class="pf-v6-c-table__tr" role="row"> <td class="pf-v6-c-table__td pf-v6-c-table__check" aria-label="Check row"> <label class="pf-v6-c-check pf-m-standalone" for="table-checkboxes-and-actions-checkrow-1-check-input" > <input class="pf-v6-c-check__input" type="checkbox" id="table-checkboxes-and-actions-checkrow-1-check-input" name="table-checkboxes-and-actions-checkrow-1-check-input" aria-label="Select row" /> </label> </td> <th class="pf-v6-c-table__th" role="columnheader" data-label="Data label name" > <div id="table-checkboxes-and-actions-node1">Node 1</div> </th> <td class="pf-v6-c-table__td" role="cell" data-label="Branches">10</td> <td class="pf-v6-c-table__td" role="cell" data-label="Pull requests">25</td> <td class="pf-v6-c-table__td" role="cell" data-label="Workspaces">5</td> <td class="pf-v6-c-table__td" role="cell" data-label="Last commit" >2 days ago</td> <td class="pf-v6-c-table__td pf-v6-c-table__action"> <button class="pf-v6-c-menu-toggle pf-m-plain" type="button" aria-expanded="false" aria-label="Table actions" > <span class="pf-v6-c-menu-toggle__icon"> <i class="fas fa-ellipsis-v" aria-hidden="true"></i> </span> </button> </td> </tr> <tr class="pf-v6-c-table__tr" role="row"> <td class="pf-v6-c-table__td pf-v6-c-table__check" aria-label="Check row"> <label class="pf-v6-c-check pf-m-standalone" for="table-checkboxes-and-actions-checkrow-2-check-input" > <input class="pf-v6-c-check__input" type="checkbox" id="table-checkboxes-and-actions-checkrow-2-check-input" name="table-checkboxes-and-actions-checkrow-2-check-input" aria-label="Select row" /> </label> </td> <th class="pf-v6-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-v6-c-table__td" role="cell" data-label="Branches">10</td> <td class="pf-v6-c-table__td" role="cell" data-label="Pull requests">25</td> <td class="pf-v6-c-table__td" role="cell" data-label="Workspaces">5</td> <td class="pf-v6-c-table__td" role="cell" data-label="Last commit" >2 days ago</td> <td class="pf-v6-c-table__td pf-v6-c-table__action"> <button class="pf-v6-c-menu-toggle pf-m-plain" type="button" aria-expanded="false" aria-label="Table actions" > <span class="pf-v6-c-menu-toggle__icon"> <i class="fas fa-ellipsis-v" aria-hidden="true"></i> </span> </button> </td> </tr> <tr class="pf-v6-c-table__tr" role="row"> <td class="pf-v6-c-table__td pf-v6-c-table__check" aria-label="Check row"> <label class="pf-v6-c-check pf-m-standalone" for="table-checkboxes-and-actions-checkrow-3-check-input" > <input class="pf-v6-c-check__input" type="checkbox" id="table-checkboxes-and-actions-checkrow-3-check-input" name="table-checkboxes-and-actions-checkrow-3-check-input" aria-label="Select row" /> </label> </td> <th class="pf-v6-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-v6-c-table__td" role="cell" data-label="Branches">10</td> <td class="pf-v6-c-table__td" role="cell" data-label="Pull requests">25</td> <td class="pf-v6-c-table__td" role="cell" data-label="Workspaces">5</td> <td class="pf-v6-c-table__td" role="cell" data-label="Last commit" >2 days ago</td> <td class="pf-v6-c-table__td pf-v6-c-table__action"> <button class="pf-v6-c-menu-toggle pf-m-plain" type="button" aria-expanded="false" aria-label="Table actions" > <span class="pf-v6-c-menu-toggle__icon"> <i class="fas fa-ellipsis-v" aria-hidden="true"></i> </span> </button> </td> </tr> <tr class="pf-v6-c-table__tr" role="row"> <td class="pf-v6-c-table__td pf-v6-c-table__check" aria-label="Check row"> <label class="pf-v6-c-check pf-m-standalone" for="table-checkboxes-and-actions-checkrow-4-check-input" > <input class="pf-v6-c-check__input" type="checkbox" id="table-checkboxes-and-actions-checkrow-4-check-input" name="table-checkboxes-and-actions-checkrow-4-check-input" aria-label="Select row" /> </label> </td> <th class="pf-v6-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-v6-c-table__td" role="cell" data-label="Branches">10</td> <td class="pf-v6-c-table__td" role="cell" data-label="Pull requests">25</td> <td class="pf-v6-c-table__td" role="cell" data-label="Workspaces">5</td> <td class="pf-v6-c-table__td" role="cell" data-label="Last commit" >2 days ago</td> <td class="pf-v6-c-table__td pf-v6-c-table__action"> <button class="pf-v6-c-menu-toggle pf-m-plain" type="button" aria-expanded="false" aria-label="Table actions" > <span class="pf-v6-c-menu-toggle__icon"> <i class="fas fa-ellipsis-v" aria-hidden="true"></i> </span> </button> </td> </tr> </tbody> </table> ``` ### Single select radio example ```html <table class="pf-v6-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-v6-c-table__thead"> <tr class="pf-v6-c-table__tr" role="row"> <th class="pf-v6-c-table__th pf-v6-c-table__check" role="columnheader" scope="col" > <span class="pf-v6-screen-reader">Row select</span> </th> <th class="pf-v6-c-table__th" role="columnheader" scope="col">Repositories</th> <th class="pf-v6-c-table__th" role="columnheader" scope="col">Branches</th> <th class="pf-v6-c-table__th" role="columnheader" scope="col" >Pull requests</th> <th class="pf-v6-c-table__th" role="columnheader" scope="col">Workspaces</th> <th class="pf-v6-c-table__th" role="columnheader" scope="col">Last commit</th> <th class="pf-v6-c-table__th pf-v6-c-table__cell-empty" role="columnheader" scope="col" > <span class="pf-v6-screen-reader">Actions</span> </th> </tr> </thead> <tbody class="pf-v6-c-table__tbody" role="rowgroup"> <tr class="pf-v6-c-table__tr" role="row"> <td class="pf-v6-c-table__td pf-v6-c-table__check"> <label class="pf-v6-c-radio pf-m-standalone" id="table-single-select-radio-node1-radio" for="table-single-select-radio-node1-radio-input" > <input class="pf-v6-c-radio__input" type="radio" id="table-single-select-radio-node1-radio-input" name="table-single-select-radio-node1-radio-input" aria-label="Standalone radio" /> </label> </td> <th class="pf-v6-c-table__th" role="columnheader" data-label="Data label name" > <div id="table-single-select-radio-node1">Node 1</div> </th> <td class="pf-v6-c-table__td" role="cell" data-label="Branches">10</td> <td class="pf-v6-c-table__td" role="cell" data-label="Pull requests">25</td> <td class="pf-v6-c-table__td" role="cell" data-label="Workspaces">5</td> <td class="pf-v6-c-table__td" role="cell" data-label="Last commit" >2 days ago</td> <td class="pf-v6-c-table__td pf-v6-c-table__action"> <button class="pf-v6-c-menu-toggle pf-m-plain" type="button" aria-expanded="false" aria-label="Table actions" > <span class="pf-v6-c-menu-toggle__icon"> <i class="fas fa-ellipsis-v" aria-hidden="true"></i> </span> </button> </td> </tr> <tr class="pf-v6-c-table__tr" role="row"> <td class="pf-v6-c-table__td pf-v6-c-table__check"> <label class="pf-v6-c-radio pf-m-standalone" id="table-single-select-radio-node2-radio" for="table-single-select-radio-node2-radio-input" > <input class="pf-v6-c-radio__input" type="radio" id="table-single-select-radio-node2-radio-input" name="table-single-select-radio-node2-radio-input" aria-label="Standalone radio" /> </label> </td> <th class="pf-v6-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-v6-c-table__td" role="cell" data-label="Branches">10</td> <td class="pf-v6-c-table__td" role="cell" data-label="Pull requests">25</td> <td class="pf-v6-c-table__td" role="cell" data-label="Workspaces">5</td> <td class="pf-v6-c-table__td" role="cell" data-label="Last commit" >2 days ago</td> <td class="pf-v6-c-table__td pf-v6-c-table__action"> <button class="pf-v6-c-menu-toggle pf-m-plain" type="button" aria-expanded="false" aria-label="Table actions" > <span class="pf-v6-c-menu-toggle__icon"> <i class="fas fa-ellipsis-v" aria-hidden="true"></i> </span> </button> </td> </tr> <tr class="pf-v6-c-table__tr" role="row"> <td class="pf-v6-c-table__td pf-v6-c-table__check"> <label class="pf-v6-c-radio pf-m-standalone" id="table-single-select-radio-node3-radio" for="table-single-select-radio-node3-radio-input" > <input class="pf-v6-c-radio__input" type="radio" id="table-single-select-radio-node3-radio-input" name="table-single-select-radio-node3-radio-input" aria-label="Standalone radio" /> </label> </td> <th class="pf-v6-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-v6-c-table__td" role="cell" data-label="Branches">10</td> <td class="pf-v6-c-table__td" role="cell" data-label="Pull requests">25</td> <td class="pf-v6-c-table__td" role="cell" data-label="Workspaces">5</td> <td class="pf-v6-c-table__td" role="cell" data-label="Last commit" >2 days ago</td> <td class="pf-v6-c-table__td pf-v6-c-table__action"> <button class="pf-v6-c-menu-toggle pf-m-plain" type="button" aria-expanded="false" aria-label="Table actions" > <span class="pf-v6-c-menu-toggle__icon"> <i class="fas fa-ellipsis-v" aria-hidden="true"></i> </span> </button> </td> </tr> <tr class="pf-v6-c-table__tr" role="row"> <td class="pf-v6-c-table__td pf-v6-c-table__check"> <label class="pf-v6-c-radio pf-m-standalone" id="table-single-select-radio-node4-radio" for="table-single-select-radio-node4-radio-input" > <input class="pf-v6-c-radio__input" type="radio" id="table-single-select-radio-node4-radio-input" name="table-single-select-radio-node4-radio-input" aria-label="Standalone radio" /> </label> </td> <th class="pf-v6-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-v6-c-table__td" role="cell" data-label="Branches">10</td> <td class="pf-v6-c-table__td" role="cell" data-label="Pull requests">25</td> <td class="pf-v6-c-table__td" role="cell" data-label="Workspaces">5</td> <td class="pf-v6-c-table__td" role="cell" data-label="Last commit" >2 days ago</td> <td class="pf-v6-c-table__td pf-v6-c-table__action"> <button class="pf-v6-c-menu-toggle pf-m-plain" type="button" aria-expanded="false" aria-label="Table actions" > <span class="pf-v6-c-menu-toggle__icon"> <i class="fas fa-ellipsis-v" aria-hidden="true"></i> </span> </button> </td> </tr> </tbody> </table> ``` ### Table with buttons and actions ```html <table class="pf-v6-c-table pf-m-grid-md" role="grid" aria-label="This is a table with buttons and actions" id="table-buttons-and-actions" > <thead class="pf-v6-c-table__thead"> <tr class="pf-v6-c-table__tr" role="row"> <th class="pf-v6-c-table__th" role="columnheader" scope="col">Deployment</th> <th class="pf-v6-c-table__th" role="columnheader" scope="col">Status</th> <th class="pf-v6-c-table__th" role="columnheader" scope="col">Builds</th> <th class="pf-v6-c-table__th" role="columnheader" scope="col" >Start New Build</th> <th class="pf-v6-c-table__th pf-v6-c-table__action" role="columnheader" scope="col" > <button class="pf-v6-c-menu-toggle pf-m-plain" type="button" aria-expanded="false" aria-label="Table actions" > <span class="pf-v6-c-menu-toggle__icon"> <i class="fas fa-ellipsis-v" aria-hidden="true"></i> </span> </button> </th> </tr> </thead> <tbody class="pf-v6-c-table__tbody" role="rowgroup"> <tr class="pf-v6-c-table__tr" role="row"> <td class="pf-v6-c-table__td" role="cell" data-label="Deployment" >Deployment 1</td> <td class="pf-v6-c-table__td" role="cell" data-label="Status">Success</td> <td class="pf-v6-c-table__td" role="cell" data-label="Builds">6</td> <td class="pf-v6-c-table__td pf-m-action" role="cell" data-label="Start Build" > <span> <button class="pf-v6-c-button pf-m-tertiary" type="button"> <span class="pf-v6-c-button__text">Start</span> </button> </span> </td> <td class="pf-v6-c-table__td pf-v6-c-table__action"> <button class="pf-v6-c-menu-toggle pf-m-plain" type="button" aria-expanded="false" aria-label="Table actions" > <span class="pf-v6-c-menu-toggle__icon"> <i class="fas fa-ellipsis-v" aria-hidden="true"></i> </span> </button> </td> </tr> <tr class="pf-v6-c-table__tr" role="row"> <td class="pf-v6-c-table__td" role="cell" data-label="Deployment" >Deployment 2</td> <td class="pf-v6-c-table__td" role="cell" data-label="Status">Failed</td> <td class="pf-v6-c-table__td" role="cell" data-label="Builds">2</td> <td class="pf-v6-c-table__td pf-m-action" role="cell" data-label="Start Build" > <span> <button class="pf-v6-c-button pf-m-tertiary" type="button"> <span class="pf-v6-c-button__text">Start</span> </button> </span> </td> <td class="pf-v6-c-table__td pf-v6-c-table__action"> <button class="pf-v6-c-menu-toggle pf-m-plain" type="button" aria-expanded="false" aria-label="Table actions" > <span class="pf-v6-c-menu-toggle__icon"> <i class="fas fa-ellipsis-v" aria-hidden="true"></i> </span> </button> </td> </tr> <tr class="pf-v6-c-table__tr" role="row"> <td class="pf-v6-c-table__td" role="cell" data-label="Deployment" >Deployment 3</td> <td class="pf-v6-c-table__td" role="cell" data-label="Status">Success</td> <td class="pf-v6-c-table__td" role="cell" data-label="Builds">7</td> <td class="pf-v6-c-table__td pf-m-action" role="cell" data-label="Start Build" > <span> <button class="pf-v6-c-button pf-m-tertiary" type="button"> <span class="pf-v6-c-button__text">Start</span> </button> </span> </td> <td class="pf-v6-c-table__td pf-v6-c-table__action"> <button class="pf-v6-c-menu-toggle pf-m-plain" type="button" aria-expanded="false" aria-label="Table actions" > <span class="pf-v6-c-menu-toggle__icon"> <i class="fas fa-ellipsis-v" aria-hidden="true"></i> </span> </button> </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 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. | | `.pf-m-action` | `<td>` | Initiates an table cell with button. | ## 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 ```html <table class="pf-v6-c-table pf-m-grid-lg pf-m-expandable" role="grid" aria-label="Expandable table example" id="table-expandable" > <thead class="pf-v6-c-table__thead"> <tr class="pf-v6-c-table__tr" role="row"> <th class="pf-v6-c-table__th pf-v6-c-table__toggle" aria-label="Row expansion" role="columnheader" scope="col" > <button class="pf-v6-c-button pf-m-plain" id="table-expandable-expandable-toggle-thead" type="button" aria-expanded="false" aria-controls="table-expandable-content-1 table-expandable-content-2 table-expandable-content-3 table-expandable-content-4" aria-labelledby="table-expandable-node-thead" aria-label="Toggle all rows" > <span class="pf-v6-c-button__icon"> <div class="pf-v6-c-table__toggle-icon"> <i class="fas fa-angle-down" aria-hidden="true"></i> </div> </span> </button> </th> <th class="pf-v6-c-table__th pf-v6-c-table__check" aria-label="Row select" role="columnheader" scope="col" > <label class="pf-v6-c-check pf-m-standalone" for="table-expandable-checkrow-thead-check-input" > <input class="pf-v6-c-check__input" type="checkbox" id="table-expandable-checkrow-thead-check-input" name="table-expandable-checkrow-thead-check-input" aria-label="Select all rows" /> </label> </th> <th class="pf-v6-c-table__th pf-m-width-30 pf-v6-c-table__sort pf-m-selected" role="columnheader" aria-sort="ascending" scope="col" > <button class="pf-v6-c-table__button"> <span class="pf-v6-c-table__button-content"> <span class="pf-v6-c-table__text">Repositories</span> <span class="pf-v6-c-table__sort-indicator"> <i class="fas fa-long-arrow-alt-up"></i> </span> </span> </button> </th> <th class="pf-v6-c-table__th pf-v6-c-table__sort" role="columnheader" aria-sort="none" scope="col" > <button class="pf-v6-c-table__button"> <span class="pf-v6-c-table__button-content"> <span class="pf-v6-c-table__text">Branches</span> <span class="pf-v6-c-table__sort-indicator"> <i class="fas fa-arrows-alt-v"></i> </span> </span> </button> </th> <th class="pf-v6-c-table__th pf-v6-c-table__sort" role="columnheader" aria-sort="none" scope="col" > <button class="pf-v6-c-table__button"> <span class="pf-v6-c-table__button-content"> <span class="pf-v6-c-table__text">Pull requests</span> <span class="pf-v6-c-table__sort-indicator"> <i class="fas fa-arrows-alt-v"></i> </span> </span> </button> </th> <th class="pf-v6-c-table__th pf-v6-c-table__cell-empty" role="columnheader" scope="col" > <span class="pf-v6-screen-reader">Links</span> </th> <th class="pf-v6-c-table__th pf-v6-c-table__cell-empty" role="columnheader" scope="col" > <span class="pf-v6-screen-reader">Actions</span> </th> </tr> </thead> <tbody class="pf-v6-c-table__tbody pf-m-expanded" role="rowgroup"> <tr class="pf-v6-c-table__tr pf-m-expanded" role="row"> <td class="pf-v6-c-table__td pf-v6-c-table__toggle" aria-label="Row expansion" > <button class="pf-v6-c-button pf-m-expanded pf-m-plain" id="table-expandable-expandable-toggle-1" type="button" aria-expanded="true" aria-controls="table-expandable-content-1" aria-labelledby="table-expandable-node-1" aria-label="Toggle row" aria-describedby="true" > <span class="pf-v6-c-button__icon"> <div class="pf-v6-c-table__toggle-icon"> <i class="fas fa-angle-down" aria-hidden="true"></i> </div> </span> </button> </td> <td class="pf-v6-c-table__td pf-v6-c-table__check" aria-label="Check row">