@patternfly/patternfly

--- id: Table section: components cssPrefix: pf-c-table --- import './Table.css' ## Examples ### Basic table ```html <table class="pf-c-table pf-m-grid-md" role="grid" aria-label="This is a simple table example" id="table-basic"> <caption>This is the table caption</caption> <thead> <tr role="row"> <th role="columnheader" scope="col">Repositories</th> <th role="columnheader" scope="col">Branches</th> <th role="columnheader" scope="col">Pull requests</th> <th role="columnheader" scope="col">Workspaces</th> <th role="columnheader" scope="col">Last commit</th> </tr> </thead> <tbody role="rowgroup"> <tr role="row"> <td role="cell" data-label="Repository name">Repository 1</td> <td role="cell" data-label="Branches">10</td> <td role="cell" data-label="Pull requests">25</td> <td role="cell" data-label="Workspaces">5</td> <td role="cell" data-label="Last commit">2 days ago</td> </tr> <tr role="row"> <td role="cell" data-label="Repository name">Repository 2</td> <td role="cell" data-label="Branches">10</td> <td role="cell" data-label="Pull requests">25</td> <td role="cell" data-label="Workspaces">5</td> <td role="cell" data-label="Last commit">2 days ago</td> </tr> <tr role="row"> <td role="cell" data-label="Repository name">Repository 3</td> <td role="cell" data-label="Branches">10</td> <td role="cell" data-label="Pull requests">25</td> <td role="cell" data-label="Workspaces">5</td> <td role="cell" data-label="Last commit">2 days ago</td> </tr> <tr role="row"> <td role="cell" data-label="Repository name">Repository 4</td> <td role="cell" data-label="Branches">10</td> <td role="cell" data-label="Pull requests">25</td> <td role="cell" data-label="Workspaces">5</td> <td role="cell" data-label="Last commit">2 days ago</td> </tr> </tbody> </table> ``` ### Accessibility | Attribute | Applied to | Outcome | | ------------------------------- | ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- | | `role="grid"` | `.pf-c-table` | Identifies the element that serves as the grid widget container. **Required** | | `aria-label` | `.pf-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. | ### Usage | Class | Applied to | Outcome | | ---------------------- | -------------- | --------------------------------------- | | `.pf-c-table` | `<table>` | Initiates a table element. **Required** | | `.pf-c-table__caption` | `<caption>` | Initiates a table caption. | | `.pf-m-center` | `<th>`, `<td>` | Modifies cell to center its contents. | ### Sortable ```html <table class="pf-c-table pf-m-grid-lg" role="grid" aria-label="This is a sortable table example" id="table-sortable"> <thead> <tr role="row"> <th class="pf-c-table__sort pf-m-selected" role="columnheader" aria-sort="ascending" scope="col"> <button class="pf-c-table__button"> <div class="pf-c-table__button-content"> <span class="pf-c-table__text">Repositories</span> <span class="pf-c-table__sort-indicator"> <i class="fas fa-long-arrow-alt-up"></i> </span> </div> </button> </th> <th class="pf-c-table__sort " role="columnheader" aria-sort="none" scope="col"> <div class="pf-c-table__column-help"> <button class="pf-c-table__button"> <div class="pf-c-table__button-content"> <span class="pf-c-table__text">Branches</span> <span class="pf-c-table__sort-indicator"> <i class="fas fa-arrows-alt-v"></i> </span> </div> </button> <span class="pf-c-table__column-help-action"> <button class="pf-c-button pf-m-plain" type="button" aria-label="More info"> <i class="pficon pf-icon-help" aria-hidden="true"></i> </button> </span> </div> </th> <th class="pf-c-table__sort " role="columnheader" aria-sort="none" scope="col"> <button class="pf-c-table__button"> <div class="pf-c-table__button-content"> <span class="pf-c-table__text">Pull requests</span> <span class="pf-c-table__sort-indicator"> <i class="fas fa-arrows-alt-v"></i> </span> </div> </button> </th> <th role="columnheader" scope="col">Workspaces</th> <th role="columnheader" scope="col"> <div class="pf-c-table__column-help">Last commit <span class="pf-c-table__column-help-action"> <button class="pf-c-button pf-m-plain" type="button" aria-label="More info"> <i class="pficon pf-icon-help" aria-hidden="true"></i> </button> </span> </div> </th> </tr> </thead> <tbody role="rowgroup"> <tr role="row"> <td role="cell" data-label="Repository name">Repository 1</td> <td role="cell" data-label="Branches">10</td> <td role="cell" data-label="Pull requests">25</td> <td role="cell" data-label="Workspaces">5</td> <td role="cell" data-label="Last commit">2 days ago</td> </tr> <tr role="row"> <td role="cell" data-label="Repository name">Repository 2</td> <td role="cell" data-label="Branches">10</td> <td role="cell" data-label="Pull requests">25</td> <td role="cell" data-label="Workspaces">5</td> <td role="cell" data-label="Last commit">2 days ago</td> </tr> <tr role="row"> <td role="cell" data-label="Repository name">Repository 3</td> <td role="cell" data-label="Branches">10</td> <td role="cell" data-label="Pull requests">25</td> <td role="cell" data-label="Workspaces">5</td> <td role="cell" data-label="Last commit">2 days ago</td> </tr> <tr role="row"> <td role="cell" data-label="Repository name">Repository 4</td> <td role="cell" data-label="Branches">10</td> <td role="cell" data-label="Pull requests">25</td> <td role="cell" data-label="Workspaces">5</td> <td role="cell" data-label="Last commit">2 days ago</td> </tr> </tbody> </table> ``` ### Accessibility | Attribute | Applied to | Outcome | | ------------------------------------- | ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `aria-sort=[ascending or descending]` | `.pf-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** | ### Usage | Class | Applied to | Outcome | | ----------------------------- | ------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `.pf-c-table__sort` | `<th>` | Initiates a table header sort cell. **Required for sortable table columns** | | `.pf-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-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-c-table__sort-indicator` | `.pf-c-table__sort > .pf-c-table__button > span` | Initiates a sort indicator. **Required for sortable table columns** | | `.pf-m-selected` | `.pf-c-table__sort` | Modifies for sort selected state. **Required for sortable table columns** | | `.fa-arrows-alt-v` | `.pf-c-table__sort > .pf-c-table__button > .pf-c-table__sort-indicator > .fas` | Initiates icon within unsorted, sortable table header. **Required for sortable table columns** | | `.fa-long-arrow-alt-up` | `.pf-c-table__sort > .pf-c-table__button > .pf-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-c-table__sort > .pf-c-table__button > .pf-c-table__sort-indicator > .fas` | Initiates icon within descending sorted and selected, sortable table header. **Required for sortable table columns** | ### With checkboxes and actions ```html <table class="pf-c-table pf-m-grid-lg" role="grid" aria-label="This is a table with checkboxes" id="table-checkboxes-and-actions"> <thead> <tr role="row"> <td class="pf-c-table__check" role="cell"> <input type="checkbox" name="table-checkboxes-and-actions-check-all" aria-label="Select all rows" /> </td> <th role="columnheader" scope="col">Repositories</th> <th role="columnheader" scope="col">Branches</th> <th role="columnheader" scope="col">Pull requests</th> <th role="columnheader" scope="col">Workspaces</th> <th role="columnheader" scope="col">Last commit</th> <td></td> </tr> </thead> <tbody role="rowgroup"> <tr role="row"> <td class="pf-c-table__check" role="cell"> <input type="checkbox" name="table-checkboxes-and-actions-checkrow1" aria-labelledby="table-checkboxes-and-actions-node1" /> </td> <th role="columnheader" data-label="Repository name"> <div id="table-checkboxes-and-actions-node1">Node 1</div> </th> <td role="cell" data-label="Branches">10</td> <td role="cell" data-label="Pull requests">25</td> <td role="cell" data-label="Workspaces">5</td> <td role="cell" data-label="Last commit">2 days ago</td> <td class="pf-c-table__action" role="cell"> <div class="pf-c-dropdown"> <button class="pf-c-dropdown__toggle pf-m-plain" type="button" id="table-checkboxes-and-actions-dropdown-kebab-right-aligned-1-button" aria-expanded="false" aria-label="Actions"> <i class="fas fa-ellipsis-v" aria-hidden="true"></i> </button> <ul class="pf-c-dropdown__menu pf-m-align-right" aria-labelledby="table-checkboxes-and-actions-dropdown-kebab-right-aligned-1-button" hidden> <li> <a class="pf-c-dropdown__menu-item" href="#">Link</a> </li> <li> <button class="pf-c-dropdown__menu-item" type="button">Action</button> </li> <li> <a class="pf-c-dropdown__menu-item pf-m-disabled" href="#" aria-disabled="true" tabindex="-1">Disabled link</a> </li> <li> <button class="pf-c-dropdown__menu-item" type="button" disabled>Disabled action</button> </li> <li class="pf-c-divider" role="separator"></li> <li> <a class="pf-c-dropdown__menu-item" href="#">Separated link</a> </li> </ul> </div> </td> </tr> <tr role="row"> <td class="pf-c-table__check" role="cell"> <input type="checkbox" name="table-checkboxes-and-actions-checkrow2" aria-labelledby="table-checkboxes-and-actions-node2" /> </td> <th role="columnheader" data-label="Repository name"> <div> <div id="table-checkboxes-and-actions-node2">Node 2</div> <a href="#">siemur/test-space</a> </div> </th> <td role="cell" data-label="Branches">10</td> <td role="cell" data-label="Pull requests">25</td> <td role="cell" data-label="Workspaces">5</td> <td role="cell" data-label="Last commit">2 days ago</td> <td class="pf-c-table__action" role="cell"> <div class="pf-c-dropdown"> <button class="pf-c-dropdown__toggle pf-m-plain" type="button" id="table-checkboxes-and-actions-dropdown-kebab-right-aligned-2-button" aria-expanded="false" aria-label="Actions"> <i class="fas fa-ellipsis-v" aria-hidden="true"></i> </button> <ul class="pf-c-dropdown__menu pf-m-align-right" aria-labelledby="table-checkboxes-and-actions-dropdown-kebab-right-aligned-2-button" hidden> <li> <a class="pf-c-dropdown__menu-item" href="#">Link</a> </li> <li> <button class="pf-c-dropdown__menu-item" type="button">Action</button> </li> <li> <a class="pf-c-dropdown__menu-item pf-m-disabled" href="#" aria-disabled="true" tabindex="-1">Disabled link</a> </li> <li> <button class="pf-c-dropdown__menu-item" type="button" disabled>Disabled action</button> </li> <li class="pf-c-divider" role="separator"></li> <li> <a class="pf-c-dropdown__menu-item" href="#">Separated link</a> </li> </ul> </div> </td> </tr> <tr role="row"> <td class="pf-c-table__check" role="cell"> <input type="checkbox" name="table-checkboxes-and-actions-checkrow3" aria-labelledby="table-checkboxes-and-actions-node3" /> </td> <th role="columnheader" data-label="Repository name"> <div> <div id="table-checkboxes-and-actions-node3">Node 3</div> <a href="#">siemur/test-space</a> </div> </th> <td role="cell" data-label="Branches">10</td> <td role="cell" data-label="Pull requests">25</td> <td role="cell" data-label="Workspaces">5</td> <td role="cell" data-label="Last commit">2 days ago</td> <td class="pf-c-table__action" role="cell"> <div class="pf-c-dropdown"> <button class="pf-c-dropdown__toggle pf-m-plain" type="button" id="table-checkboxes-and-actions-dropdown-kebab-right-aligned-3-button" aria-expanded="false" aria-label="Actions"> <i class="fas fa-ellipsis-v" aria-hidden="true"></i> </button> <ul class="pf-c-dropdown__menu pf-m-align-right" aria-labelledby="table-checkboxes-and-actions-dropdown-kebab-right-aligned-3-button" hidden> <li> <a class="pf-c-dropdown__menu-item" href="#">Link</a> </li> <li> <button class="pf-c-dropdown__menu-item" type="button">Action</button> </li> <li> <a class="pf-c-dropdown__menu-item pf-m-disabled" href="#" aria-disabled="true" tabindex="-1">Disabled link</a> </li> <li> <button class="pf-c-dropdown__menu-item" type="button" disabled>Disabled action</button> </li> <li class="pf-c-divider" role="separator"></li> <li> <a class="pf-c-dropdown__menu-item" href="#">Separated link</a> </li> </ul> </div> </td> </tr> <tr role="row"> <td class="pf-c-table__check" role="cell"> <input type="checkbox" name="table-checkboxes-and-actions-checkrow4" aria-labelledby="table-checkboxes-and-actions-node4" /> </td> <th role="columnheader" data-label="Repository name"> <div> <div id="table-checkboxes-and-actions-node4">Node 4</div> <a href="#">siemur/test-space</a> </div> </th> <td role="cell" data-label="Branches">10</td> <td role="cell" data-label="Pull requests">25</td> <td role="cell" data-label="Workspaces">5</td> <td role="cell" data-label="Last commit">2 days ago</td> <td class="pf-c-table__action" role="cell"> <div class="pf-c-dropdown"> <button class="pf-c-dropdown__toggle pf-m-plain" type="button" id="table-checkboxes-and-actions-dropdown-kebab-right-aligned-4-button" aria-expanded="false" aria-label="Actions"> <i class="fas fa-ellipsis-v" aria-hidden="true"></i> </button> <ul class="pf-c-dropdown__menu pf-m-align-right" aria-labelledby="table-checkboxes-and-actions-dropdown-kebab-right-aligned-4-button" hidden> <li> <a class="pf-c-dropdown__menu-item" href="#">Link</a> </li> <li> <button class="pf-c-dropdown__menu-item" type="button">Action</button> </li> <li> <a class="pf-c-dropdown__menu-item pf-m-disabled" href="#" aria-disabled="true" tabindex="-1">Disabled link</a> </li> <li> <button class="pf-c-dropdown__menu-item" type="button" disabled>Disabled action</button> </li> <li class="pf-c-divider" role="separator"></li> <li> <a class="pf-c-dropdown__menu-item" 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>`. ### Thead accessibility | Attribute | Applied to | Outcome | | --------------------------------- | ------------------------------------------- | ---------------------------------------------------------- | | `aria-label="[descriptive text]"` | `.pf-c-table__check input[type="checkbox"]` | Provides an accessible name for the checkbox. **Required** | ### Tbody accessibility | Attribute | Applied to | Outcome | | ----------------------------------------------------------------------- | ------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- | | `aria-labelledby="[row_header_id]"` or `aria-label="[descriptive text]` | `.pf-c-table__check input[type="checkbox"]` | Provides an accessible name for the checkbox. **Required** | | `id` | row header `<th>` > `*` | Provides an accessible description for the checkbox. **Required if using `aria-labelledby` for `.pf-c-table__check input[type="checkbox"]`** | ### Usage | Class | Applied to | Outcome | | --------------------------------- | -------------- | ------------------------------------------- | | `.pf-c-table__check` | `<th>`, `<td>` | Initiates a check table cell. | | `.pf-c-table__action` | `<th>`, `<td>` | Initiates an action table cell. | | `.pf-c-table__inline-edit-action` | `<th>`, `<td>` | Initiates an inline edit action table cell. | ### Expandable ```html <table class="pf-c-table pf-m-expandable pf-m-grid-lg" role="grid" aria-label="Expandable table example" id="table-expandable"> <thead> <tr role="row"> <td></td> <td class="pf-c-table__check" role="cell"> <input type="checkbox" name="table-expandable-check-all" aria-label="Select all rows" /> </td> <th class="pf-m-width-30 pf-c-table__sort pf-m-selected" role="columnheader" aria-sort="ascending" scope="col"> <button class="pf-c-table__button"> <div class="pf-c-table__button-content"> <span class="pf-c-table__text">Repositories</span> <span class="pf-c-table__sort-indicator"> <i class="fas fa-long-arrow-alt-up"></i> </span> </div> </button> </th> <th class="pf-c-table__sort " role="columnheader" aria-sort="none" scope="col"> <button class="pf-c-table__button"> <div class="pf-c-table__button-content"> <span class="pf-c-table__text">Branches</span> <span class="pf-c-table__sort-indicator"> <i class="fas fa-arrows-alt-v"></i> </span> </div> </button> </th> <th class="pf-c-table__sort " role="columnheader" aria-sort="none" scope="col"> <button class="pf-c-table__button"> <div class="pf-c-table__button-content"> <span class="pf-c-table__text">Pull requests</span> <span class="pf-c-table__sort-indicator"> <i class="fas fa-arrows-alt-v"></i> </span> </div> </button> </th> <td></td> <td></td> </tr> </thead> <tbody class="pf-m-expanded" role="rowgroup"> <tr role="row"> <td class="pf-c-table__toggle" role="cell"> <button class="pf-c-button pf-m-plain pf-m-expanded" aria-labelledby="table-expandable-node1 table-expandable-expandable-toggle1" id="table-expandable-expandable-toggle1" aria-label="Details" aria-controls="table-expandable-content1" aria-expanded="true"> <div class="pf-c-table__toggle-icon"> <i class="fas fa-angle-down" aria-hidden="true"></i> </div> </button> </td> <td class="pf-c-table__check" role="cell"> <input type="checkbox" name="table-expandable-checkrow1" aria-labelledby="table-expandable-node1" /> </td> <th role="columnheader" data-label="Repository name"> <div> <div id="table-expandable-node1">Node 1</div> <a href="#">siemur/test-space</a> </div> </th> <td role="cell" data-label="Branches">10</td> <td role="cell" data-label="Pull requests">25</td> <td role="cell" data-label="Action"> <a href="#">Link 1</a> </td> <td class="pf-c-table__action" role="cell"> <div class="pf-c-dropdown"> <button class="pf-c-dropdown__toggle pf-m-plain" type="button" id="table-expandable-dropdown-kebab-right-aligned-1-button" aria-expanded="false" aria-label="Actions"> <i class="fas fa-ellipsis-v" aria-hidden="true"></i> </button> <ul class="pf-c-dropdown__menu pf-m-align-right" aria-labelledby="table-expandable-dropdown-kebab-right-aligned-1-button" hidden> <li> <a class="pf-c-dropdown__menu-item" href="#">Link</a> </li> <li> <button class="pf-c-dropdown__menu-item" type="button">Action</button> </li> <li> <a class="pf-c-dropdown__menu-item pf-m-disabled" href="#" aria-disabled="true" tabindex="-1">Disabled link</a> </li> <li> <button class="pf-c-dropdown__menu-item" type="button" disabled>Disabled action</button> </li> <li class="pf-c-divider" role="separator"></li> <li> <a class="pf-c-dropdown__menu-item" href="#">Separated link</a> </li> </ul> </div> </td> </tr> <tr class="pf-c-table__expandable-row pf-m-expanded" role="row"> <td></td> <td></td> <td role="cell" colspan="4" id="table-expandable-content1"> <div class="pf-c-table__expandable-row-content">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.</div> </td> <td></td> </tr> </tbody> <tbody role="rowgroup"> <tr role="row"> <td class="pf-c-table__toggle" role="cell"> <button class="pf-c-button pf-m-plain" aria-labelledby="table-expandable-node2 table-expandable-expandable-toggle2" id="table-expandable-expandable-toggle2" aria-label="Details" aria-controls="table-expandable-content2"> <div class="pf-c-table__toggle-icon"> <i class="fas fa-angle-down" aria-hidden="true"></i> </div> </button> </td> <td class="pf-c-table__check" role="cell"> <input type="checkbox" name="table-expandable-checkrow2" aria-labelledby="table-expandable-node2" /> </td> <th role="columnheader" data-label="Repository name"> <div> <div id="table-expandable-node2">Node 2</div> <a href="#">siemur/test-space</a> </div> </th> <td role="cell" data-label="Branches">10</td> <td role="cell" data-label="Pull requests">25</td> <td role="cell" data-label="Action"> <a href="#">Link 2</a> </td> <td class="pf-c-table__action" role="cell"> <div class="pf-c-dropdown"> <button class="pf-c-dropdown__toggle pf-m-plain" type="button" id="table-expandable-dropdown-kebab-right-aligned-2-button" aria-expanded="false" aria-label="Actions"> <i class="fas fa-ellipsis-v" aria-hidden="true"></i> </button> <ul class="pf-c-dropdown__menu pf-m-align-right" aria-labelledby="table-expandable-dropdown-kebab-right-aligned-2-button" hidden> <li> <a class="pf-c-dropdown__menu-item" href="#">Link</a> </li> <li> <button class="pf-c-dropdown__menu-item" type="button">Action</button> </li> <li> <a class="pf-c-dropdown__menu-item pf-m-disabled" href="#" aria-disabled="true" tabindex="-1">Disabled link</a> </li> <li> <button class="pf-c-dropdown__menu-item" type="button" disabled>Disabled action</button> </li> <li class="pf-c-divider" role="separator"></li> <li> <a class="pf-c-dropdown__menu-item" href="#">Separated link</a> </li> </ul> </div> </td> </tr> <tr class="pf-c-table__expandable-row" role="row"> <td role="cell" colspan="7" id="table-expandable-content2"> <div class="pf-c-table__expandable-row-content">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.</div> </td> </tr> </tbody> <tbody class="pf-m-expanded" role="rowgroup"> <tr role="row"> <td class="pf-c-table__toggle" role="cell"> <button class="pf-c-button pf-m-plain pf-m-expanded" aria-labelledby="table-expandable-node3 expandable-toggle3" id="expandable-toggle3" aria-label="Details" aria-controls="table-expandable-content3" aria-expanded="true"> <div class="pf-c-table__toggle-icon"> <i class="fas fa-angle-down" aria-hidden="true"></i> </div> </button> </td> <td class="pf-c-table__check" role="cell"> <input type="checkbox" name="table-expandable-checkrow3" aria-labelledby="table-expandable-node3" /> </td> <th role="columnheader" data-label="Repository name"> <div> <div id="table-expandable-node3">Node 3</div> <a href="#">siemur/test-space</a> </div> </th> <td role="cell" data-label="Branches">10</td> <td role="cell" data-label="Pull requests">25</td> <td role="cell" data-label="Action"> <a href="#">Link 3</a> </td> <td class="pf-c-table__action" role="cell"> <div class="pf-c-dropdown"> <button class="pf-c-dropdown__toggle pf-m-plain" type="button" id="table-expandable-dropdown-kebab-right-aligned-3-button" aria-expanded="false" aria-label="Actions"> <i class="fas fa-ellipsis-v" aria-hidden="true"></i> </button> <ul class="pf-c-dropdown__menu pf-m-align-right" aria-labelledby="table-expandable-dropdown-kebab-right-aligned-3-button" hidden> <li> <a class="pf-c-dropdown__menu-item" href="#">Link</a> </li> <li> <button class="pf-c-dropdown__menu-item" type="button">Action</button> </li> <li> <a class="pf-c-dropdown__menu-item pf-m-disabled" href="#" aria-disabled="true" tabindex="-1">Disabled link</a> </li> <li> <button class="pf-c-dropdown__menu-item" type="button" disabled>Disabled action</button> </li> <li class="pf-c-divider" role="separator"></li> <li> <a class="pf-c-dropdown__menu-item" href="#">Separated link</a> </li> </ul> </div> </td> </tr> <tr class="pf-c-table__expandable-row pf-m-expanded" role="row"> <td role="cell" colspan="7" id="table-expandable-content3"> <div class="pf-c-table__expandable-row-content">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.</div> </td> </tr> </tbody> <tbody class="pf-m-expanded" role="rowgroup"> <tr role="row"> <td class="pf-c-table__toggle" role="cell"> <button class="pf-c-button pf-m-plain pf-m-expanded" aria-labelledby="table-expandable-node4 expandable-toggle4" id="expandable-toggle4" aria-label="Details" aria-controls="table-expandable-content4" aria-expanded="true"> <div class="pf-c-table__toggle-icon"> <i class="fas fa-angle-down" aria-hidden="true"></i> </div> </button> </td> <td class="pf-c-table__check" role="cell"> <input type="checkbox" name="table-expandable-checkrow4" aria-labelledby="table-expandable-node4" /> </td> <th role="columnheader" data-label="Repository name"> <div> <div id="table-expandable-node4">Node 4</div> <a href="#">siemur/test-space</a> </div> </th> <td role="cell" data-label="Branches">10</td> <td role="cell" data-label="Pull requests">25</td> <td role="cell" data-label="Action"> <a href="#">Link 4</a> </td> <td class="pf-c-table__action" role="cell"> <div class="pf-c-dropdown"> <button class="pf-c-dropdown__toggle pf-m-plain" type="button" id="table-expandable-dropdown-kebab-right-aligned-4-button" aria-expanded="false" aria-label="Actions"> <i class="fas fa-ellipsis-v" aria-hidden="true"></i> </button> <ul class="pf-c-dropdown__menu pf-m-align-right" aria-labelledby="table-expandable-dropdown-kebab-right-aligned-4-button" hidden> <li> <a class="pf-c-dropdown__menu-item" href="#">Link</a> </li> <li> <button class="pf-c-dropdown__menu-item" type="button">Action</button> </li> <li> <a class="pf-c-dropdown__menu-item pf-m-disabled" href="#" aria-disabled="true" tabindex="-1">Disabled link</a> </li> <li> <button class="pf-c-dropdown__menu-item" type="button" disabled>Disabled action</button> </li> <li class="pf-c-divider" role="separator"></li> <li> <a class="pf-c-dropdown__menu-item" href="#">Separated link</a> </li> </ul> </div> </td> </tr> <tr class="pf-c-table__expandable-row pf-m-expanded" role="row"> <td class="pf-m-no-padding" role="cell" colspan="7" id="table-expandable-content4"> <div class="pf-c-table__expandable-row-content">Expandable row content has no padding.</div> </td> </tr> </tbody> </table> ``` Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.pf-c-table__expandable-row-content`. For no padding add `.pf-m-no-padding` to `.pf-c-table__expandable-row` > `<td>` ### Accessibility | Attribute | Applied to | Outcome | | ----------------------------------------------------- | -------------------------------------- | ----------------------------------------------------------------------------- | | `hidden` | `.pf-c-table__expandable-row` | Indicates that the expandable content is hidden. **Required** | | `aria-expanded="true"` | `.pf-c-table__toggle` > `.pf-c-button` | Indicates that the row is visible. **Required** | | `aria-label="[descriptive text]"` | `.pf-c-table__toggle` > `.pf-c-button` | Provides an accessible name for toggle button. **Required** | | `aria-labelledby="[title_cell_id] [button_id]"` | `.pf-c-table__toggle` > `.pf-c-button` | Provides an accessible description for toggle button. **Required** | | `id="[button_id]"` | `.pf-c-table__toggle` > `.pf-c-button` | Provides a reference for toggle button description. **Required** | | `aria-controls="[id of element the button controls]"` | `.pf-c-table__toggle` > `.pf-c-button` | Identifies the expanded content controlled by the toggle button. **Required** | ### Usage | Class | Applied to | Outcome | | ------------------------------------- | --------------------------------------------------------------------- | ----------------------------------------------- | | `.pf-c-table__toggle-icon` | `<span>` | Initiates the table toggle icon wrapper. | | `.pf-c-table__expandable-row` | `<tr>` | Initiates an expandable row. | | `.pf-c-table__expandable-row-content` | `.pf-c-table__expandable-row` > `<td>` > `<div>` | Initiates an expandable row content wrapper. | | `.pf-m-expanded` | `.pf-c-table__toggle` > `.pf-c-button`, `.pf-c-table__expandable-row` | Modifies for expanded state. | | `.pf-m-no-padding` | `.pf-c-table__expandable-row` > `<td>` | Modifies the expandable row to have no padding. | ### With compound expansion ```html <table class="pf-c-table pf-m-expandable pf-m-grid-md" role="grid" aria-label="Compound expandable table example" id="table-compound-expansion"> <thead> <tr role="row"> <th class="pf-c-table__sort pf-m-selected" role="columnheader" aria-sort="ascending" scope="col"> <button class="pf-c-table__button"> <div class="pf-c-table__button-content"> <span class="pf-c-table__text">Repositories</span> <span class="pf-c-table__sort-indicator"> <i class="fas fa-long-arrow-alt-up"></i> </span> </div> </button> </th> <th class="pf-c-table__sort " role="columnheader" aria-sort="none" scope="col"> <button class="pf-c-table__button"> <div class="pf-c-table__button-content"> <span class="pf-c-table__text">Branches</span> <span class="pf-c-table__sort-indicator"> <i class="fas fa-arrows-alt-v"></i> </span> </div> </button> </th> <th class="pf-c-table__sort " role="columnheader" aria-sort="none" scope="col"> <button class="pf-c-table__button"> <div class="pf-c-table__button-content"> <span class="pf-c-table__text">Pull requests</span> <span class="pf-c-table__sort-indicator"> <i class="fas fa-arrows-alt-v"></i> </span> </div> </button> </th> <th role="columnheader" scope="col">Workspaces</th> <th role="columnheader" scope="col">Last commit</th> <td></td> <td></td> </tr> </thead> <tbody class="pf-m-expanded" role="rowgroup"> <tr role="row"> <td class="pf-c-table__compound-expansion-toggle pf-m-expanded" role="cell" data-label="Repositories"> <button class="pf-c-table__button"> <span class="pf-c-table__text"> <i class="fas fa-code-branch" aria-hidden="true"></i>  10 </span> </button> </td> <td class="pf-c-table__compound-expansion-toggle " role="cell" data-label="Branches"> <button class="pf-c-table__button"> <span class="pf-c-table__text"> <i class="fas fa-code" aria-hidden="true"></i>   234 </span> </button> </td> <td class="pf-c-table__compound-expansion-toggle " role="cell" data-label="Pull requests"> <button class="pf-c-table__button"> <span class="pf-c-table__text"> <i class="fas fa-cube" aria-hidden="true"></i>   4 </span> </button> </td> <th role="columnheader" data-label="Workspaces"> <a href="#">siemur/test-space</a> </th> <td role="cell" data-label="Last commit"> <span>20 minutes</span> </td> <td role="cell" data-label="Action"> <a href="#">Open in Github</a> </td> <td class="pf-c-table__action" role="cell"> <div class="pf-c-dropdown"> <button class="pf-c-dropdown__toggle pf-m-plain" type="button" id="table-compound-expansion-dropdown-kebab-right-aligned-1-button" aria-expanded="false" aria-label="Actions"> <i class="fas fa-ellipsis-v" aria-hidden="true"></i> </button> <ul class="pf-c-dropdown__menu pf-m-align-right" aria-labelledby="table-compound-expansion-dropdown-kebab-right-aligned-1-button" hidden> <li> <a class="pf-c-dropdown__menu-item" href="#">Link</a> </li> <li> <button class="pf-c-dropdown__menu-item" type="button">Action</button> </li> <li> <a class="pf-c-dropdown__menu-item pf-m-disabled" href="#" aria-disabled="true" tabindex="-1">Disabled link</a> </li> <li> <button class="pf-c-dropdown__menu-item" type="button" disabled>Disabled action</button> </li> <li class="pf-c-divider" role="separator"></li> <li> <a class="pf-c-dropdown__menu-item" href="#">Separated link</a> </li> </ul> </div> </td> </tr> <tr class="pf-c-table__expandable-row pf-m-expanded" role="row"> <td class="pf-m-no-padding" role="cell" colspan="7"> <table class="pf-c-table pf-m-compact pf-m-no-border-rows" role="grid" id="table-compound-expansion-nested-table-1" aria-label="Nested table" id="table-compound-expansion-nested-table-1"> <thead> <tr role="row"> <th class="pf-c-table__sort " role="columnheader" aria-sort="none" scope="col"> <button class="pf-c-table__button"> <div class="pf-c-table__button-content"> <span class="pf-c-table__text">Description</span> <span class="pf-c-table__sort-indicator"> <i class="fas fa-arrows-alt-v"></i> </span> </div> </button> </th> <th role="columnheader" scope="col">Date</th> <th role="columnheader" scope="col">Status</th> <td role="cell"></td> </tr> </thead> <tbody role="rowgroup"> <tr role="row"> <th role="columnheader" data-label="Description">Item one</th> <td role="cell" data-label="Date">May 9, 2018</td> <td role="cell" data-label="Status">Active</td> <td class="pf-c-table__action" role="cell"> <div class="pf-c-dropdown"> <button class="pf-c-dropdown__toggle pf-m-plain" type="button" id="table-compound-expansion-nested-table-1-dropdown-kebab-nested-tr1-button" aria-expanded="false" aria-label="Actions"> <i class="fas fa-ellipsis-v" aria-hidden="true"></i> </button> <ul class="pf-c-dropdown__menu pf-m-align-right" aria-labelledby="table-compound-expansion-nested-table-1-dropdown-kebab-nested-tr1-button" hidden> <li> <a class="pf-c-dropdown__menu-item" href="#">Link</a> </li> <li> <button class="pf-c-dropdown__menu-item" type="button">Action</button> </li> <li> <a class="pf-c-dropdown__menu-item pf-m-disabled" href="#" aria-disabled="true" tabindex="-1">Disabled link</a> </li> <li> <button class="pf-c-dropdown__menu-item" type="button" disabled>Disabled action</button> </li> <li class="pf-c-divider" role="separator"></li> <li> <a class="pf-c-dropdown__menu-item" href="#">Separated link</a> </li> </ul> </div> </td> </tr> <tr role="row"> <th role="columnheader" data-label="Description">Item two</th> <td role="cell" data-label="Date">May 9, 2018</td> <td role="cell" data-label="Status">Warning</td> <td class="pf-c-table__action" role="cell"> <div class="pf-c-dropdown"> <button class="pf-c-dropdown__toggle pf-m-plain" type="button" id="table-compound-expansion-nested-table-1-dropdown-kebab-nested-tr2-button" aria-expanded="false" aria-label="Actions"> <i class="fas fa-ellipsis-v" aria-hidden="true"></i> </button> <ul class="pf-c-dropdown__menu pf-m-align-right" aria-labelledby="table-compound-expansion-nested-table-1-dropdown-kebab-nested-tr2-button" hidden> <li> <a class="pf-c-dropdown__menu-item" href="#">Link</a> </li> <li> <button class="pf-c-dropdown__menu-item" type="button">Action</button> </li> <li> <a class="pf-c-dropdown__menu-item pf-m-disabled" href="#" aria-disabled="true" tabindex="-1">Disabled link</a> </li> <li> <button class="pf-c-dropdown__menu-item" type="button" disabled>Disabled action</button> </li> <li class="pf-c-divider" role="separator"></li> <li> <a class="pf-c-dropdown__menu-item" href="#">Separated link</a> </li> </ul> </div> </td> </tr> <tr role="row"> <th role="columnheader" data-label="Description">Item three</th> <td role="cell" data-label="Date">May 9, 2018</td> <td role="cell" data-label="Status">Active</td> <td class="pf-c-table__action" role="cell"> <div class="pf-c-dropdown"> <button class="pf-c-dropdown__toggle pf-m-plain" type="button" id="table-compound-expansion-nested-table-1-dropdown-kebab-nested-tr3-button" aria-expanded="false" aria-label="Actions"> <i class="fas fa-ellipsis-v" aria-hidden="true"></i> </button> <ul class="pf-c-dropdown__menu pf-m-align-right" aria-labelledby="table-compound-expansion-nested-table-1-dropdown-kebab-nested-tr3-button" hidden> <li> <a class="pf-c-dropdown__menu-item" href="#">Link</a> </li> <li> <button class="pf-c-dropdown__menu-item" type="button">Action</button> </li> <li> <a class="pf-c-dropdown__menu-item pf-m-disabled" href="#" aria-disabled="true" tabindex="-1">Disabled link</a> </li> <li> <button class="pf-c-dropdown__menu-item" type="button" disabled>Disabled action</button> </li> <li class="pf-c-divider" role="separator"></li> <li> <a class="pf-c-dropdown__menu-item" href="#">Separated link</a> </li> </ul> </div> </td> </tr> <tr role="row"> <th role="columnheader" data-label="Description">Item four</th> <td role="cell" data-label="Date">May 9, 2018</td> <td role="cell" data-label="Status">Active</td> <td class="pf-c-table__action" role="cell"> <div class="pf-c-dropdown"> <button class="pf-c-dropdown__toggle pf-m-plain" type="button" id="table-compound-expansion-nested-table-1-dropdown-kebab-nested-tr4-button" aria-expanded="false" aria-label="Actions"> <i class="fas fa-ellipsis-v" aria-hidden="true"></i> </button> <ul class="pf-c-dropdown__menu pf-m-align-right" aria-labelledby="table-compound-expansion-nested-table-1-dropdown-kebab-nested-tr4-button" hidden> <li> <a class="pf-c-dropdown__menu-item" href="#">Link</a> </li> <li> <button class="pf-c-dropdown__menu-item" type="button">Action</button> </li> <li> <a class="pf-c-dropdown__menu-item pf-m-disabled" href="#" aria-disabled="true" tabindex="-1">Disabled link</a> </li> <li> <button class="pf-c-dropdown__menu-item" type="button" disabled>Disabled action</button> </li> <li class="pf-c-divider" role="separator"></li> <li> <a