@patternfly/patternfly

--- id: Table section: components cssPrefix: pf-c-table --- import './Table.css' ## Examples ### Basic table ```hbs {{#> table table--id="table-basic" table--grid="true" table--modifier="pf-m-grid-md" table--attribute='aria-label="This is a simple table example"'}} {{#> table-caption}} This is the table caption {{/table-caption}} {{#> table-thead}} {{#> table-tr}} {{#> table-th table-th--attribute='scope="col"'}} Repositories {{/table-th}} {{#> table-th table-th--attribute='scope="col"'}} Branches {{/table-th}} {{#> table-th table-th--attribute='scope="col"'}} Pull requests {{/table-th}} {{#> table-th table-th--attribute='scope="col"'}} Workspaces {{/table-th}} {{#> table-th table-th--attribute='scope="col"'}} Last commit {{/table-th}} {{/table-tr}} {{/table-thead}} {{#> table-tbody}} {{#> table-tr}} {{#> table-td table-td--data-label="Repository name"}} Repository 1 {{/table-td}} {{#> table-td table-td--data-label="Branches"}} 10 {{/table-td}} {{#> table-td table-td--data-label="Pull requests"}} 25 {{/table-td}} {{#> table-td table-td--data-label="Workspaces"}} 5 {{/table-td}} {{#> table-td table-td--data-label="Last commit"}} 2 days ago {{/table-td}} {{/table-tr}} {{#> table-tr}} {{#> table-td table-td--data-label="Repository name"}} Repository 2 {{/table-td}} {{#> table-td table-td--data-label="Branches"}} 10 {{/table-td}} {{#> table-td table-td--data-label="Pull requests"}} 25 {{/table-td}} {{#> table-td table-td--data-label="Workspaces"}} 5 {{/table-td}} {{#> table-td table-td--data-label="Last commit"}} 2 days ago {{/table-td}} {{/table-tr}} {{#> table-tr}} {{#> table-td table-td--data-label="Repository name"}} Repository 3 {{/table-td}} {{#> table-td table-td--data-label="Branches"}} 10 {{/table-td}} {{#> table-td table-td--data-label="Pull requests"}} 25 {{/table-td}} {{#> table-td table-td--data-label="Workspaces"}} 5 {{/table-td}} {{#> table-td table-td--data-label="Last commit"}} 2 days ago {{/table-td}} {{/table-tr}} {{#> table-tr}} {{#> table-td table-td--data-label="Repository name"}} Repository 4 {{/table-td}} {{#> table-td table-td--data-label="Branches"}} 10 {{/table-td}} {{#> table-td table-td--data-label="Pull requests"}} 25 {{/table-td}} {{#> table-td table-td--data-label="Workspaces"}} 5 {{/table-td}} {{#> table-td table-td--data-label="Last commit"}} 2 days ago {{/table-td}} {{/table-tr}} {{/table-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 ```hbs {{#> table table--id="table-sortable" table--grid="true" table--modifier="pf-m-grid-lg" table--attribute='aria-label="This is a sortable table example"'}} {{#> table-thead}} {{#> table-tr}} {{#> table-th table-th--attribute='scope="col"' table-th--sortable="true" table-th--selected="true" table-th--asc="true"}} Repositories {{/table-th}} {{#> table-th table-th--attribute='scope="col"' table-th--sortable="true" table-th--IsColumnHelp="true"}} Branches {{/table-th}} {{#> table-th table-th--attribute='scope="col"' table-th--sortable="true"}} Pull requests {{/table-th}} {{#> table-th table-th--attribute='scope="col"'}} Workspaces {{/table-th}} {{#> table-th table-th--attribute='scope="col"' table-th--IsColumnHelp="true"}} Last commit {{/table-th}} {{/table-tr}} {{/table-thead}} {{#> table-tbody}} {{#> table-tr}} {{#> table-td table-td--data-label="Repository name"}} Repository 1 {{/table-td}} {{#> table-td table-td--data-label="Branches"}} 10 {{/table-td}} {{#> table-td table-td--data-label="Pull requests"}} 25 {{/table-td}} {{#> table-td table-td--data-label="Workspaces"}} 5 {{/table-td}} {{#> table-td table-td--data-label="Last commit"}} 2 days ago {{/table-td}} {{/table-tr}} {{#> table-tr}} {{#> table-td table-td--data-label="Repository name"}} Repository 2 {{/table-td}} {{#> table-td table-td--data-label="Branches"}} 10 {{/table-td}} {{#> table-td table-td--data-label="Pull requests"}} 25 {{/table-td}} {{#> table-td table-td--data-label="Workspaces"}} 5 {{/table-td}} {{#> table-td table-td--data-label="Last commit"}} 2 days ago {{/table-td}} {{/table-tr}} {{#> table-tr}} {{#> table-td table-td--data-label="Repository name"}} Repository 3 {{/table-td}} {{#> table-td table-td--data-label="Branches"}} 10 {{/table-td}} {{#> table-td table-td--data-label="Pull requests"}} 25 {{/table-td}} {{#> table-td table-td--data-label="Workspaces"}} 5 {{/table-td}} {{#> table-td table-td--data-label="Last commit"}} 2 days ago {{/table-td}} {{/table-tr}} {{#> table-tr}} {{#> table-td table-td--data-label="Repository name"}} Repository 4 {{/table-td}} {{#> table-td table-td--data-label="Branches"}} 10 {{/table-td}} {{#> table-td table-td--data-label="Pull requests"}} 25 {{/table-td}} {{#> table-td table-td--data-label="Workspaces"}} 5 {{/table-td}} {{#> table-td table-td--data-label="Last commit"}} 2 days ago {{/table-td}} {{/table-tr}} {{/table-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 ```hbs {{#> table table--id="table-checkboxes-and-actions" table--grid="true" table--modifier="pf-m-grid-lg" table--attribute='aria-label="This is a table with checkboxes"'}} {{#> table-thead}} {{#> table-tr}} {{#> table-td table-td--check="true"}} <input type="checkbox" name="{{table--id}}-check-all" aria-label="Select all rows"> {{/table-td}} {{#> table-th table-th--attribute='scope="col"'}} Repositories {{/table-th}} {{#> table-th table-th--attribute='scope="col"'}} Branches {{/table-th}} {{#> table-th table-th--attribute='scope="col"'}} Pull requests {{/table-th}} {{#> table-th table-th--attribute='scope="col"'}} Workspaces {{/table-th}} {{#> table-th table-th--attribute='scope="col"'}} Last commit {{/table-th}} {{> table-td table-td--IsEmpty="true"}} {{/table-tr}} {{/table-thead}} {{#> table-tbody}} {{#> table-tr}} {{#> table-td table-td--check="true"}} <input type="checkbox" name="{{table--id}}-checkrow1" aria-labelledby="{{concat table--id '-node1'}}"> {{/table-td}} {{#> table-th table-th--data-label="Repository name"}} <div id="{{table--id}}-node1">Node 1</div> {{/table-th}} {{#> table-td table-td--data-label="Branches"}} 10 {{/table-td}} {{#> table-td table-td--data-label="Pull requests"}} 25 {{/table-td}} {{#> table-td table-td--data-label="Workspaces"}} 5 {{/table-td}} {{#> table-td table-td--data-label="Last commit"}} 2 days ago {{/table-td}} {{#> table-td table-td--action="true"}} {{#> dropdown id=(concat table--id "-dropdown-kebab-right-aligned-1") dropdown--IsActionMenu="true" dropdown-menu--modifier="pf-m-align-right" dropdown-toggle--modifier="pf-m-plain" dropdown--HasKebabIcon="true" aria-label="Actions"}} {{/dropdown}} {{/table-td}} {{/table-tr}} {{#> table-tr}} {{#> table-td table-td--check="true"}} <input type="checkbox" name="{{table--id}}-checkrow2" aria-labelledby="{{concat table--id '-node2'}}"> {{/table-td}} {{#> table-th table-th--data-label="Repository name"}} <div> <div id="{{table--id}}-node2">Node 2</div> <a href="#">siemur/test-space</a> </div> {{/table-th}} {{#> table-td table-td--data-label="Branches"}} 10 {{/table-td}} {{#> table-td table-td--data-label="Pull requests"}} 25 {{/table-td}} {{#> table-td table-td--data-label="Workspaces"}} 5 {{/table-td}} {{#> table-td table-td--data-label="Last commit"}} 2 days ago {{/table-td}} {{#> table-td table-td--action="true"}} {{#> dropdown id=(concat table--id "-dropdown-kebab-right-aligned-2") dropdown--IsActionMenu="true" dropdown-menu--modifier="pf-m-align-right" dropdown-toggle--modifier="pf-m-plain" dropdown--HasKebabIcon="true" aria-label="Actions"}} {{/dropdown}} {{/table-td}} {{/table-tr}} {{#> table-tr}} {{#> table-td table-td--check="true"}} <input type="checkbox" name="{{table--id}}-checkrow3" aria-labelledby="{{concat table--id '-node3'}}"> {{/table-td}} {{#> table-th table-th--data-label="Repository name"}} <div> <div id="{{table--id}}-node3">Node 3</div> <a href="#">siemur/test-space</a> </div> {{/table-th}} {{#> table-td table-td--data-label="Branches"}} 10 {{/table-td}} {{#> table-td table-td--data-label="Pull requests"}} 25 {{/table-td}} {{#> table-td table-td--data-label="Workspaces"}} 5 {{/table-td}} {{#> table-td table-td--data-label="Last commit"}} 2 days ago {{/table-td}} {{#> table-td table-td--action="true"}} {{#> dropdown id=(concat table--id "-dropdown-kebab-right-aligned-3") dropdown--IsActionMenu="true" dropdown-menu--modifier="pf-m-align-right" dropdown-toggle--modifier="pf-m-plain" dropdown--HasKebabIcon="true" aria-label="Actions"}} {{/dropdown}} {{/table-td}} {{/table-tr}} {{#> table-tr}} {{#> table-td table-td--check="true"}} <input type="checkbox" name="{{table--id}}-checkrow4" aria-labelledby="{{concat table--id '-node4'}}"> {{/table-td}} {{#> table-th table-th--data-label="Repository name"}} <div> <div id="{{table--id}}-node4">Node 4</div> <a href="#">siemur/test-space</a> </div> {{/table-th}} {{#> table-td table-td--data-label="Branches"}} 10 {{/table-td}} {{#> table-td table-td--data-label="Pull requests"}} 25 {{/table-td}} {{#> table-td table-td--data-label="Workspaces"}} 5 {{/table-td}} {{#> table-td table-td--data-label="Last commit"}} 2 days ago {{/table-td}} {{#> table-td table-td--action="true"}} {{#> dropdown id=(concat table--id "-dropdown-kebab-right-aligned-4") dropdown--IsActionMenu="true" dropdown-menu--modifier="pf-m-align-right" dropdown-toggle--modifier="pf-m-plain" dropdown--HasKebabIcon="true" aria-label="Actions"}} {{/dropdown}} {{/table-td}} {{/table-tr}} {{/table-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 ```hbs {{#> table table--id="table-expandable" table--grid="true" table--modifier="pf-m-grid-lg" table--expandable="true" table--attribute='aria-label="Expandable table example"'}} {{#> table-thead}} {{#> table-tr}} {{> table-td table-td--IsEmpty="true"}} {{#> table-td table-td--check="true"}} <input type="checkbox" name="{{table--id}}-check-all" aria-label="Select all rows"> {{/table-td}} {{#> table-th table-th--attribute='scope="col"' table-th--sortable="true" table-th--modifier="pf-m-width-30" table-th--selected="true" table-th--asc="true"}} Repositories {{/table-th}} {{#> table-th table-th--attribute='scope="col"' table-th--sortable="true"}} Branches {{/table-th}} {{#> table-th table-th--attribute='scope="col"' table-th--sortable="true"}} Pull requests {{/table-th}} {{> table-td table-td--IsEmpty="true"}} {{> table-td table-td--IsEmpty="true"}} {{/table-tr}} {{/table-thead}} {{#> table-tbody table-tbody--modifier="pf-m-expanded"}} {{#> table-tr table-tr--expanded="true"}} {{#> table-td table-td--toggle="true" table-td--button--attribute=(concat 'aria-labelledby="' table--id '-node1 ' table--id '-expandable-toggle1" id="' table--id '-expandable-toggle1" aria-label="Details" aria-controls="' table--id '-content1"')}}{{/table-td}} {{#> table-td table-td--check="true"}} <input type="checkbox" name="{{table--id}}-checkrow1" aria-labelledby="{{concat table--id '-node1'}}"> {{/table-td}} {{#> table-th table-th--data-label="Repository name"}} <div> <div id="{{table--id}}-node1">Node 1</div> <a href="#">siemur/test-space</a> </div> {{/table-th}} {{#> table-td table-td--data-label="Branches"}} 10 {{/table-td}} {{#> table-td table-td--data-label="Pull requests"}} 25 {{/table-td}} {{#> table-td table-td--data-label="Action"}} <a href="#">Link 1</a> {{/table-td}} {{#> table-td table-td--action="true"}} {{#> dropdown id=(concat table--id "-dropdown-kebab-right-aligned-1") dropdown--IsActionMenu="true" dropdown-menu--modifier="pf-m-align-right" dropdown-toggle--modifier="pf-m-plain" dropdown--HasKebabIcon="true" aria-label="Actions"}} {{/dropdown}} {{/table-td}} {{/table-tr}} {{#> table-tr table-tr--expandable="true" table-tr--IsExpanded="true"}} {{> table-td table-td--IsEmpty="true"}} {{> table-td table-td--IsEmpty="true"}} {{#> table-td table-td--attribute=(concat 'colspan="4" id="' table--id '-content1"')}} {{#> 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. {{/table-expandable-row-content}} {{/table-td}} {{> table-td table-td--IsEmpty="true"}} {{/table-tr}} {{/table-tbody}} {{#> table-tbody}} {{#> table-tr}} {{#> table-td table-td--toggle="true" table-td--button--attribute=(concat 'aria-labelledby="' table--id '-node2 ' table--id '-expandable-toggle2" id="' table--id '-expandable-toggle2" aria-label="Details" aria-controls="' table--id '-content2"')}}{{/table-td}} {{#> table-td table-td--check="true"}} <input type="checkbox" name="{{table--id}}-checkrow2" aria-labelledby="{{concat table--id '-node2'}}"> {{/table-td}} {{#> table-th table-th--data-label="Repository name"}} <div> <div id="{{table--id}}-node2">Node 2</div> <a href="#">siemur/test-space</a> </div> {{/table-th}} {{#> table-td table-td--data-label="Branches"}} 10 {{/table-td}} {{#> table-td table-td--data-label="Pull requests"}} 25 {{/table-td}} {{#> table-td table-td--data-label="Action"}} <a href="#">Link 2</a> {{/table-td}} {{#> table-td table-td--action="true"}} {{#> dropdown id=(concat table--id "-dropdown-kebab-right-aligned-2") dropdown--IsActionMenu="true" dropdown-menu--modifier="pf-m-align-right" dropdown-toggle--modifier="pf-m-plain" dropdown--HasKebabIcon="true" aria-label="Actions"}} {{/dropdown}} {{/table-td}} {{/table-tr}} {{#> table-tr table-tr--expandable="true"}} {{#> table-td table-td--attribute=(concat 'colspan="7" id="' table--id '-content2"')}} {{#> 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. {{/table-expandable-row-content}} {{/table-td}} {{/table-tr}} {{/table-tbody}} {{#> table-tbody table-tbody--modifier="pf-m-expanded"}} {{#> table-tr table-tr--expanded="true"}} {{#> table-td table-td--toggle="true" table-td--button--attribute=(concat 'aria-labelledby="' table--id '-node3 expandable-toggle3" id="expandable-toggle3" aria-label="Details" aria-controls="' table--id '-content3"')}}{{/table-td}} {{#> table-td table-td--check="true"}} <input type="checkbox" name="{{table--id}}-checkrow3" aria-labelledby="{{concat table--id '-node3'}}"> {{/table-td}} {{#> table-th table-th--data-label="Repository name"}} <div> <div id="{{table--id}}-node3">Node 3</div> <a href="#">siemur/test-space</a> </div> {{/table-th}} {{#> table-td table-td--data-label="Branches"}} 10 {{/table-td}} {{#> table-td table-td--data-label="Pull requests"}} 25 {{/table-td}} {{#> table-td table-td--data-label="Action"}} <a href="#">Link 3</a> {{/table-td}} {{#> table-td table-td--action="true"}} {{#> dropdown id=(concat table--id "-dropdown-kebab-right-aligned-3") dropdown--IsActionMenu="true" dropdown-menu--modifier="pf-m-align-right" dropdown-toggle--modifier="pf-m-plain" dropdown--HasKebabIcon="true" aria-label="Actions"}} {{/dropdown}} {{/table-td}} {{/table-tr}} {{#> table-tr table-tr--expandable="true" table-tr--IsExpanded="true"}} {{#> table-td table-td--attribute=(concat 'colspan="7" id="' table--id '-content3"')}} {{#> 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. {{/table-expandable-row-content}} {{/table-td}} {{/table-tr}} {{/table-tbody}} {{#> table-tbody table-tbody--modifier="pf-m-expanded"}} {{#> table-tr table-tr--expanded="true"}} {{#> table-td table-td--toggle="true" table-td--button--attribute=(concat 'aria-labelledby="' table--id '-node4 expandable-toggle4" id="expandable-toggle4" aria-label="Details" aria-controls="' table--id '-content4"')}}{{/table-td}} {{#> table-td table-td--check="true"}} <input type="checkbox" name="{{table--id}}-checkrow4" aria-labelledby="{{concat table--id '-node4'}}"> {{/table-td}} {{#> table-th table-th--data-label="Repository name"}} <div> <div id="{{table--id}}-node4">Node 4</div> <a href="#">siemur/test-space</a> </div> {{/table-th}} {{#> table-td table-td--data-label="Branches"}} 10 {{/table-td}} {{#> table-td table-td--data-label="Pull requests"}} 25 {{/table-td}} {{#> table-td table-td--data-label="Action"}} <a href="#">Link 4</a> {{/table-td}} {{#> table-td table-td--action="true"}} {{#> dropdown id=(concat table--id "-dropdown-kebab-right-aligned-4") dropdown--IsActionMenu="true" dropdown-menu--modifier="pf-m-align-right" dropdown-toggle--modifier="pf-m-plain" dropdown--HasKebabIcon="true" aria-label="Actions"}} {{/dropdown}} {{/table-td}} {{/table-tr}} {{#> table-tr table-tr--expandable="true" table-tr--IsExpanded="true"}} {{#> table-td table-td--modifier="pf-m-no-padding" table-td--attribute=(concat 'colspan="7" id="' table--id '-content4"')}} {{#> table-expandable-row-content}} Expandable row content has no padding. {{/table-expandable-row-content}} {{/table-td}} {{/table-tr}} {{/table-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 ```hbs {{#> table table--id="table-compound-expansion" table--grid="true" table--modifier="pf-m-grid-md" table--expandable="true" table--attribute='aria-label="Compound expandable table example"'}} {{#> table-thead}} {{#> table-tr}} {{#> table-th table-th--attribute='scope="col"' table-th--sortable="true" table-th--selected="true" table-th--asc="true"}} Repositories {{/table-th}} {{#> table-th table-th--attribute='scope="col"' table-th--sortable="true"}} Branches {{/table-th}} {{#> table-th table-th--attribute='scope="col"' table-th--sortable="true"}} Pull requests {{/table-th}} {{#> table-th table-th--attribute='scope="col"'}} Workspaces {{/table-th}} {{#> table-th table-th--attribute='scope="col"'}} Last commit {{/table-th}} {{> table-td table-td--IsEmpty="true"}} {{> table-td table-td--IsEmpty="true"}} {{/table-tr}} {{/table-thead}} {{#> table-tbody table-tbody--modifier="pf-m-expanded"}} {{#> table-tr table-tr--expanded="true"}} {{#> table-td table-td--compound-expansion-toggle="true" table-td--modifier="pf-m-expanded" table-td--data-label="Repositories" table-td--button--attribute=(concat 'aria-expanded="true" aria-controls="' table--id '-nested-table-1"')}} <i class="fas fa-code-branch" aria-hidden="true"></i> 10 {{/table-td}} {{#> table-td table-td--compound-expansion-toggle="true" table-td--data-label="Branches" table-td--button--attribute=(concat 'aria-expanded="true" aria-controls="' table--id '-nested-table-2"')}} <i class="fas fa-code" aria-hidden="true"></i>  234 {{/table-td}} {{#> table-td table-td--compound-expansion-toggle="true" table-td--data-label="Pull requests" table-td--button--attribute=(concat 'aria-expanded="true" aria-controls="' table--id '-nested-table-3"')}} <i class="fas fa-cube" aria-hidden="true"></i>  4 {{/table-td}} {{#> table-th table-th--data-label="Workspaces"}} <a href="#">siemur/test-space</a> {{/table-th}} {{#> table-td table-td--data-label="Last commit"}} <span>20 minutes</span> {{/table-td}} {{#> table-td table-td--data-label="Action"}} <a href="#">Open in Github</a> {{/table-td}} {{#> table-td table-td--action="true"}} {{#> dropdown id=(concat table--id "-dropdown-kebab-right-aligned-1") dropdown--IsActionMenu="true" dropdown-menu--modifier="pf-m-align-right" dropdown-toggle--modifier="pf-m-plain" dropdown--HasKebabIcon="true" aria-label="Actions"}} {{/dropdown}} {{/table-td}} {{/table-tr}} {{#> table-tr table-tr--expandable="true" table-tr--IsExpanded="true"}} {{#> table-td table-td--attribute='colspan="7"' table-td--modifier="pf-m-no-padding"}} {{#> table-nested table--id=(concat table--id '-nested-table-1')}} {{/table-nested}} {{/table-td}} {{/table-tr}} {{#> table-tr table-tr--expandable="true"}} {{#> table-td table-td--attribute='colspan="7"' table-td--modifier="pf-m-no-padding"}} {{#> table-nested table--id=(concat table--id '-nested-table-2')}} {{/table-nested}} {{/table-td}} {{/table-tr}} {{#> table-tr table-tr--expandable="true"}} {{#> table-td table-td--attribute='colspan="7"' table-td--modifier="pf-m-no-padding"}} {{#> table-nested table--id=(concat table--id '-nested-table-3')}} {{/table-nested}} {{/table-td}} {{/table-tr}} {{/table-tbody}} {{#> table-tbody}} {{#> table-tr}} {{#> table-td table-td--compound-expansion-toggle="true" table-td--data-label="Repositories" table-td--button--attribute=(concat 'aria-expanded="true" aria-controls="' table--id '-nested-table-4"')}} <i class="fas fa-code-branch" aria-hidden="true"></i>  2 {{/table-td}} {{#> table-td table-td--compound-expansion-toggle="true" table-td--data-label="Branches" table-td--button--attribute=(concat 'aria-expanded="true" aria-controls="' table--id '-nested-table-5"')}} <i class="fas fa-code" aria-hidden="true"></i>  82 {{/table-td}} {{#> table-td table-td--compound-expansion-toggle="true" table-td--data-label="Pull requests" table-td--button--attribute=(concat 'aria-expanded="true" aria-controls="' table--id '-nested-table-6"')}} <i class="fas fa-cube" aria-hidden="true"></i>  1 {{/table-td}} {{#> table-th table-th--data-label="Workspaces"}} <a href="#">siemur/test-space</a> {{/table-th}} {{#> table-td table-td--data-label="Last commit"}} <span>1 day ago</span> {{/table-td}} {{#> table-td table-td--data-label="Action"}} <a href="#">Open in Github</a> {{/table-td}} {{#> table-td table-td--action="true"}} {{#> dropdown id=(concat table--id "-dropdown-kebab-right-aligned-2") dropdown--IsActionMenu="true" dropdown-menu--modifier="pf-m-align-right" dropdown-toggle--modifier="pf-m-plain" dropdown--HasKebabIcon="true" aria-label="Actions"}} {{/dropdown}} {{/table-td}} {{/table-tr}} {{#> table-tr table-tr--expandable="true"}} {{#> table-td table-td--attribute='colspan="7"' table-td--modifier="pf-m-no-padding"}} {{#> table-nested table--id=(concat table--id '-nested-table-4')}} {{/table-nested}} {{/table-td}} {{/table-tr}} {{#> table-tr table-tr--expandable="true"}} {{#> table-td table-td--attribute='colspan="7"' table-td--modifier="pf-m-no-padding"}} {{#> table-nested table--id=(concat table--id '-nested-table-5')}} {{/table-nested}} {{/table-td}} {{/table-tr}} {{#> table-tr table-tr--expandable="true"}} {{#> table-td table-td--attribute='colspan="7"' table-td--modifier="pf-m-no-padding"}} {{#> table-nested table--id=(concat table--id '-nested-table-6')}} {{/table-nested}} {{/table-td}} {{/table-tr}} {{/table-tbody}} {{#> table-tbody}} {{#> table-tr}} {{#> table-td table-td--compound-expansion-toggle="true" table-td--data-label="Repositories" table-td--button--attribute=(concat 'aria-expanded="true" aria-controls="' table--id '-nested-table-7"')}} <i class="fas fa-code-branch" aria-hidden="true"></i>  4 {{/table-td}} {{#> table-td table-td--compound-expansion-toggle="true" table-td--data-label="Branches" table-td--button--attribute=(concat 'aria-expanded="true" aria-controls="' table--id '-nested-table-8"')}} <i class="fas fa-code" aria-hidden="true"></i>  4 {{/table-td}} {{#> table-td table-td--compound-expansion-toggle="true" table-td--data-label="Pull requests" table-td--button--attribute=(concat 'aria-expanded="true" aria-controls="' table--id '-nested-table-9"')}} <i class="fas fa-cube" aria-hidden="true"></i>  1 {{/table-td}} {{#> table-th table-th--data-label="Workspaces"}} <a href="#">siemur/test-space</a> {{/table-th}} {{#> table-td table-td--data-label="Last commit"}} <span>2 days ago</span> {{/table-td}} {{#> table-td table-td--data-label="Action"}} <a href="#">Open in Github</a> {{/table-td}} {{#> table-td table-td--action="true"}} {{#> dropdown id=(concat table--id "-dropdown-kebab-right-aligned-3") dropdown--IsActionMenu="true" dropdown-menu--modifier="pf-m-align-right" dropdown-toggle--modifier="pf-m-plain" dropdown--HasKebabIcon="true" aria-label="Actions"}} {{/dropdown}} {{/table-td}} {{/table-tr}} {{#> table-tr table-tr--expandable="true"}} {{#> table-td table-td--attribute='colspan="7"' table-td--modifier="pf-m-no-padding"}} {{#> table-nested table--id=(concat table--id '-nested-table-7')}} {{/table-nested}} {{/table-td}} {{/table-tr}} {{#> table-tr table-tr--expandable="true"}} {{#> table-td table-td--attribute='colspan="7"' table-td--modifier="pf-m-no-padding"}} {{#> table-nested table--id=(concat table--id '-nested-table-8')}} {{/table-nested}} {{/table-td}} {{/table-tr}} {{#> table-tr table-tr--expandable="true"}} {{#> table-td table-td--attribute='colspan="7"' table-td--modifier="pf-m-no-padding"}} {{#> table-nested table--id=(concat table--id '-nested-table-9')}} {{/table-nested}} {{/table-td}} {{/table-tr}} {{/table-tbody}} {{/table}} ``` ### 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__compound-expansion-toggle` > `.pf-c-button` | Indicates that the row is visible. **Required**| | `aria-controls="[id of element the button controls]"` | `.pf-c-table__compound-expansion-toggle` > `.pf-c-button` | Identifies the expanded content controlled by the toggle button. **Required** | ### Usage | Class | Applied to | Outcome | | -- | -- | -- | | `.pf-m-expanded` | `<tbody>`, `.pf-c-table__compound-expansion-toggle` > `.pf-c-button` | Modifies a tbody with a row and an expandable row. | | `.pf-c-table__compound-expansion-toggle` | `<td>` | Modifies a `<td>` on active/focus. | ### Compact ```hbs {{#> table table--id="table-compact" table--grid="true" table--modifier="pf-m-compact pf-m-grid-md" table--attribute='aria-label="This is a compact table example"'}} {{#> table-thead}} {{#> table-tr}} {{#> table-td table-td--check="true"}} <input type="checkbox" name="{{table--id}}-check-all" aria-label="Select all rows"> {{/table-td}} {{#> table-th table-th--attribute='scope="col"'}} Contributor {{/table-th}} {{#> table-th table-th--attribute='scope="col"'}} Position {{/table-th}} {{#> table-th table-th--attribute='scope="col"'}} Location {{/table-th}} {{#> table-th table-th--attribute='scope="col"'}} Last seen {{/table-th}} {{#> table-th table-th--attribute='scope="col"'}} Numbers {{/table-th}} {{#> table-th table-th--attribute='scope="col"' table-th--icon="true"}} Icons {{/table-th}} {{> table-td table-td--IsEmpty="true"}} {{> table-td table-td--IsEmpty="true"}} {{/table-tr}} {{/table-thead}} {{#> table-tbody}} {{#> table-tr}} {{#> table-td table-td--check="true"}} <input type="checkbox" name="{{table--id}}-checkrow1" aria-labelledby="{{concat table--id "-name1"}}"> {{/table-td}} {{#> table-th table-th--data-label="Contributor"}} <span id="{{concat table--id "-name1"}}">Sam Jones</span> {{/table-th}} {{#> table-td table-td--data-label="Position"}} CSS guru {{/table-td}} {{#> table-td table-td--data-label="Location"}} Not too sure {{/table-td}} {{#> table-td table-td--data-label="Last seen"}} May 9, 2018 {{/table-td}} {{#> table-td table-td--data-label="Numbers"}} 0556 {{/table-td}} {{#> table-td table-td--data-label="Icon" table-td--icon="true"}} <i class="fas fa-check"></i> {{/table-td}} {{#> table-td table-td--data-label="Action"}} <a href="#">Action link</a> {{/table-td}} {{#> table-td table-td--action="true"}} {{#> dropdown id=(concat table--id "-dropdown-kebab-right-aligned-1") dropdown--IsActionMenu="true" dropdown-menu--modifier="pf-m-align-right" dropdown-toggle--modifier="pf-m-plain" dropdown--HasKebabIcon="true" aria-label="Actions"}} {{/dropdown}} {{/table-td}} {{/table-tr}} {{#> table-tr}} {{#> table-td table-td--check="true"}} <input type="checkbox" name="{{table--id}}-checkrow2" aria-labelledby="{{concat table--id "-name2"}}"> {{/table-td}} {{#> table-th table-th--data-label="Contributor"}} <span id="{{concat table--id "-name2"}}">Amy Miller</span> {{/table-th}} {{#> table-td table-td--data-label="Position"}} Visual design {{/table-td}} {{#> table-td table-td--data-label="Location"}} Raleigh {{/table-td}} {{#> table-td table-td--data-label="Last seen"}} May 9, 2018 {{/table-td}} {{#> table-td table-td--data-label="Numbers"}} 9492 {{/table-td}} {{#> table-td table-td--data-label="Icon" table-td--icon="true"}} <i class="fas fa-check"></i> {{/table-td}} {{#> table-td table-td--data-label="Action"}} <a href="#">Action link</a> {{/table-td}} {{#> table-td table-td--action="true"}} {{#> dropdown id=(concat table--id "-dropdown-kebab-right-aligned-2") dropdown--IsActionMenu="true" dropdown-menu--modifier="pf-m-align-right" dropdown-toggle--modifier="pf-m-plain" dropdown--HasKebabIcon="true" aria-label="Actions"}} {{/dropdown}} {{/table-td}} {{/table-tr}} {{#> table-tr}} {{#> table-td table-td--check="true"}} <input type="checkbox" name="{{table--id}}-checkrow3" aria-labelledby="{{concat table--id "-name3"}}"> {{/table-td}} {{#> table-th table-th--data-label="Contributor"}} <span id="{{concat table--id "-name3"}}">Steve Wilson</span> {{/table-th}} {{#> table-td table-td--data-label="Position"}} Visual design lead {{/table-td}} {{#> table-td table-td--data-label="Location"}} Westford {{/table-td}} {{#> table-td table-td--data-label="Last seen"}} May 9, 2018 {{/table-td}} {{#> table-td table-td--data-label="Numbers"}} 9929 {{/table-td}} {{#> table-td table-td--data-label="Icon" table-td--icon="true"}} <i class="fas fa-check"></i> {{/table-td}} {{#> table-td table-td--data-label="Action"}} <a href="#">Action link</a> {{/table-td}} {{#> table-td table-td--action="true"}} {{#> dropdown id=(concat table--id "-dropdown-kebab-right-aligned-3") dropdown--IsActionMenu="true" dropdown-menu--modifier="pf-m-align-right" dropdown-toggle--modifier="pf-m-plain" dropdown--HasKebabIcon="true" aria-label="Actions"}} {{/dropdown}} {{/table-td}} {{/table-tr}} {{#> table-tr}} {{#> table-td table-td--check="true"}} <input type="checkbox" name="{{table--id}}-checkrow4" aria-labelledby="{{concat table--id "-name4"}}"> {{/table-td}} {{#> table-th table-th--data-label="Contributor name"}} <span id="{{concat table--id "-name4"}}">Emma Jackson</span> {{/table-th}} {{#> table-td table-td--data-label="Position"}} Interaction design {{/table-td}} {{#> table-td table-td--data-label="Location"}} Westford {{/table-td}} {{#> table-td table-td--data-label="Workspaces"}} May 9, 2018 {{/table-td}} {{#> table-td table-td--data-label="Last commit"}} 2217 {{/table-td}} {{#> table-td table-td--data-label="Icon" table-td--icon="true"}} <i class="fas fa-check"></i> {{/table-td}} {{#> table-td table-td--data-label="Action"}} <a href="#">Action link</a> {{/table-td}} {{#> table-td table-td--action="true"}} {{#> dropdown id=(concat table--id "-dropdown-kebab-right-aligned-4") dropdown--IsActionMenu="true" dropdown-menu--modifier="pf-m-align-right" dropdown-toggle--modifier="pf-m-plain" dropdown--HasKebabIcon="true" aria-label="Actions"}} {{/dropdown}} {{/table-td}} {{/table-tr}} {{/table-tbody}} {{/table}} ``` ### Usage | Class | Applied to | Outcome | | -- | -- | -- | | `.pf-m-compact` | `.pf-c-table` | Modifies for a compact table. | ### Compact with no borders ```hbs {{#> table table--id="table-compact-no-borders" table--grid="true" table--modifier="pf-m-compact pf-m-grid-md pf-m-no-border-rows" table--attribute='aria-label="This is a compact table with border rows example"'}} {{#> table-thead}} {{#> table-tr}} {{#> table-td table-td--check="true"}} <input type="checkbox" name="{{table--id}}-check-all" aria-label="Select all rows"> {{/table-td}} {{#> table-th table-th--attribute='scope="col"'}} Contributor {{/table-th}} {{#> table-th table-th--attribute='scope="col"'}} Position {{/table-th}} {{#> table-th table-th--attribute='scope="col"'}} Location {{/table-th}} {{#> table-th table-th--attribute='scope="col"'}} Last seen {{/table-th}} {{#> table-th table-th--attribute='scope="col"'}} Numbers {{/table-th}} {{#> table-th table-th--attribute='scope="col"' table-th--icon="true"}} Icons {{/table-th}} {{> table-td table-td--IsEmpty="true"}} {{> table-td table-td--IsEmpty="true"}} {{/table-tr}} {{/table-thead}} {{#> table-tbody}} {{#> table-tr}} {{#> table-td table-td--check="true"}} <input type="checkbox" name="{{table--id}}-checkrow1" aria-labelledby="{{concat table--id "-name1"}}"> {{/table-td}} {{#> table-th table-th--data-label="Contributor"}} <span id="{{concat table--id "-name1"}}">Sam Jones</span> {{/table-th}} {{#> table-td table-td--data-label="Position"}} CSS guru {{/table-td}} {{#> table-td table-td--data-label="Location"}} Not too sure {{/table-td}} {{#> table-td table-td--data-label="Last seen"}} May 9, 2018 {{/table-td}} {{#> table-td table-td--data-label="Numbers"}} 0556 {{/table-td}} {{#> table-td table-td--data-label="Icon" table-td--icon="true"}} <i class="fas fa-check"></i> {{/table-td}} {{#> table-td table-td--data-label="Action"}} <a href="#">Action link</a> {{/table-td}} {{#> table-td table-td--action="true"}} {{#> dropdown id=(concat table--id "-dropdown-kebab-right-aligned-1") dropdown--IsActionMenu="true" dropdown-menu--modifier="pf-m-align-right" dropdown-toggle--modifier="pf-m-plain" dropdown--HasKebabIcon="true" aria-label="Actions"}} {{/dropdown}} {{/table-td}} {{/table-tr}} {{#> table-tr}} {{#> table-td table-td--check="true"}} <input type="checkbox" name="{{table--id}}-checkrow2" aria-labelledby="{{concat table--id "-name2"}}"> {{/table-td}} {{#> table-th table-th--data-label="Contributor"}} <span id="{{concat table--id "-name2"}}">Amy Miller</span> {{/table-th}} {{#> table-td table-td--data-label="Position"}} Visual design {{/table-td}} {{#> table-td table-td--data-label="Location"}} Raleigh {{/table-td}} {{#> table-td table-td--data-label="Last seen"}} May 9, 2018 {{/table-td}} {{#> table-td table-td--data-label="Numbers"}} 9492 {{/table-td}} {{#> table-td table-td--data-label="Icon" table-td--icon="true"}} <i class="fas fa-check"></i> {{/table-td}} {{#> table-td table-td--data-label="Action"}} <a href="#">Action link</a> {{/table-td}} {{#> table-td table-td--action="true"}} {{#> dropdown id=(concat table--id "-dropdown-kebab-right-aligned-2") dropdown--IsActionMenu="true" dropdown-menu--modifier="pf-m-align-right" dropdown-toggle--modifier="pf-m-plain" dropdown--HasKebabIcon="true" aria-label="Actions"}} {{/dropdown}} {{/table-td}} {{/table-tr}} {{#> table-tr}} {{#> table-td table-td--check="true"}} <input type="checkbox" name="{{table--id}}-checkrow3" aria-labelledby="{{concat table--id "-name3"}}"> {{/table-td}} {{#> table-th table-th--data-label="Contributor"}} <span id="{{concat table--id "-name3"}}">Steve Wilson</span> {{/table-th}} {{#> table-td table-td--data-label="Position"}} Visual design lead {{/table-td}} {{#> table-td table-td--data-label="Location"}} Westford {{/table-td}} {{#> table-td table-td--data-label="Last seen"}} May 9, 2018 {{/table-td}} {{#> table-td table-td--data-label="Numbers"}} 9929 {{/table-td}} {{#> table-td table-td--data-label="Icon" table-td--icon="true"}} <i class="fas fa-check"></i> {{/table-td}} {{#> table-td table-td--data-label="Action"}} <a href="#">Action link</a> {{/table-td}} {{#> table-td table-td--action="true"}} {{#> dropdown id=(concat table--id "-dropdown-kebab-right-aligned-3") dropdown--IsActionMenu="true" dropdown-menu--modifier="pf-m-align-right" dropdown-toggle--modifier="pf-m-plain" dropdown--HasKebabIcon="true" aria-label="Actions"}} {{/dropdown}} {{/table-td}} {{/table-tr}} {{#> table-tr}} {{#> table-td table-td--check="true"}} <input type="checkbox" name="{{table--id}}-checkrow4" aria-labelledby="{{concat table--id "-name4"}}"> {{/table-td}} {{#> table-th table-th--data-label="Contributor name"}} <span id="{{concat table--id "-name4"}}">Emma Jackson</span> {{/table-th}} {{#> table-td table-td--data-label="Position"}} Interaction design {{/table-td}} {{#> table-td table-td--data-label="Location"}} Westford {{/table-td}} {{#> table-td table-td--data-label="Workspaces"}} May 9, 2018 {{/table-td}} {{#> table-td table-td--data-label="Last commit"}} 2217 {{/table-td}} {{#> table-td table-td--data-label="Icon" table-td--icon="true"}} <i class="fas fa-check"></i> {{/table-td}} {{#> table-td table-td--data-label="Action"}} <a href="#">Action link</a> {{/table-td}} {{#> table-td table-td--action="true"}} {{#> dropdown id=(concat table--id "-dropdown-kebab-right-aligned-4") dropdown--IsActionMenu="true" dropdown-menu--modifier="pf-m-align-right" dropdown-toggle--modifier="pf-m-plain" dropdown--HasKebabIcon="true" aria-label="Actions"}} {{/dropdown}} {{/table-td}} {{/table-tr}} {{/table-tbody}} {{/table}} ``` ### Usage | Class | Applied to | Outcome | | -- | -- | -- | | `.pf-m-no-border-rows` | `.pf-c-table.pf-m-compact` | Modifies to remove borders between rows. **Note: Can not be used with `.pf-m-expandable`.** | ### Compact expandable ```hbs {{#> table table--id="table-compact-expandable" table--grid="true" table--modifier="pf-m-compact pf-m-grid-md" table--expandable="true" table--attribute='aria-label="Compact expandable table example"'}} {{#> table-thead}} {{#> table-tr}} {{> table-td table-td--IsEmpty="true"}} {{#> table-td table-td--check="true"}} <input type="checkbox" name="{{table--id}}-check-all" aria-label="Select all rows"> {{/table-td}} {{#> table-th table-th--attribute='scope="col"' table-th--modifier="pf-m-width-30"}} Repositories {{/table-th}} {{#> table-th table-th--attribute='scope="col"'}} Branches {{/table-th}} {{#> table-th table-th--attribute='scope="col"'}} Pull requests {{/table-th}} {{> table-td table-td--IsEmpty="true"}} {{> table-td table-td--IsEmpty="true"}} {{/table-tr}} {{/table-thead}} {{#> table-tbody table-tbody--modifier="pf-m-expanded"}} {{#> table-tr table-tr--expanded="true"}} {{#> table-td table-td--toggle="true" table-td--button--attribute=(concat 'aria-labelledby="' table--id '-node1 ' table--id '-expandable-toggle1" id="' tabl