@patternfly/patternfly 5.0.0-alpha.36 → 5.0.0-alpha.38

package/docs/components/Table/examples/Table.md

@@ -7195,16 +7195,16 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
 | -- | -- | -- |
 | `.pf-m-compact` | `.pf-c-table` | Modifies for a compact table. |
 
-## Hoverable and selected
+## Clickable
 
-### Hoverable and selected example
+### Clickable example
 
 ```html
 <table
   class="pf-c-table pf-m-grid-lg"
   role="grid"
-  aria-label="Hoverable and selectable table example"
-  id="table-hoverable"
+  aria-label="Clickable and selectable table example"
+  id="table-clickable"
 >
   <thead>
     <tr role="row">
@@ -7214,7 +7214,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
             <input
               class="pf-c-check__input"
               type="checkbox"
-              name="table-hoverable-checkrowthead"
+              name="table-clickable-checkrowthead"
               aria-label="Select all rows"
             />
           </div>
@@ -7238,27 +7238,27 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
       <td></td>
     </tr>
   </thead>
-  <tr class="pf-m-hoverable" role="row" tabindex="0">
+  <tr class="pf-m-clickable" role="row" tabindex="0">
     <td class="pf-c-table__check" role="cell">
       <label>
         <div class="pf-c-check pf-m-standalone">
           <input
             class="pf-c-check__input"
             type="checkbox"
-            name="table-hoverable-checkrow1"
-            aria-labelledby="table-hoverable-node1"
+            name="table-clickable-checkrow1"
+            aria-labelledby="table-clickable-node1"
           />
         </div>
       </label>
     </td>
     <th role="columnheader" data-label="Repository name">
-      <div id="table-hoverable-node1">Hoverable</div>
+      <div id="table-clickable-node1">Clickable</div>
     </th>
     <td class="pf-c-table__action" role="cell">
       <div class="pf-c-dropdown">
         <button
           class="pf-c-dropdown__toggle pf-m-plain"
-          id="table-hoverable-dropdown-kebab-selectable-1-button"
+          id="table-clickable-dropdown-kebab-selectable-1-button"
           aria-expanded="false"
           type="button"
           aria-label="Actions"
@@ -7267,7 +7267,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         </button>
         <ul
           class="pf-c-dropdown__menu pf-m-align-right"
-          aria-labelledby="table-hoverable-dropdown-kebab-selectable-1-button"
+          aria-labelledby="table-clickable-dropdown-kebab-selectable-1-button"
           hidden
         >
           <li>
@@ -7299,29 +7299,29 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
       </div>
     </td>
   </tr>
-  <tr class="pf-m-hoverable pf-m-selected" role="row" tabindex="0">
+  <tr class="pf-m-clickable pf-m-selected" role="row" tabindex="0">
     <td class="pf-c-table__check" role="cell">
       <label>
         <div class="pf-c-check pf-m-standalone">
           <input
             class="pf-c-check__input"
             type="checkbox"
-            name="table-hoverable-checkrow2"
-            aria-labelledby="table-hoverable-node2"
+            name="table-clickable-checkrow2"
+            aria-labelledby="table-clickable-node2"
           />
         </div>
       </label>
     </td>
     <th role="columnheader" data-label="Repository name">
-      <div id="table-hoverable-node2">
-        <b>Selected</b>
+      <div id="table-clickable-node2">
+        <b>Clicked</b>
       </div>
     </th>
     <td class="pf-c-table__action" role="cell">
       <div class="pf-c-dropdown">
         <button
           class="pf-c-dropdown__toggle pf-m-plain"
-          id="table-hoverable-dropdown-kebab-selectable-2-button"
+          id="table-clickable-dropdown-kebab-selectable-2-button"
           aria-expanded="false"
           type="button"
           aria-label="Actions"
@@ -7330,7 +7330,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         </button>
         <ul
           class="pf-c-dropdown__menu pf-m-align-right"
-          aria-labelledby="table-hoverable-dropdown-kebab-selectable-2-button"
+          aria-labelledby="table-clickable-dropdown-kebab-selectable-2-button"
           hidden
         >
           <li>
@@ -7362,27 +7362,27 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
       </div>
     </td>
   </tr>
-  <tr class="pf-m-hoverable" role="row" tabindex="0">
+  <tr class="pf-m-clickable" role="row" tabindex="0">
     <td class="pf-c-table__check" role="cell">
       <label>
         <div class="pf-c-check pf-m-standalone">
           <input
             class="pf-c-check__input"
             type="checkbox"
-            name="table-hoverable-checkrow3"
-            aria-labelledby="table-hoverable-node3"
+            name="table-clickable-checkrow3"
+            aria-labelledby="table-clickable-node3"
           />
         </div>
       </label>
     </td>
     <th role="columnheader" data-label="Repository name">
-      <div id="table-hoverable-node3">Hoverable</div>
+      <div id="table-clickable-node3">Clickable</div>
     </th>
     <td class="pf-c-table__action" role="cell">
       <div class="pf-c-dropdown">
         <button
           class="pf-c-dropdown__toggle pf-m-plain"
-          id="table-hoverable-dropdown-kebab-selectable-3-button"
+          id="table-clickable-dropdown-kebab-selectable-3-button"
           aria-expanded="false"
           type="button"
           aria-label="Actions"
@@ -7391,7 +7391,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         </button>
         <ul
           class="pf-c-dropdown__menu pf-m-align-right"
-          aria-labelledby="table-hoverable-dropdown-kebab-selectable-3-button"
+          aria-labelledby="table-clickable-dropdown-kebab-selectable-3-button"
           hidden
         >
           <li>
@@ -7423,2088 +7423,92 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
       </div>
     </td>
   </tr>
-  <tr class="pf-m-hoverable" role="row" tabindex="0">
-    <td class="pf-c-table__check" role="cell">
-      <label>
-        <div class="pf-c-check pf-m-standalone">
-          <input
-            class="pf-c-check__input"
-            type="checkbox"
-            name="table-hoverable-checkrow4"
-            aria-labelledby="table-hoverable-node4"
-          />
-        </div>
-      </label>
-    </td>
-    <th role="columnheader" data-label="Repository name">
-      <div id="table-hoverable-node4">Hoverable</div>
-    </th>
-    <td class="pf-c-table__action" role="cell">
-      <div class="pf-c-dropdown">
-        <button
-          class="pf-c-dropdown__toggle pf-m-plain"
-          id="table-hoverable-dropdown-kebab-selectable-4-button"
-          aria-expanded="false"
-          type="button"
-          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-hoverable-dropdown-kebab-selectable-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-m-hoverable pf-m-selected" role="row" tabindex="0">
-    <td class="pf-c-table__check" role="cell">
-      <label>
-        <div class="pf-c-check pf-m-standalone">
-          <input
-            class="pf-c-check__input"
-            type="checkbox"
-            name="table-hoverable-checkrow5"
-            aria-labelledby="table-hoverable-node5"
-          />
-        </div>
-      </label>
-    </td>
-    <th role="columnheader" data-label="Repository name">
-      <div id="table-hoverable-node5">
-        <b>Selected</b>
-      </div>
-    </th>
-    <td class="pf-c-table__action" role="cell">
-      <div class="pf-c-dropdown">
-        <button
-          class="pf-c-dropdown__toggle pf-m-plain"
-          id="table-hoverable-dropdown-kebab-selectable-5-button"
-          aria-expanded="false"
-          type="button"
-          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-hoverable-dropdown-kebab-selectable-5-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-m-hoverable pf-m-selected" role="row" tabindex="0">
-    <td class="pf-c-table__check" role="cell">
-      <label>
-        <div class="pf-c-check pf-m-standalone">
-          <input
-            class="pf-c-check__input"
-            type="checkbox"
-            name="table-hoverable-checkrow6"
-            aria-labelledby="table-hoverable-node6"
-          />
-        </div>
-      </label>
-    </td>
-    <th role="columnheader" data-label="Repository name">
-      <div id="table-hoverable-node6">
-        <b>Selected</b>
-      </div>
-    </th>
-    <td class="pf-c-table__action" role="cell">
-      <div class="pf-c-dropdown">
-        <button
-          class="pf-c-dropdown__toggle pf-m-plain"
-          id="table-hoverable-dropdown-kebab-selectable-6-button"
-          aria-expanded="false"
-          type="button"
-          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-hoverable-dropdown-kebab-selectable-6-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-m-hoverable pf-m-selected" role="row" tabindex="0">
-    <td class="pf-c-table__check" role="cell">
-      <label>
-        <div class="pf-c-check pf-m-standalone">
-          <input
-            class="pf-c-check__input"
-            type="checkbox"
-            name="table-hoverable-checkrow7"
-            aria-labelledby="table-hoverable-node7"
-          />
-        </div>
-      </label>
-    </td>
-    <th role="columnheader" data-label="Repository name">
-      <div id="table-hoverable-node7">
-        <b>Selected</b>
-      </div>
-    </th>
-    <td class="pf-c-table__action" role="cell">
-      <div class="pf-c-dropdown">
-        <button
-          class="pf-c-dropdown__toggle pf-m-plain"
-          id="table-hoverable-dropdown-kebab-selectable-7-button"
-          aria-expanded="false"
-          type="button"
-          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-hoverable-dropdown-kebab-selectable-7-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-m-hoverable" role="row" tabindex="0">
-    <td class="pf-c-table__check" role="cell">
-      <label>
-        <div class="pf-c-check pf-m-standalone">
-          <input
-            class="pf-c-check__input"
-            type="checkbox"
-            name="table-hoverable-checkrow8"
-            aria-labelledby="table-hoverable-node8"
-          />
-        </div>
-      </label>
-    </td>
-    <th role="columnheader" data-label="Repository name">
-      <div id="table-hoverable-node8">Hoverable</div>
-    </th>
-    <td class="pf-c-table__action" role="cell">
-      <div class="pf-c-dropdown">
-        <button
-          class="pf-c-dropdown__toggle pf-m-plain"
-          id="table-hoverable-dropdown-kebab-selectable-8-button"
-          aria-expanded="false"
-          type="button"
-          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-hoverable-dropdown-kebab-selectable-8-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-m-hoverable" role="row" tabindex="0">
-    <td class="pf-c-table__check" role="cell">
-      <label>
-        <div class="pf-c-check pf-m-standalone">
-          <input
-            class="pf-c-check__input"
-            type="checkbox"
-            name="table-hoverable-checkrow9"
-            aria-labelledby="table-hoverable-node9"
-          />
-        </div>
-      </label>
-    </td>
-    <th role="columnheader" data-label="Repository name">
-      <div id="table-hoverable-node9">Hoverable</div>
-    </th>
-    <td class="pf-c-table__action" role="cell">
-      <div class="pf-c-dropdown">
-        <button
-          class="pf-c-dropdown__toggle pf-m-plain"
-          id="table-hoverable-dropdown-kebab-selectable-9-button"
-          aria-expanded="false"
-          type="button"
-          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-hoverable-dropdown-kebab-selectable-9-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-m-hoverable pf-m-selected" role="row" tabindex="0">
-    <td class="pf-c-table__check" role="cell">
-      <label>
-        <div class="pf-c-check pf-m-standalone">
-          <input
-            class="pf-c-check__input"
-            type="checkbox"
-            name="table-hoverable-checkrow10"
-            aria-labelledby="table-hoverable-node10"
-          />
-        </div>
-      </label>
-    </td>
-    <th role="columnheader" data-label="Repository name">
-      <div id="table-hoverable-node10">
-        <b>Selected</b>
-      </div>
-    </th>
-    <td class="pf-c-table__action" role="cell">
-      <div class="pf-c-dropdown">
-        <button
-          class="pf-c-dropdown__toggle pf-m-plain"
-          id="table-hoverable-dropdown-kebab-selectable-10-button"
-          aria-expanded="false"
-          type="button"
-          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-hoverable-dropdown-kebab-selectable-10-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-m-hoverable" role="row" tabindex="0">
-    <td class="pf-c-table__check" role="cell">
-      <label>
-        <div class="pf-c-check pf-m-standalone">
-          <input
-            class="pf-c-check__input"
-            type="checkbox"
-            name="table-hoverable-checkrow11"
-            aria-labelledby="table-hoverable-node11"
-          />
-        </div>
-      </label>
-    </td>
-    <th role="columnheader" data-label="Repository name">
-      <div id="table-hoverable-node11">Hoverable</div>
-    </th>
-    <td class="pf-c-table__action" role="cell">
-      <div class="pf-c-dropdown">
-        <button
-          class="pf-c-dropdown__toggle pf-m-plain"
-          id="table-hoverable-dropdown-kebab-selectable-11-button"
-          aria-expanded="false"
-          type="button"
-          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-hoverable-dropdown-kebab-selectable-11-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>
-</table>
-
-```
-
-### Expandable, hoverable, and selected example
-
-```html
-<table
-  class="pf-c-table pf-m-expandable pf-m-grid-lg"
-  role="grid"
-  aria-label="Expandable and hoverable table example"
-  id="table-expandable-hoverable"
->
-  <thead>
-    <tr role="row">
-      <td></td>
-      <td class="pf-c-table__check" role="cell">
-        <label>
-          <div class="pf-c-check pf-m-standalone">
-            <input
-              class="pf-c-check__input"
-              type="checkbox"
-              name="table-expandable-hoverable-checkrowthead"
-              aria-label="Select all rows"
-            />
-          </div>
-        </label>
-      </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-hoverable" role="rowgroup" tabindex="0">
-    <tr class="pf-m-expanded" role="row">
-      <td class="pf-c-table__toggle" role="cell">
-        <button
-          class="pf-c-button pf-m-plain"
-          aria-labelledby="table-expandable-hoverable-node1 table-expandable-hoverable-expandable-toggle1"
-          id="table-expandable-hoverable-expandable-toggle1"
-          aria-label="Details"
-          aria-controls="table-expandable-hoverable-content1"
-        >
-          <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">
-        <label>
-          <div class="pf-c-check pf-m-standalone">
-            <input
-              class="pf-c-check__input"
-              type="checkbox"
-              name="table-expandable-hoverable-checkrow1"
-              aria-labelledby="table-expandable-hoverable-node1"
-            />
-          </div>
-        </label>
-      </td>
-      <th role="columnheader" data-label="Repository name">
-        <div>
-          <div id="table-expandable-hoverable-node1">Hoverable</div>
-        </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"
-            id="table-expandable-hoverable-dropdown-kebab-1-button"
-            aria-expanded="false"
-            type="button"
-            aria-label="Actions"
-          >
-            <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
-          </button>
-          <ul
-            class="pf-c-dropdown__menu pf-m-align-right"
-            aria-labelledby="table-expandable-hoverable-dropdown-kebab-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" role="row">
-      <td></td>
-      <td></td>
-      <td
-        class
-        role="cell"
-        colspan="4"
-        id="table-expandable-hoverable-content1"
-      >
-        <div class="pf-c-table__expandable-row-content">Expandable content</div>
-      </td>
-      <td></td>
-    </tr>
-  </tbody>
-  <tbody class="pf-m-hoverable pf-m-selected" role="rowgroup" tabindex="0">
-    <tr class="pf-m-expanded" role="row">
-      <td class="pf-c-table__toggle" role="cell">
-        <button
-          class="pf-c-button pf-m-plain"
-          aria-labelledby="table-expandable-hoverable-node2 table-expandable-hoverable-expandable-toggle2"
-          id="table-expandable-hoverable-expandable-toggle2"
-          aria-label="Details"
-          aria-controls="table-expandable-hoverable-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">
-        <label>
-          <div class="pf-c-check pf-m-standalone">
-            <input
-              class="pf-c-check__input"
-              type="checkbox"
-              name="table-expandable-hoverable-checkrow2"
-              aria-labelledby="table-expandable-hoverable-node2"
-            />
-          </div>
-        </label>
-      </td>
-      <th role="columnheader" data-label="Repository name">
-        <div>
-          <div id="table-expandable-hoverable-node2">
-            <i>Selected and not expanded</i>
-          </div>
-        </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"
-            id="table-expandable-hoverable-dropdown-kebab-2-button"
-            aria-expanded="false"
-            type="button"
-            aria-label="Actions"
-          >
-            <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
-          </button>
-          <ul
-            class="pf-c-dropdown__menu pf-m-align-right"
-            aria-labelledby="table-expandable-hoverable-dropdown-kebab-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></td>
-      <td></td>
-      <td
-        class
-        role="cell"
-        colspan="4"
-        id="table-expandable-hoverable-content2"
-      >
-        <div class="pf-c-table__expandable-row-content">Expandable content</div>
-      </td>
-      <td></td>
-    </tr>
-  </tbody>
-  <tbody class="pf-m-hoverable" role="rowgroup" tabindex="0">
-    <tr class="pf-m-expanded" role="row">
-      <td class="pf-c-table__toggle" role="cell">
-        <button
-          class="pf-c-button pf-m-plain"
-          aria-labelledby="table-expandable-hoverable-node3 table-expandable-hoverable-expandable-toggle3"
-          id="table-expandable-hoverable-expandable-toggle3"
-          aria-label="Details"
-          aria-controls="table-expandable-hoverable-content3"
-        >
-          <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">
-        <label>
-          <div class="pf-c-check pf-m-standalone">
-            <input
-              class="pf-c-check__input"
-              type="checkbox"
-              name="table-expandable-hoverable-checkrow3"
-              aria-labelledby="table-expandable-hoverable-node3"
-            />
-          </div>
-        </label>
-      </td>
-      <th role="columnheader" data-label="Repository name">
-        <div>
-          <div id="table-expandable-hoverable-node3">Hoverable</div>
-        </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"
-            id="table-expandable-hoverable-dropdown-kebab-3-button"
-            aria-expanded="false"
-            type="button"
-            aria-label="Actions"
-          >
-            <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
-          </button>
-          <ul
-            class="pf-c-dropdown__menu pf-m-align-right"
-            aria-labelledby="table-expandable-hoverable-dropdown-kebab-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" role="row">
-      <td></td>
-      <td></td>
-      <td
-        class
-        role="cell"
-        colspan="4"
-        id="table-expandable-hoverable-content3"
-      >
-        <div class="pf-c-table__expandable-row-content">Expandable content</div>
-      </td>
-      <td></td>
-    </tr>
-  </tbody>
-  <tbody class="pf-m-hoverable" role="rowgroup" tabindex="0">
-    <tr class="pf-m-expanded" role="row">
-      <td class="pf-c-table__toggle" role="cell">
-        <button
-          class="pf-c-button pf-m-plain"
-          aria-labelledby="table-expandable-hoverable-node4 table-expandable-hoverable-expandable-toggle4"
-          id="table-expandable-hoverable-expandable-toggle4"
-          aria-label="Details"
-          aria-controls="table-expandable-hoverable-content4"
-        >
-          <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">
-        <label>
-          <div class="pf-c-check pf-m-standalone">
-            <input
-              class="pf-c-check__input"
-              type="checkbox"
-              name="table-expandable-hoverable-checkrow4"
-              aria-labelledby="table-expandable-hoverable-node4"
-            />
-          </div>
-        </label>
-      </td>
-      <th role="columnheader" data-label="Repository name">
-        <div>
-          <div id="table-expandable-hoverable-node4">Hoverable</div>
-        </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"
-            id="table-expandable-hoverable-dropdown-kebab-4-button"
-            aria-expanded="false"
-            type="button"
-            aria-label="Actions"
-          >
-            <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
-          </button>
-          <ul
-            class="pf-c-dropdown__menu pf-m-align-right"
-            aria-labelledby="table-expandable-hoverable-dropdown-kebab-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" role="row">
-      <td></td>
-      <td></td>
-      <td
-        class
-        role="cell"
-        colspan="4"
-        id="table-expandable-hoverable-content4"
-      >
-        <div class="pf-c-table__expandable-row-content">Expandable content</div>
-      </td>
-      <td></td>
-    </tr>
-  </tbody>
-  <tbody class="pf-m-hoverable pf-m-selected" role="rowgroup" tabindex="0">
-    <tr class="pf-m-expanded" role="row">
-      <td class="pf-c-table__toggle" role="cell">
-        <button
-          class="pf-c-button pf-m-plain"
-          aria-labelledby="table-expandable-hoverable-node5 table-expandable-hoverable-expandable-toggle5"
-          id="table-expandable-hoverable-expandable-toggle5"
-          aria-label="Details"
-          aria-controls="table-expandable-hoverable-content5"
-        >
-          <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">
-        <label>
-          <div class="pf-c-check pf-m-standalone">
-            <input
-              class="pf-c-check__input"
-              type="checkbox"
-              name="table-expandable-hoverable-checkrow5"
-              aria-labelledby="table-expandable-hoverable-node5"
-            />
-          </div>
-        </label>
-      </td>
-      <th role="columnheader" data-label="Repository name">
-        <div>
-          <div id="table-expandable-hoverable-node5">
-            <i>Selected and not expanded</i>
-          </div>
-        </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 5</a>
-      </td>
-      <td class="pf-c-table__action" role="cell">
-        <div class="pf-c-dropdown">
-          <button
-            class="pf-c-dropdown__toggle pf-m-plain"
-            id="table-expandable-hoverable-dropdown-kebab-5-button"
-            aria-expanded="false"
-            type="button"
-            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-hoverable-dropdown-kebab-5-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></td>
-      <td></td>
-      <td
-        class
-        role="cell"
-        colspan="4"
-        id="table-expandable-hoverable-content5"
-      >
-        <div class="pf-c-table__expandable-row-content">Expandable content</div>
-      </td>
-      <td></td>
-    </tr>
-  </tbody>
-  <tbody class="pf-m-hoverable pf-m-selected" role="rowgroup" tabindex="0">
-    <tr class="pf-m-expanded" role="row">
-      <td class="pf-c-table__toggle" role="cell">
-        <button
-          class="pf-c-button pf-m-plain"
-          aria-labelledby="table-expandable-hoverable-node6 table-expandable-hoverable-expandable-toggle6"
-          id="table-expandable-hoverable-expandable-toggle6"
-          aria-label="Details"
-          aria-controls="table-expandable-hoverable-content6"
-        >
-          <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">
-        <label>
-          <div class="pf-c-check pf-m-standalone">
-            <input
-              class="pf-c-check__input"
-              type="checkbox"
-              name="table-expandable-hoverable-checkrow6"
-              aria-labelledby="table-expandable-hoverable-node6"
-            />
-          </div>
-        </label>
-      </td>
-      <th role="columnheader" data-label="Repository name">
-        <div>
-          <div id="table-expandable-hoverable-node6">
-            <i>Selected and not expanded</i>
-          </div>
-        </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 6</a>
-      </td>
-      <td class="pf-c-table__action" role="cell">
-        <div class="pf-c-dropdown">
-          <button
-            class="pf-c-dropdown__toggle pf-m-plain"
-            id="table-expandable-hoverable-dropdown-kebab-6-button"
-            aria-expanded="false"
-            type="button"
-            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-hoverable-dropdown-kebab-6-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></td>
-      <td></td>
-      <td
-        class
-        role="cell"
-        colspan="4"
-        id="table-expandable-hoverable-content6"
-      >
-        <div class="pf-c-table__expandable-row-content">Expandable content</div>
-      </td>
-      <td></td>
-    </tr>
-  </tbody>
-  <tbody class="pf-m-hoverable pf-m-selected" role="rowgroup" tabindex="0">
-    <tr class="pf-m-expanded" role="row">
-      <td class="pf-c-table__toggle" role="cell">
-        <button
-          class="pf-c-button pf-m-plain"
-          aria-labelledby="table-expandable-hoverable-node7 table-expandable-hoverable-expandable-toggle7"
-          id="table-expandable-hoverable-expandable-toggle7"
-          aria-label="Details"
-          aria-controls="table-expandable-hoverable-content7"
-        >
-          <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">
-        <label>
-          <div class="pf-c-check pf-m-standalone">
-            <input
-              class="pf-c-check__input"
-              type="checkbox"
-              name="table-expandable-hoverable-checkrow7"
-              aria-labelledby="table-expandable-hoverable-node7"
-            />
-          </div>
-        </label>
-      </td>
-      <th role="columnheader" data-label="Repository name">
-        <div>
-          <div id="table-expandable-hoverable-node7">
-            <i>Selected and not expanded</i>
-          </div>
-        </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 7</a>
-      </td>
-      <td class="pf-c-table__action" role="cell">
-        <div class="pf-c-dropdown">
-          <button
-            class="pf-c-dropdown__toggle pf-m-plain"
-            id="table-expandable-hoverable-dropdown-kebab-7-button"
-            aria-expanded="false"
-            type="button"
-            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-hoverable-dropdown-kebab-7-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></td>
-      <td></td>
-      <td
-        class
-        role="cell"
-        colspan="4"
-        id="table-expandable-hoverable-content7"
-      >
-        <div class="pf-c-table__expandable-row-content">Expandable content</div>
-      </td>
-      <td></td>
-    </tr>
-  </tbody>
-  <tbody class="pf-m-hoverable" role="rowgroup" tabindex="0">
-    <tr class="pf-m-expanded" role="row">
-      <td class="pf-c-table__toggle" role="cell">
-        <button
-          class="pf-c-button pf-m-plain"
-          aria-labelledby="table-expandable-hoverable-node8 table-expandable-hoverable-expandable-toggle8"
-          id="table-expandable-hoverable-expandable-toggle8"
-          aria-label="Details"
-          aria-controls="table-expandable-hoverable-content8"
-        >
-          <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">
-        <label>
-          <div class="pf-c-check pf-m-standalone">
-            <input
-              class="pf-c-check__input"
-              type="checkbox"
-              name="table-expandable-hoverable-checkrow8"
-              aria-labelledby="table-expandable-hoverable-node8"
-            />
-          </div>
-        </label>
-      </td>
-      <th role="columnheader" data-label="Repository name">
-        <div>
-          <div id="table-expandable-hoverable-node8">Hoverable</div>
-        </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 8</a>
-      </td>
-      <td class="pf-c-table__action" role="cell">
-        <div class="pf-c-dropdown">
-          <button
-            class="pf-c-dropdown__toggle pf-m-plain"
-            id="table-expandable-hoverable-dropdown-kebab-8-button"
-            aria-expanded="false"
-            type="button"
-            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-hoverable-dropdown-kebab-8-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></td>
-      <td></td>
-      <td
-        class
-        role="cell"
-        colspan="4"
-        id="table-expandable-hoverable-content8"
-      >
-        <div class="pf-c-table__expandable-row-content">Expandable content</div>
-      </td>
-      <td></td>
-    </tr>
-  </tbody>
-  <tbody class="pf-m-hoverable" role="rowgroup" tabindex="0">
-    <tr class="pf-m-expanded" role="row">
-      <td class="pf-c-table__toggle" role="cell">
-        <button
-          class="pf-c-button pf-m-plain"
-          aria-labelledby="table-expandable-hoverable-node9 table-expandable-hoverable-expandable-toggle9"
-          id="table-expandable-hoverable-expandable-toggle9"
-          aria-label="Details"
-          aria-controls="table-expandable-hoverable-content9"
-        >
-          <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">
-        <label>
-          <div class="pf-c-check pf-m-standalone">
-            <input
-              class="pf-c-check__input"
-              type="checkbox"
-              name="table-expandable-hoverable-checkrow9"
-              aria-labelledby="table-expandable-hoverable-node9"
-            />
-          </div>
-        </label>
-      </td>
-      <th role="columnheader" data-label="Repository name">
-        <div>
-          <div id="table-expandable-hoverable-node9">Hoverable</div>
-        </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 9</a>
-      </td>
-      <td class="pf-c-table__action" role="cell">
-        <div class="pf-c-dropdown">
-          <button
-            class="pf-c-dropdown__toggle pf-m-plain"
-            id="table-expandable-hoverable-dropdown-kebab-9-button"
-            aria-expanded="false"
-            type="button"
-            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-hoverable-dropdown-kebab-9-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></td>
-      <td></td>
-      <td
-        class
-        role="cell"
-        colspan="4"
-        id="table-expandable-hoverable-content9"
-      >
-        <div class="pf-c-table__expandable-row-content">Expandable content</div>
-      </td>
-      <td></td>
-    </tr>
-  </tbody>
-  <tbody class="pf-m-hoverable" role="rowgroup" tabindex="0">
-    <tr class="pf-m-expanded" role="row">
-      <td class="pf-c-table__toggle" role="cell">
-        <button
-          class="pf-c-button pf-m-plain"
-          aria-labelledby="table-expandable-hoverable-node10 table-expandable-hoverable-expandable-toggle10"
-          id="table-expandable-hoverable-expandable-toggle10"
-          aria-label="Details"
-          aria-controls="table-expandable-hoverable-content10"
-        >
-          <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">
-        <label>
-          <div class="pf-c-check pf-m-standalone">
-            <input
-              class="pf-c-check__input"
-              type="checkbox"
-              name="table-expandable-hoverable-checkrow10"
-              aria-labelledby="table-expandable-hoverable-node10"
-            />
-          </div>
-        </label>
-      </td>
-      <th role="columnheader" data-label="Repository name">
-        <div>
-          <div id="table-expandable-hoverable-node10">Hoverable</div>
-        </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 10</a>
-      </td>
-      <td class="pf-c-table__action" role="cell">
-        <div class="pf-c-dropdown">
-          <button
-            class="pf-c-dropdown__toggle pf-m-plain"
-            id="table-expandable-hoverable-dropdown-kebab-10-button"
-            aria-expanded="false"
-            type="button"
-            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-hoverable-dropdown-kebab-10-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></td>
-      <td></td>
-      <td
-        class
-        role="cell"
-        colspan="4"
-        id="table-expandable-hoverable-content10"
-      >
-        <div class="pf-c-table__expandable-row-content">Expandable content</div>
-      </td>
-      <td></td>
-    </tr>
-  </tbody>
-  <tbody
-    class="pf-m-hoverable pf-m-selected pf-m-expanded"
-    role="rowgroup"
-    tabindex="0"
-  >
-    <tr class="pf-m-expanded" 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-hoverable-node11 table-expandable-hoverable-expandable-toggle11"
-          id="table-expandable-hoverable-expandable-toggle11"
-          aria-label="Details"
-          aria-controls="table-expandable-hoverable-content11"
-          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">
-        <label>
-          <div class="pf-c-check pf-m-standalone">
-            <input
-              class="pf-c-check__input"
-              type="checkbox"
-              name="table-expandable-hoverable-checkrow11"
-              aria-labelledby="table-expandable-hoverable-node11"
-            />
-          </div>
-        </label>
-      </td>
-      <th role="columnheader" data-label="Repository name">
-        <div>
-          <div id="table-expandable-hoverable-node11">
-            <b>Expanded and selected</b>
-          </div>
-        </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 11</a>
-      </td>
-      <td class="pf-c-table__action" role="cell">
-        <div class="pf-c-dropdown">
-          <button
-            class="pf-c-dropdown__toggle pf-m-plain"
-            id="table-expandable-hoverable-dropdown-kebab-11-button"
-            aria-expanded="false"
-            type="button"
-            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-hoverable-dropdown-kebab-11-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
-        class
-        role="cell"
-        colspan="4"
-        id="table-expandable-hoverable-content11"
-      >
-        <div class="pf-c-table__expandable-row-content">Expandable content</div>
-      </td>
-      <td></td>
-    </tr>
-  </tbody>
-  <tbody class="pf-m-hoverable" role="rowgroup" tabindex="0">
-    <tr class="pf-m-expanded" role="row">
-      <td class="pf-c-table__toggle" role="cell">
-        <button
-          class="pf-c-button pf-m-plain"
-          aria-labelledby="table-expandable-hoverable-node12 table-expandable-hoverable-expandable-toggle12"
-          id="table-expandable-hoverable-expandable-toggle12"
-          aria-label="Details"
-          aria-controls="table-expandable-hoverable-content12"
-        >
-          <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">
-        <label>
-          <div class="pf-c-check pf-m-standalone">
-            <input
-              class="pf-c-check__input"
-              type="checkbox"
-              name="table-expandable-hoverable-checkrow12"
-              aria-labelledby="table-expandable-hoverable-node12"
-            />
-          </div>
-        </label>
-      </td>
-      <th role="columnheader" data-label="Repository name">
-        <div>
-          <div id="table-expandable-hoverable-node12">Hoverable</div>
-        </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 12</a>
-      </td>
-      <td class="pf-c-table__action" role="cell">
-        <div class="pf-c-dropdown">
-          <button
-            class="pf-c-dropdown__toggle pf-m-plain"
-            id="table-expandable-hoverable-dropdown-kebab-12-button"
-            aria-expanded="false"
-            type="button"
-            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-hoverable-dropdown-kebab-12-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></td>
-      <td></td>
-      <td
-        class
-        role="cell"
-        colspan="4"
-        id="table-expandable-hoverable-content12"
-      >
-        <div class="pf-c-table__expandable-row-content">Expandable content</div>
-      </td>
-      <td></td>
-    </tr>
-  </tbody>
-  <tbody
-    class="pf-m-hoverable pf-m-selected pf-m-expanded"
-    role="rowgroup"
-    tabindex="0"
-  >
-    <tr class="pf-m-expanded" 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-hoverable-node13 table-expandable-hoverable-expandable-toggle13"
-          id="table-expandable-hoverable-expandable-toggle13"
-          aria-label="Details"
-          aria-controls="table-expandable-hoverable-content13"
-          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">
-        <label>
-          <div class="pf-c-check pf-m-standalone">
-            <input
-              class="pf-c-check__input"
-              type="checkbox"
-              name="table-expandable-hoverable-checkrow13"
-              aria-labelledby="table-expandable-hoverable-node13"
-            />
-          </div>
-        </label>
-      </td>
-      <th role="columnheader" data-label="Repository name">
-        <div>
-          <div id="table-expandable-hoverable-node13">
-            <b>Expanded and selected</b>
-          </div>
-        </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 13</a>
-      </td>
-      <td class="pf-c-table__action" role="cell">
-        <div class="pf-c-dropdown">
-          <button
-            class="pf-c-dropdown__toggle pf-m-plain"
-            id="table-expandable-hoverable-dropdown-kebab-13-button"
-            aria-expanded="false"
-            type="button"
-            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-hoverable-dropdown-kebab-13-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>
+</table>
 
-    <tr class="pf-c-table__expandable-row pf-m-expanded" role="row">
-      <td></td>
-      <td></td>
-      <td
-        class
-        role="cell"
-        colspan="4"
-        id="table-expandable-hoverable-content13"
-      >
-        <div class="pf-c-table__expandable-row-content">Expandable content</div>
-      </td>
-      <td></td>
-    </tr>
-  </tbody>
-  <tbody
-    class="pf-m-hoverable pf-m-selected pf-m-expanded"
-    role="rowgroup"
-    tabindex="0"
-  >
-    <tr class="pf-m-expanded" 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-hoverable-node15 table-expandable-hoverable-expandable-toggle15"
-          id="table-expandable-hoverable-expandable-toggle15"
-          aria-label="Details"
-          aria-controls="table-expandable-hoverable-content15"
-          aria-expanded="true"
-        >
-          <div class="pf-c-table__toggle-icon">
-            <i class="fas fa-angle-down" aria-hidden="true"></i>
-          </div>
-        </button>
-      </td>
+```
+
+### Clickable and expandable example
 
+```html
+<table
+  class="pf-c-table pf-m-expandable pf-m-grid-lg"
+  role="grid"
+  aria-label="Expandable and clickable table example"
+  id="table-expandable-clickable"
+>
+  <thead>
+    <tr role="row">
+      <td></td>
       <td class="pf-c-table__check" role="cell">
         <label>
           <div class="pf-c-check pf-m-standalone">
             <input
               class="pf-c-check__input"
               type="checkbox"
-              name="table-expandable-hoverable-checkrow15"
-              aria-labelledby="table-expandable-hoverable-node15"
+              name="table-expandable-clickable-checkrowthead"
+              aria-label="Select all rows"
             />
           </div>
         </label>
       </td>
-      <th role="columnheader" data-label="Repository name">
-        <div>
-          <div id="table-expandable-hoverable-node15">
-            <b>Expanded and selected</b>
+      <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>
-        </div>
+        </button>
       </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 15</a>
-      </td>
-      <td class="pf-c-table__action" role="cell">
-        <div class="pf-c-dropdown">
-          <button
-            class="pf-c-dropdown__toggle pf-m-plain"
-            id="table-expandable-hoverable-dropdown-kebab-15-button"
-            aria-expanded="false"
-            type="button"
-            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-hoverable-dropdown-kebab-15-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
-        class
-        role="cell"
-        colspan="4"
-        id="table-expandable-hoverable-content15"
+      <th
+        class="pf-c-table__sort"
+        role="columnheader"
+        aria-sort="none"
+        scope="col"
       >
-        <div class="pf-c-table__expandable-row-content">Expandable content</div>
-      </td>
-      <td></td>
-    </tr>
-  </tbody>
-  <tbody class="pf-m-hoverable pf-m-expanded" role="rowgroup" tabindex="0">
-    <tr class="pf-m-expanded" 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-hoverable-node14 table-expandable-hoverable-expandable-toggle14"
-          id="table-expandable-hoverable-expandable-toggle14"
-          aria-label="Details"
-          aria-controls="table-expandable-hoverable-content14"
-          aria-expanded="true"
-        >
-          <div class="pf-c-table__toggle-icon">
-            <i class="fas fa-angle-down" aria-hidden="true"></i>
+        <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>
-      </td>
-
-      <td class="pf-c-table__check" role="cell">
-        <label>
-          <div class="pf-c-check pf-m-standalone">
-            <input
-              class="pf-c-check__input"
-              type="checkbox"
-              name="table-expandable-hoverable-checkrow14"
-              aria-labelledby="table-expandable-hoverable-node14"
-            />
+      </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>
-        </label>
-      </td>
-      <th role="columnheader" data-label="Repository name">
-        <div>
-          <div id="table-expandable-hoverable-node14">Expanded and not selected</div>
-        </div>
+        </button>
       </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 14</a>
-      </td>
-      <td class="pf-c-table__action" role="cell">
-        <div class="pf-c-dropdown">
-          <button
-            class="pf-c-dropdown__toggle pf-m-plain"
-            id="table-expandable-hoverable-dropdown-kebab-14-button"
-            aria-expanded="false"
-            type="button"
-            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-hoverable-dropdown-kebab-14-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
-        class
-        role="cell"
-        colspan="4"
-        id="table-expandable-hoverable-content14"
-      >
-        <div class="pf-c-table__expandable-row-content">Expandable content</div>
-      </td>
-      <td></td>
     </tr>
-  </tbody>
-  <tbody class="pf-m-hoverable" role="rowgroup" tabindex="0">
+  </thead>
+  <tbody class="pf-m-clickable" role="rowgroup" tabindex="0">
     <tr class="pf-m-expanded" role="row">
       <td class="pf-c-table__toggle" role="cell">
         <button
           class="pf-c-button pf-m-plain"
-          aria-labelledby="table-expandable-hoverable-node16 table-expandable-hoverable-expandable-toggle16"
-          id="table-expandable-hoverable-expandable-toggle16"
+          aria-labelledby="table-expandable-clickable-node1 table-expandable-clickable-expandable-toggle1"
+          id="table-expandable-clickable-expandable-toggle1"
           aria-label="Details"
-          aria-controls="table-expandable-hoverable-content16"
+          aria-controls="table-expandable-clickable-content1"
         >
           <div class="pf-c-table__toggle-icon">
             <i class="fas fa-angle-down" aria-hidden="true"></i>
@@ -9518,27 +7522,27 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
             <input
               class="pf-c-check__input"
               type="checkbox"
-              name="table-expandable-hoverable-checkrow16"
-              aria-labelledby="table-expandable-hoverable-node16"
+              name="table-expandable-clickable-checkrow1"
+              aria-labelledby="table-expandable-clickable-node1"
             />
           </div>
         </label>
       </td>
       <th role="columnheader" data-label="Repository name">
         <div>
-          <div id="table-expandable-hoverable-node16">Hoverable</div>
+          <div id="table-expandable-clickable-node1">Clickable and not expanded</div>
         </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 16</a>
+        <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"
-            id="table-expandable-hoverable-dropdown-kebab-16-button"
+            id="table-expandable-clickable-dropdown-kebab-1-button"
             aria-expanded="false"
             type="button"
             aria-label="Actions"
@@ -9547,7 +7551,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
           </button>
           <ul
             class="pf-c-dropdown__menu pf-m-align-right"
-            aria-labelledby="table-expandable-hoverable-dropdown-kebab-16-button"
+            aria-labelledby="table-expandable-clickable-dropdown-kebab-1-button"
             hidden
           >
             <li>
@@ -9587,22 +7591,26 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         class
         role="cell"
         colspan="4"
-        id="table-expandable-hoverable-content16"
+        id="table-expandable-clickable-content1"
       >
         <div class="pf-c-table__expandable-row-content">Expandable content</div>
       </td>
       <td></td>
     </tr>
   </tbody>
-  <tbody class="pf-m-hoverable pf-m-expanded" role="rowgroup" tabindex="0">
+  <tbody
+    class="pf-m-clickable pf-m-selected pf-m-expanded"
+    role="rowgroup"
+    tabindex="0"
+  >
     <tr class="pf-m-expanded" 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-hoverable-node17 table-expandable-hoverable-expandable-toggle17"
-          id="table-expandable-hoverable-expandable-toggle17"
+          aria-labelledby="table-expandable-clickable-node2 table-expandable-clickable-expandable-toggle2"
+          id="table-expandable-clickable-expandable-toggle2"
           aria-label="Details"
-          aria-controls="table-expandable-hoverable-content17"
+          aria-controls="table-expandable-clickable-content2"
           aria-expanded="true"
         >
           <div class="pf-c-table__toggle-icon">
@@ -9617,27 +7625,29 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
             <input
               class="pf-c-check__input"
               type="checkbox"
-              name="table-expandable-hoverable-checkrow17"
-              aria-labelledby="table-expandable-hoverable-node17"
+              name="table-expandable-clickable-checkrow2"
+              aria-labelledby="table-expandable-clickable-node2"
             />
           </div>
         </label>
       </td>
       <th role="columnheader" data-label="Repository name">
         <div>
-          <div id="table-expandable-hoverable-node17">Expanded and not selected</div>
+          <div id="table-expandable-clickable-node2">
+            <b>Clicked and expanded</b>
+          </div>
         </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 17</a>
+        <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"
-            id="table-expandable-hoverable-dropdown-kebab-17-button"
+            id="table-expandable-clickable-dropdown-kebab-2-button"
             aria-expanded="false"
             type="button"
             aria-label="Actions"
@@ -9646,7 +7656,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
           </button>
           <ul
             class="pf-c-dropdown__menu pf-m-align-right"
-            aria-labelledby="table-expandable-hoverable-dropdown-kebab-17-button"
+            aria-labelledby="table-expandable-clickable-dropdown-kebab-2-button"
             hidden
           >
             <li>
@@ -9686,22 +7696,22 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         class
         role="cell"
         colspan="4"
-        id="table-expandable-hoverable-content17"
+        id="table-expandable-clickable-content2"
       >
         <div class="pf-c-table__expandable-row-content">Expandable content</div>
       </td>
       <td></td>
     </tr>
   </tbody>
-  <tbody class="pf-m-hoverable" role="rowgroup" tabindex="0">
+  <tbody class="pf-m-clickable" role="rowgroup" tabindex="0">
     <tr class="pf-m-expanded" role="row">
       <td class="pf-c-table__toggle" role="cell">
         <button
           class="pf-c-button pf-m-plain"
-          aria-labelledby="table-expandable-hoverable-node18 table-expandable-hoverable-expandable-toggle18"
-          id="table-expandable-hoverable-expandable-toggle18"
+          aria-labelledby="table-expandable-clickable-node3 table-expandable-clickable-expandable-toggle3"
+          id="table-expandable-clickable-expandable-toggle3"
           aria-label="Details"
-          aria-controls="table-expandable-hoverable-content18"
+          aria-controls="table-expandable-clickable-content3"
         >
           <div class="pf-c-table__toggle-icon">
             <i class="fas fa-angle-down" aria-hidden="true"></i>
@@ -9715,27 +7725,27 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
             <input
               class="pf-c-check__input"
               type="checkbox"
-              name="table-expandable-hoverable-checkrow18"
-              aria-labelledby="table-expandable-hoverable-node18"
+              name="table-expandable-clickable-checkrow3"
+              aria-labelledby="table-expandable-clickable-node3"
             />
           </div>
         </label>
       </td>
       <th role="columnheader" data-label="Repository name">
         <div>
-          <div id="table-expandable-hoverable-node18">Hoverable</div>
+          <div id="table-expandable-clickable-node3">Clickable and not expanded</div>
         </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 18</a>
+        <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"
-            id="table-expandable-hoverable-dropdown-kebab-18-button"
+            id="table-expandable-clickable-dropdown-kebab-3-button"
             aria-expanded="false"
             type="button"
             aria-label="Actions"
@@ -9744,7 +7754,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
           </button>
           <ul
             class="pf-c-dropdown__menu pf-m-align-right"
-            aria-labelledby="table-expandable-hoverable-dropdown-kebab-18-button"
+            aria-labelledby="table-expandable-clickable-dropdown-kebab-3-button"
             hidden
           >
             <li>
@@ -9784,22 +7794,23 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         class
         role="cell"
         colspan="4"
-        id="table-expandable-hoverable-content18"
+        id="table-expandable-clickable-content3"
       >
         <div class="pf-c-table__expandable-row-content">Expandable content</div>
       </td>
       <td></td>
     </tr>
   </tbody>
-  <tbody class="pf-m-hoverable" role="rowgroup" tabindex="0">
+  <tbody class="pf-m-clickable pf-m-expanded" role="rowgroup" tabindex="0">
     <tr class="pf-m-expanded" role="row">
       <td class="pf-c-table__toggle" role="cell">
         <button
-          class="pf-c-button pf-m-plain"
-          aria-labelledby="table-expandable-hoverable-node19 table-expandable-hoverable-expandable-toggle19"
-          id="table-expandable-hoverable-expandable-toggle19"
+          class="pf-c-button pf-m-plain pf-m-expanded"
+          aria-labelledby="table-expandable-clickable-node4 table-expandable-clickable-expandable-toggle4"
+          id="table-expandable-clickable-expandable-toggle4"
           aria-label="Details"
-          aria-controls="table-expandable-hoverable-content19"
+          aria-controls="table-expandable-clickable-content4"
+          aria-expanded="true"
         >
           <div class="pf-c-table__toggle-icon">
             <i class="fas fa-angle-down" aria-hidden="true"></i>
@@ -9813,27 +7824,27 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
             <input
               class="pf-c-check__input"
               type="checkbox"
-              name="table-expandable-hoverable-checkrow19"
-              aria-labelledby="table-expandable-hoverable-node19"
+              name="table-expandable-clickable-checkrow4"
+              aria-labelledby="table-expandable-clickable-node4"
             />
           </div>
         </label>
       </td>
       <th role="columnheader" data-label="Repository name">
         <div>
-          <div id="table-expandable-hoverable-node19">Hoverable</div>
+          <div id="table-expandable-clickable-node4">Clickable and expanded</div>
         </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 19</a>
+        <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"
-            id="table-expandable-hoverable-dropdown-kebab-19-button"
+            id="table-expandable-clickable-dropdown-kebab-4-button"
             aria-expanded="false"
             type="button"
             aria-label="Actions"
@@ -9842,7 +7853,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
           </button>
           <ul
             class="pf-c-dropdown__menu pf-m-align-right"
-            aria-labelledby="table-expandable-hoverable-dropdown-kebab-19-button"
+            aria-labelledby="table-expandable-clickable-dropdown-kebab-4-button"
             hidden
           >
             <li>
@@ -9875,14 +7886,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
       </td>
     </tr>
 
-    <tr class="pf-c-table__expandable-row" role="row">
+    <tr class="pf-c-table__expandable-row pf-m-expanded" role="row">
       <td></td>
       <td></td>
       <td
         class
         role="cell"
         colspan="4"
-        id="table-expandable-hoverable-content19"
+        id="table-expandable-clickable-content4"
       >
         <div class="pf-c-table__expandable-row-content">Expandable content</div>
       </td>
@@ -9893,17 +7904,17 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
 
 ```
 
-### Hoverable accessibility
+### Clickable accessibility
 
 | Attribute | Applied to | Outcome |
 | -- | -- | -- |
-| `tabindex="0"` | `.pf-c-table tbody.pf-m-hoverable` | Inserts the hoverable table element into the tab order of the page so that it is focusable. **Required** |
+| `tabindex="0"` | `.pf-c-table tbody.pf-m-clickable` | Inserts the clickable table element into the tab order of the page so that it is focusable. **Required** |
 
-### Hoverable and selected usage
+### Clickable and selected usage
 
 | Class | Applied to | Outcome |
 | -- | -- | -- |
-| `.pf-m-hoverable` | `.pf-c-table tbody`, `.pf-c-table tr` | Modifies a tbody or tr table element to be hoverable. |
+| `.pf-m-clickable` | `.pf-c-table tbody`, `.pf-c-table tr` | Modifies a tbody or tr table element to be clickable. |
 | `.pf-m-selected` | `.pf-c-table tbody`, `.pf-c-table tr` | Modifies a selectable tbody or tr table element to be selected. |
 
 ## Tree table