@patternfly/patternfly

--- id: Table section: demos wrapperTag: div --- ## Demos ### Basic ```html isFullscreen <div class="pf-c-page" id="page-layout-table-simple"> <a class="pf-c-skip-to-content pf-c-button pf-m-primary" href="#main-content-page-layout-table-simple">Skip to content</a> <header class="pf-c-page__header"> <div class="pf-c-page__header-brand"> <div class="pf-c-page__header-brand-toggle"> <button class="pf-c-button pf-m-plain" type="button" id="page-layout-table-simple-nav-toggle" aria-label="Global navigation" aria-expanded="true" aria-controls="page-layout-table-simple-primary-nav"> <i class="fas fa-bars" aria-hidden="true"></i> </button> </div> <a href="#" class="pf-c-page__header-brand-link"> <img class="pf-c-brand" src="/assets/images/PF-Masthead-Logo.svg" alt="PatternFly logo" /> </a> </div> <div class="pf-c-page__header-tools"> <div class="pf-c-page__header-tools-group"> <div class="pf-c-page__header-tools-item pf-m-hidden pf-m-visible-on-lg"> <button class="pf-c-button pf-m-plain" type="button" aria-label="Settings"> <i class="fas fa-cog" aria-hidden="true"></i> </button> </div> <div class="pf-c-page__header-tools-item pf-m-hidden pf-m-visible-on-lg"> <button class="pf-c-button pf-m-plain" type="button" aria-label="Help"> <i class="pf-icon pf-icon-help" aria-hidden="true"></i> </button> </div> </div> <div class="pf-c-page__header-tools-group"> <div class="pf-c-page__header-tools-item pf-m-hidden-on-lg"> <div class="pf-c-dropdown"> <button class="pf-c-dropdown__toggle pf-m-plain" type="button" id="page-layout-table-simple-dropdown-kebab-right-aligned-1-button" aria-expanded="false" aria-label="Actions"> <i class="fas fa-ellipsis-v" aria-hidden="true"></i> </button> <ul class="pf-c-dropdown__menu pf-m-align-right" aria-labelledby="page-layout-table-simple-dropdown-kebab-right-aligned-1-button" hidden> <li> <a class="pf-c-dropdown__menu-item" href="#">Link</a> </li> <li> <button class="pf-c-dropdown__menu-item" type="button">Action</button> </li> <li> <a class="pf-c-dropdown__menu-item pf-m-disabled" href="#" aria-disabled="true" tabindex="-1">Disabled link</a> </li> <li> <button class="pf-c-dropdown__menu-item" type="button" disabled>Disabled action</button> </li> <li class="pf-c-divider" role="separator"></li> <li> <a class="pf-c-dropdown__menu-item" href="#">Separated link</a> </li> </ul> </div> </div> <div class="pf-c-page__header-tools-item pf-m-hidden pf-m-visible-on-md"> <div class="pf-c-dropdown"> <button class="pf-c-dropdown__toggle pf-m-plain" type="button" id="page-layout-table-simple-dropdown-button" aria-expanded="false"> <span class="pf-c-dropdown__toggle-text">John Smith</span> <span class="pf-c-dropdown__toggle-icon"> <i class="fas fa-caret-down" aria-hidden="true"></i> </span> </button> <div class="pf-c-dropdown__menu" hidden>[Panel contents here]</div> </div> </div> </div> <img class="pf-c-avatar" src="/assets/images/img_avatar.svg" alt="Avatar image" /> </div> </header> <div class="pf-c-page__sidebar"> <div class="pf-c-page__sidebar-body"> <nav class="pf-c-nav" id="page-layout-table-simple-primary-nav" aria-label="Global"> <ul class="pf-c-nav__list"> <li class="pf-c-nav__item pf-m-expandable pf-m-expanded pf-m-current"> <button class="pf-c-nav__link" aria-expanded="true">Components <span class="pf-c-nav__toggle"> <span class="pf-c-nav__toggle-icon"> <i class="fas fa-angle-right" aria-hidden="true"></i> </span> </span> </button> <section class="pf-c-nav__subnav" aria-labelledby="page-layout-table-simple-subnav-title1"> <h2 class="pf-c-nav__subnav-title pf-screen-reader" id="page-layout-table-simple-subnav-title1">First nav item</h2> <ul class="pf-c-nav__list"> <li class="pf-c-nav__item"> <a href="#" class="pf-c-nav__link">Forms</a> </li> <li class="pf-c-nav__item"> <a href="#" class="pf-c-nav__link">Table</a> </li> <li class="pf-c-nav__item"> <a href="#" class="pf-c-nav__link pf-m-current" aria-current="page">Data list</a> </li> <li class="pf-c-nav__item"> <a href="#" class="pf-c-nav__link">Icons</a> </li> <li class="pf-c-nav__item"> <a href="#" class="pf-c-nav__link">Layouts</a> </li> <li class="pf-c-nav__item"> <a href="#" class="pf-c-nav__link">List</a> </li> </ul> </section> </li> <li class="pf-c-nav__item pf-m-expandable"> <button class="pf-c-nav__link" aria-expanded="false">Patterns <span class="pf-c-nav__toggle"> <span class="pf-c-nav__toggle-icon"> <i class="fas fa-angle-right" aria-hidden="true"></i> </span> </span> </button> <section class="pf-c-nav__subnav" aria-labelledby="page-layout-table-simple-subnav-title2" hidden> <h2 class="pf-c-nav__subnav-title pf-screen-reader" id="page-layout-table-simple-subnav-title2">Second nav item</h2> <ul class="pf-c-nav__list"></ul> </section> </li> <li class="pf-c-nav__item pf-m-expandable"> <button class="pf-c-nav__link" aria-expanded="false">Typography <span class="pf-c-nav__toggle"> <span class="pf-c-nav__toggle-icon"> <i class="fas fa-angle-right" aria-hidden="true"></i> </span> </span> </button> <section class="pf-c-nav__subnav" aria-labelledby="page-layout-table-simple-subnav-title3" hidden> <h2 class="pf-c-nav__subnav-title pf-screen-reader" id="page-layout-table-simple-subnav-title3">Third nav item</h2> <ul class="pf-c-nav__list"></ul> </section> </li> <li class="pf-c-nav__item pf-m-expandable"> <button class="pf-c-nav__link" aria-expanded="false">Icons <span class="pf-c-nav__toggle"> <span class="pf-c-nav__toggle-icon"> <i class="fas fa-angle-right" aria-hidden="true"></i> </span> </span> </button> <section class="pf-c-nav__subnav" aria-labelledby="page-layout-table-simple-subnav-title4" hidden> <h2 class="pf-c-nav__subnav-title pf-screen-reader" id="page-layout-table-simple-subnav-title4">Second nav item</h2> <ul class="pf-c-nav__list"></ul> </section> </li> <li class="pf-c-nav__item pf-m-expandable"> <button class="pf-c-nav__link" aria-expanded="false">Colors <span class="pf-c-nav__toggle"> <span class="pf-c-nav__toggle-icon"> <i class="fas fa-angle-right" aria-hidden="true"></i> </span> </span> </button> <section class="pf-c-nav__subnav" aria-labelledby="page-layout-table-simple-subnav-title5" hidden> <h2 class="pf-c-nav__subnav-title pf-screen-reader" id="page-layout-table-simple-subnav-title5">Second nav item</h2> <ul class="pf-c-nav__list"></ul> </section> </li> </ul> </nav> </div> </div> <main class="pf-c-page__main" tabindex="-1" id="main-content-page-layout-table-simple"> <section class="pf-c-page__main-nav pf-m-limit-width"> <div class="pf-c-page__main-body"> <nav class="pf-c-nav pf-m-tertiary pf-m-scrollable" aria-label="Local"> <button class="pf-c-nav__scroll-button" disabled aria-label="Scroll left"> <i class="fas fa-angle-left" aria-hidden="true"></i> </button> <ul class="pf-c-nav__list"> <li class="pf-c-nav__item"> <a href="#" class="pf-c-nav__link pf-m-current" aria-current="page">Nav Item 1</a> </li> <li class="pf-c-nav__item"> <a href="#" class="pf-c-nav__link">Nav Item 2</a> </li> <li class="pf-c-nav__item"> <a href="#" class="pf-c-nav__link">Nav Item 3</a> </li> <li class="pf-c-nav__item"> <a href="#" class="pf-c-nav__link">Nav Item 4</a> </li> <li class="pf-c-nav__item"> <a href="#" class="pf-c-nav__link">Nav Item 5</a> </li> </ul> <button class="pf-c-nav__scroll-button" aria-label="Scroll right"> <i class="fas fa-angle-right" aria-hidden="true"></i> </button> </nav> </div> </section> <section class="pf-c-page__main-section pf-m-limit-width pf-m-light"> <div class="pf-c-page__main-body"> <div class="pf-c-content"> <h1>Table demos</h1> <p>Below is an example of a Table.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum suscipit venenatis enim, ut ultrices metus ornare at. Curabitur vel nibh id leo finibus suscipit. Curabitur eu tellus lectus. Vivamus lacus leo, lobortis ac convallis ac, dapibus vel ligula. Suspendisse vitae felis at augue blandit sollicitudin. Sed erat metus, pellentesque vel accumsan vitae, tincidunt id erat. Mauris et pharetra felis. Duis at nisi leo. Nam blandit dui dui, in euismod est dapibus sed. Vivamus sed dolor ullamcorper, euismod orci efficitur, ornare leo. Sed sit amet sollicitudin nulla. Nunc tristique sem ut est laoreet efficitur. Cras tristique finibus risus, eget fringilla tellus porta vitae. Duis id nunc ultricies, ultrices nibh vel, sollicitudin tellus.</p> </div> </div> </section> <section class="pf-c-page__main-section pf-m-limit-width pf-m-no-padding pf-m-padding-on-md pf-m-light"> <div class="pf-c-page__main-body"> <table class="pf-c-table pf-m-grid-md " role="grid" aria-label="This is a table with checkboxes" id="page-layout-table-simple-table"> <thead> <tr role="row"> <td class="pf-c-table__check" role="cell"> <input type="checkbox" name="check-all" aria-label="Select all rows" /> </td> <th role="columnheader" scope="col">Repositories</th> <th role="columnheader" scope="col">Branches</th> <th role="columnheader" scope="col">Pull requests</th> <th role="columnheader" scope="col">Workspaces</th> <th role="columnheader" scope="col">Last commit</th> <td role="cell"></td> <td role="cell"></td> </tr> </thead> <tbody role="rowgroup"> <tr role="row"> <td class="pf-c-table__check" role="cell"> <input type="checkbox" name="checkrow1" aria-labelledby="page-layout-table-simple-table-node1" /> </td> <th role="columnheader" data-label="Repository name"> <div> <div id="page-layout-table-simple-table-node1">Node 1</div> <a href="#">siemur/test-space</a> </div> </th> <td role="cell" data-label="Branches"> <span> <i class="fas fa-code-branch"></i> 10 </span> </td> <td role="cell" data-label="Pull requests"> <span> <i class="fas fa-code"></i> 25 </span> </td> <td role="cell" data-label="Workspaces"> <span> <i class="fas fa-cube"></i> 5 </span> </td> <td role="cell" data-label="Last commit">2 days ago</td> <td role="cell" data-label="Action"> <a href="#">Action link</a> </td> <td class="pf-c-table__action" role="cell"> <div class="pf-c-dropdown"> <button class="pf-c-dropdown__toggle pf-m-plain" type="button" id="page-layout-table-simple-table-dropdown-kebab-right-aligned-1-button" aria-expanded="false" aria-label="Actions"> <i class="fas fa-ellipsis-v" aria-hidden="true"></i> </button> <ul class="pf-c-dropdown__menu pf-m-align-right" aria-labelledby="page-layout-table-simple-table-dropdown-kebab-right-aligned-1-button" hidden> <li> <a class="pf-c-dropdown__menu-item" href="#">Link</a> </li> <li> <button class="pf-c-dropdown__menu-item" type="button">Action</button> </li> <li> <a class="pf-c-dropdown__menu-item pf-m-disabled" href="#" aria-disabled="true" tabindex="-1">Disabled link</a> </li> <li> <button class="pf-c-dropdown__menu-item" type="button" disabled>Disabled action</button> </li> <li class="pf-c-divider" role="separator"></li> <li> <a class="pf-c-dropdown__menu-item" href="#">Separated link</a> </li> </ul> </div> </td> </tr> <tr role="row"> <td class="pf-c-table__check" role="cell"> <input type="checkbox" name="checkrow2" aria-labelledby="page-layout-table-simple-table-node2" /> </td> <th role="columnheader" data-label="Repository name"> <div> <div id="page-layout-table-simple-table-node2">Node 2</div> <a href="#">siemur/test-space</a> </div> </th> <td role="cell" data-label="Branches"> <span> <i class="fas fa-code-branch"></i> 8 </span> </td> <td role="cell" data-label="Pull requests"> <span> <i class="fas fa-code"></i> 30 </span> </td> <td role="cell" data-label="Workspaces"> <span> <i class="fas fa-cube"></i> 2 </span> </td> <td role="cell" data-label="Last commit">2 days ago</td> <td role="cell" data-label="Action"> <a href="#">Action link</a> </td> <td class="pf-c-table__action" role="cell"> <div class="pf-c-dropdown"> <button class="pf-c-dropdown__toggle pf-m-plain" type="button" id="page-layout-table-simple-table-dropdown-kebab-right-aligned-2-button" aria-expanded="false" aria-label="Actions"> <i class="fas fa-ellipsis-v" aria-hidden="true"></i> </button> <ul class="pf-c-dropdown__menu pf-m-align-right" aria-labelledby="page-layout-table-simple-table-dropdown-kebab-right-aligned-2-button" hidden> <li> <a class="pf-c-dropdown__menu-item" href="#">Link</a> </li> <li> <button class="pf-c-dropdown__menu-item" type="button">Action</button> </li> <li> <a class="pf-c-dropdown__menu-item pf-m-disabled" href="#" aria-disabled="true" tabindex="-1">Disabled link</a> </li> <li> <button class="pf-c-dropdown__menu-item" type="button" disabled>Disabled action</button> </li> <li class="pf-c-divider" role="separator"></li> <li> <a class="pf-c-dropdown__menu-item" href="#">Separated link</a> </li> </ul> </div> </td> </tr> <tr role="row"> <td class="pf-c-table__check" role="cell"> <input type="checkbox" name="checkrow3" aria-labelledby="page-layout-table-simple-table-node3" /> </td> <th role="columnheader" data-label="Repository name"> <div> <div id="page-layout-table-simple-table-node3">Node 3</div> <a href="#">siemur/test-space</a> </div> </th> <td role="cell" data-label="Branches"> <span> <i class="fas fa-code-branch"></i> 12 </span> </td> <td role="cell" data-label="Pull requests"> <span> <i class="fas fa-code"></i> 48 </span> </td> <td role="cell" data-label="Workspaces"> <span> <i class="fas fa-cube"></i> 13 </span> </td> <td role="cell" data-label="Last commit">30 days ago</td> <td role="cell" data-label="Action"> <a href="#">Action link</a> </td> <td class="pf-c-table__action" role="cell"> <div class="pf-c-dropdown"> <button class="pf-c-dropdown__toggle pf-m-plain" type="button" id="page-layout-table-simple-table-dropdown-kebab-right-aligned-3-button" aria-expanded="false" aria-label="Actions"> <i class="fas fa-ellipsis-v" aria-hidden="true"></i> </button> <ul class="pf-c-dropdown__menu pf-m-align-right" aria-labelledby="page-layout-table-simple-table-dropdown-kebab-right-aligned-3-button" hidden> <li> <a class="pf-c-dropdown__menu-item" href="#">Link</a> </li> <li> <button class="pf-c-dropdown__menu-item" type="button">Action</button> </li> <li> <a class="pf-c-dropdown__menu-item pf-m-disabled" href="#" aria-disabled="true" tabindex="-1">Disabled link</a> </li> <li> <button class="pf-c-dropdown__menu-item" type="button" disabled>Disabled action</button> </li> <li class="pf-c-divider" role="separator"></li> <li> <a class="pf-c-dropdown__menu-item" href="#">Separated link</a> </li> </ul> </div> </td> </tr> <tr role="row"> <td class="pf-c-table__check" role="cell"> <input type="checkbox" name="checkrow4" aria-labelledby="page-layout-table-simple-table-node4" /> </td> <th role="columnheader" data-label="Repository name"> <div> <div id="page-layout-table-simple-table-node4">Node 4</div> <a href="#">siemur/test-space</a> </div> </th> <td role="cell" data-label="Branches"> <span> <i class="fas fa-code-branch"></i> 3 </span> </td> <td role="cell" data-label="Pull requests"> <span> <i class="fas fa-code"></i> 8 </span> </td> <td role="cell" data-label="Workspaces"> <span> <i class="fas fa-cube"></i> 20 </span> </td> <td role="cell" data-label="Last commit">8 days ago</td> <td role="cell" data-label="Action"> <a href="#">Action link</a> </td> <td class="pf-c-table__action" role="cell"> <div class="pf-c-dropdown"> <button class="pf-c-dropdown__toggle pf-m-plain" type="button" id="page-layout-table-simple-table-dropdown-kebab-right-aligned-4-button" aria-expanded="false" aria-label="Actions"> <i class="fas fa-ellipsis-v" aria-hidden="true"></i> </button> <ul class="pf-c-dropdown__menu pf-m-align-right" aria-labelledby="page-layout-table-simple-table-dropdown-kebab-right-aligned-4-button" hidden> <li> <a class="pf-c-dropdown__menu-item" href="#">Link</a> </li> <li> <button class="pf-c-dropdown__menu-item" type="button">Action</button> </li> <li> <a class="pf-c-dropdown__menu-item pf-m-disabled" href="#" aria-disabled="true" tabindex="-1">Disabled link</a> </li> <li> <button class="pf-c-dropdown__menu-item" type="button" disabled>Disabled action</button> </li> <li class="pf-c-divider" role="separator"></li> <li> <a class="pf-c-dropdown__menu-item" href="#">Separated link</a> </li> </ul> </div> </td> </tr> <tr role="row"> <td class="pf-c-table__check" role="cell"> <input type="checkbox" name="checkrow5" aria-labelledby="page-layout-table-simple-table-node5" /> </td> <th role="columnheader" data-label="Repository name"> <div> <div id="page-layout-table-simple-table-node5">Node 5</div> <a href="#">siemur/test-space</a> </div> </th> <td role="cell" data-label="Branches"> <span> <i class="fas fa-code-branch"></i> 34 </span> </td> <td role="cell" data-label="Pull requests"> <span> <i class="fas fa-code"></i> 21 </span> </td> <td role="cell" data-label="Workspaces"> <span> <i class="fas fa-cube"></i> 26 </span> </td> <td role="cell" data-label="Last commit">2 days ago</td> <td role="cell" data-label="Action"> <a href="#">Action link</a> </td> <td class="pf-c-table__action" role="cell"> <div class="pf-c-dropdown"> <button class="pf-c-dropdown__toggle pf-m-plain" type="button" id="page-layout-table-simple-table-dropdown-kebab-right-aligned-5-button" aria-expanded="false" aria-label="Actions"> <i class="fas fa-ellipsis-v" aria-hidden="true"></i> </button> <ul class="pf-c-dropdown__menu pf-m-align-right" aria-labelledby="page-layout-table-simple-table-dropdown-kebab-right-aligned-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> </tbody> </table> <div class="pf-c-pagination pf-m-bottom"> <div class="pf-c-options-menu"> <div class="pf-c-options-menu__toggle pf-m-text pf-m-plain"> <span class="pf-c-options-menu__toggle-text"> <b>1 - 10</b> of  <b>37</b> </span> <button class="pf-c-options-menu__toggle-button" id="{{page--id}}-pagination-options-menu-bottom-example-toggle" aria-haspopup="listbox" aria-expanded="false" aria-label="Items per page"> <span class="pf-c-options-menu__toggle-button-icon"> <i class="fas fa-caret-down" aria-hidden="true"></i> </span> </button> </div> <ul class="pf-c-options-menu__menu" aria-labelledby="{{page--id}}-pagination-options-menu-bottom-example-toggle" hidden> <li> <button class="pf-c-options-menu__menu-item" type="button">5 per page</button> </li> <li> <button class="pf-c-options-menu__menu-item" type="button">10 per page <div class="pf-c-options-menu__menu-item-icon"> <i class="fas fa-check" aria-hidden="true"></i> </div> </button> </li> <li> <button class="pf-c-options-menu__menu-item" type="button">20 per page</button> </li> </ul> </div> <nav class="pf-c-pagination__nav" aria-label="Pagination"> <div class="pf-c-pagination__nav-control pf-m-first"> <button class="pf-c-button pf-m-plain" type="button" disabled aria-label="Go to first page"> <i class="fas fa-angle-double-left" aria-hidden="true"></i> </button> </div> <div class="pf-c-pagination__nav-control pf-m-prev"> <button class="pf-c-button pf-m-plain" type="button" disabled aria-label="Go to previous page"> <i class="fas fa-angle-left" aria-hidden="true"></i> </button> </div> <div class="pf-c-pagination__nav-page-select"> <input class="pf-c-form-control" aria-label="Current page" type="number" min="1" max="4" value="1" /> <span aria-hidden="true">of 4</span> </div> <div class="pf-c-pagination__nav-control pf-m-next"> <button class="pf-c-button pf-m-plain" type="button" aria-label="Go to next page"> <i class="fas fa-angle-right" aria-hidden="true"></i> </button> </div> <div class="pf-c-pagination__nav-control pf-m-last"> <button class="pf-c-button pf-m-plain" type="button" aria-label="Go to last page"> <i class="fas fa-angle-double-right" aria-hidden="true"></i> </button> </div> </nav> </div> </div> </section> </main> </div> ``` ### Sortable ```html isFullscreen <div class="pf-c-page" id="page-layout-table-sortable"> <a class="pf-c-skip-to-content pf-c-button pf-m-primary" href="#main-content-page-layout-table-sortable">Skip to content</a> <header class="pf-c-page__header"> <div class="pf-c-page__header-brand"> <div class="pf-c-page__header-brand-toggle"> <button class="pf-c-button pf-m-plain" type="button" id="page-layout-table-sortable-nav-toggle" aria-label="Global navigation" aria-expanded="true" aria-controls="page-layout-table-sortable-primary-nav"> <i class="fas fa-bars" aria-hidden="true"></i> </button> </div> <a href="#" class="pf-c-page__header-brand-link"> <img class="pf-c-brand" src="/assets/images/PF-Masthead-Logo.svg" alt="PatternFly logo" /> </a> </div> <div class="pf-c-page__header-tools"> <div class="pf-c-page__header-tools-group"> <div class="pf-c-page__header-tools-item pf-m-hidden pf-m-visible-on-lg"> <button class="pf-c-button pf-m-plain" type="button" aria-label="Settings"> <i class="fas fa-cog" aria-hidden="true"></i> </button> </div> <div class="pf-c-page__header-tools-item pf-m-hidden pf-m-visible-on-lg"> <button class="pf-c-button pf-m-plain" type="button" aria-label="Help"> <i class="pf-icon pf-icon-help" aria-hidden="true"></i> </button> </div> </div> <div class="pf-c-page__header-tools-group"> <div class="pf-c-page__header-tools-item pf-m-hidden-on-lg"> <div class="pf-c-dropdown"> <button class="pf-c-dropdown__toggle pf-m-plain" type="button" id="page-layout-table-sortable-dropdown-kebab-right-aligned-1-button" aria-expanded="false" aria-label="Actions"> <i class="fas fa-ellipsis-v" aria-hidden="true"></i> </button> <ul class="pf-c-dropdown__menu pf-m-align-right" aria-labelledby="page-layout-table-sortable-dropdown-kebab-right-aligned-1-button" hidden> <li> <a class="pf-c-dropdown__menu-item" href="#">Link</a> </li> <li> <button class="pf-c-dropdown__menu-item" type="button">Action</button> </li> <li> <a class="pf-c-dropdown__menu-item pf-m-disabled" href="#" aria-disabled="true" tabindex="-1">Disabled link</a> </li> <li> <button class="pf-c-dropdown__menu-item" type="button" disabled>Disabled action</button> </li> <li class="pf-c-divider" role="separator"></li> <li> <a class="pf-c-dropdown__menu-item" href="#">Separated link</a> </li> </ul> </div> </div> <div class="pf-c-page__header-tools-item pf-m-hidden pf-m-visible-on-md"> <div class="pf-c-dropdown"> <button class="pf-c-dropdown__toggle pf-m-plain" type="button" id="page-layout-table-sortable-dropdown-button" aria-expanded="false"> <span class="pf-c-dropdown__toggle-text">John Smith</span> <span class="pf-c-dropdown__toggle-icon"> <i class="fas fa-caret-down" aria-hidden="true"></i> </span> </button> <div class="pf-c-dropdown__menu" hidden>[Panel contents here]</div> </div> </div> </div> <img class="pf-c-avatar" src="/assets/images/img_avatar.svg" alt="Avatar image" /> </div> </header> <div class="pf-c-page__sidebar"> <div class="pf-c-page__sidebar-body"> <nav class="pf-c-nav" id="page-layout-table-sortable-primary-nav" aria-label="Global"> <ul class="pf-c-nav__list"> <li class="pf-c-nav__item pf-m-expandable pf-m-expanded pf-m-current"> <button class="pf-c-nav__link" aria-expanded="true">Components <span class="pf-c-nav__toggle"> <span class="pf-c-nav__toggle-icon"> <i class="fas fa-angle-right" aria-hidden="true"></i> </span> </span> </button> <section class="pf-c-nav__subnav" aria-labelledby="page-layout-table-sortable-subnav-title1"> <h2 class="pf-c-nav__subnav-title pf-screen-reader" id="page-layout-table-sortable-subnav-title1">First nav item</h2> <ul class="pf-c-nav__list"> <li class="pf-c-nav__item"> <a href="#" class="pf-c-nav__link">Forms</a> </li> <li class="pf-c-nav__item"> <a href="#" class="pf-c-nav__link">Table</a> </li> <li class="pf-c-nav__item"> <a href="#" class="pf-c-nav__link pf-m-current" aria-current="page">Data list</a> </li> <li class="pf-c-nav__item"> <a href="#" class="pf-c-nav__link">Icons</a> </li> <li class="pf-c-nav__item"> <a href="#" class="pf-c-nav__link">Layouts</a> </li> <li class="pf-c-nav__item"> <a href="#" class="pf-c-nav__link">List</a> </li> </ul> </section> </li> <li class="pf-c-nav__item pf-m-expandable"> <button class="pf-c-nav__link" aria-expanded="false">Patterns <span class="pf-c-nav__toggle"> <span class="pf-c-nav__toggle-icon"> <i class="fas fa-angle-right" aria-hidden="true"></i> </span> </span> </button> <section class="pf-c-nav__subnav" aria-labelledby="page-layout-table-sortable-subnav-title2" hidden> <h2 class="pf-c-nav__subnav-title pf-screen-reader" id="page-layout-table-sortable-subnav-title2">Second nav item</h2> <ul class="pf-c-nav__list"></ul> </section> </li> <li class="pf-c-nav__item pf-m-expandable"> <button class="pf-c-nav__link" aria-expanded="false">Typography <span class="pf-c-nav__toggle"> <span class="pf-c-nav__toggle-icon"> <i class="fas fa-angle-right" aria-hidden="true"></i> </span> </span> </button> <section class="pf-c-nav__subnav" aria-labelledby="page-layout-table-sortable-subnav-title3" hidden> <h2 class="pf-c-nav__subnav-title pf-screen-reader" id="page-layout-table-sortable-subnav-title3">Third nav item</h2> <ul class="pf-c-nav__list"></ul> </section> </li> <li class="pf-c-nav__item pf-m-expandable"> <button class="pf-c-nav__link" aria-expanded="false">Icons <span class="pf-c-nav__toggle"> <span class="pf-c-nav__toggle-icon"> <i class="fas fa-angle-right" aria-hidden="true"></i> </span> </span> </button> <section class="pf-c-nav__subnav" aria-labelledby="page-layout-table-sortable-subnav-title4" hidden> <h2 class="pf-c-nav__subnav-title pf-screen-reader" id="page-layout-table-sortable-subnav-title4">Second nav item</h2> <ul class="pf-c-nav__list"></ul> </section> </li> <li class="pf-c-nav__item pf-m-expandable"> <button class="pf-c-nav__link" aria-expanded="false">Colors <span class="pf-c-nav__toggle"> <span class="pf-c-nav__toggle-icon"> <i class="fas fa-angle-right" aria-hidden="true"></i> </span> </span> </button> <section class="pf-c-nav__subnav" aria-labelledby="page-layout-table-sortable-subnav-title5" hidden> <h2 class="pf-c-nav__subnav-title pf-screen-reader" id="page-layout-table-sortable-subnav-title5">Second nav item</h2> <ul class="pf-c-nav__list"></ul> </section> </li> </ul> </nav> </div> </div> <main class="pf-c-page__main" tabindex="-1" id="main-content-page-layout-table-sortable"> <section class="pf-c-page__main-nav"> <nav class="pf-c-nav pf-m-tertiary pf-m-scrollable" aria-label="Local"> <button class="pf-c-nav__scroll-button" disabled aria-label="Scroll left"> <i class="fas fa-angle-left" aria-hidden="true"></i> </button> <ul class="pf-c-nav__list"> <li class="pf-c-nav__item"> <a href="#" class="pf-c-nav__link pf-m-current" aria-current="page">Nav Item 1</a> </li> <li class="pf-c-nav__item"> <a href="#" class="pf-c-nav__link">Nav Item 2</a> </li> <li class="pf-c-nav__item"> <a href="#" class="pf-c-nav__link">Nav Item 3</a> </li> <li class="pf-c-nav__item"> <a href="#" class="pf-c-nav__link">Nav Item 4</a> </li> <li class="pf-c-nav__item"> <a href="#" class="pf-c-nav__link">Nav Item 5</a> </li> </ul> <button class="pf-c-nav__scroll-button" aria-label="Scroll right"> <i class="fas fa-angle-right" aria-hidden="true"></i> </button> </nav> </section> <section class="pf-c-page__main-section pf-m-light"> <div class="pf-c-content"> <h1>Table demos</h1> <p>Below is an example of a Table.</p> </div> </section> <section class="pf-c-page__main-section pf-m-no-padding pf-m-padding-on-md"> <div class="pf-c-card"> <table class="pf-c-table pf-m-grid-xl" role="grid" aria-label="This is a sortable table example" id="page-layout-table-sortable-table"> <thead> <tr role="row"> <td class="pf-c-table__check" role="cell"> <input type="checkbox" name="check-all" aria-label="Select all rows" /> </td> <th class="pf-c-table__sort pf-m-selected" role="columnheader" aria-sort="ascending" scope="col"> <button class="pf-c-table__button"> <div class="pf-c-table__button-content"> <span class="pf-c-table__text">Repositories</span> <span class="pf-c-table__sort-indicator"> <i class="fas fa-long-arrow-alt-up"></i> </span> </div> </button> </th> <th class="pf-c-table__sort " role="columnheader" aria-sort="none" scope="col"> <button class="pf-c-table__button"> <div class="pf-c-table__button-content"> <span class="pf-c-table__text">Branches</span> <span class="pf-c-table__sort-indicator"> <i class="fas fa-arrows-alt-v"></i> </span> </div> </button> </th> <th class="pf-c-table__sort " role="columnheader" aria-sort="none" scope="col"> <button class="pf-c-table__button"> <div class="pf-c-table__button-content"> <span class="pf-c-table__text">Pull requests</span> <span class="pf-c-table__sort-indicator"> <i class="fas fa-arrows-alt-v"></i> </span> </div> </button> </th> <th 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">Workspaces</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">Last commit</span> <span class="pf-c-table__sort-indicator"> <i class="fas fa-arrows-alt-v"></i> </span> </div> </button> </th> <td role="cell"></td> <td role="cell"></td> </tr> </thead> <tbody role="rowgroup"> <tr role="row"> <td class="pf-c-table__check" role="cell"> <input type="checkbox" name="checkrow1" aria-labelledby="page-layout-table-sortable-table-node1" /> </td> <th role="columnheader" data-label="Repository name"> <div> <div id="page-layout-table-sortable-table-node1">Node 1</div> <a href="#">siemur/test-space</a> </div> </th> <td role="cell" data-label="Branches"> <span> <i class="fas fa-code-branch"></i> 10 </span> </td> <td role="cell" data-label="Pull requests"> <span> <i class="fas fa-code"></i> 25 </span> </td> <td role="cell" data-label="Workspaces"> <span> <i class="fas fa-cube"></i> 5 </span> </td> <td role="cell" data-label="Last commit">2 days ago</td> <td role="cell" data-label="Action"> <a href="#">Action link</a> </td> <td class="pf-c-table__action" role="cell"> <div class="pf-c-dropdown"> <button class="pf-c-dropdown__toggle pf-m-plain" type="button" id="page-layout-table-sortable-table-dropdown-kebab-right-aligned-1-button" aria-expanded="false" aria-label="Actions"> <i class="fas fa-ellipsis-v" aria-hidden="true"></i> </button> <ul class="pf-c-dropdown__menu pf-m-align-right" aria-labelledby="page-layout-table-sortable-table-dropdown-kebab-right-aligned-1-button" hidden> <li> <a class="pf-c-dropdown__menu-item" href="#">Link</a> </li> <li> <button class="pf-c-dropdown__menu-item" type="button">Action</button> </li> <li> <a class="pf-c-dropdown__menu-item pf-m-disabled" href="#" aria-disabled="true" tabindex="-1">Disabled link</a> </li> <li> <button class="pf-c-dropdown__menu-item" type="button" disabled>Disabled action</button> </li> <li class="pf-c-divider" role="separator"></li> <li> <a class="pf-c-dropdown__menu-item" href="#">Separated link</a> </li> </ul> </div> </td> </tr> <tr role="row"> <td class="pf-c-table__check" role="cell"> <input type="checkbox" name="checkrow2" aria-labelledby="page-layout-table-sortable-table-node2" /> </td> <th role="columnheader" data-label="Repository name"> <div> <div id="page-layout-table-sortable-table-node2">Node 2</div> <a href="#">siemur/test-space</a> </div> </th> <td role="cell" data-label="Branches"> <span> <i class="fas fa-code-branch"></i> 8 </span> </td> <td role="cell" data-label="Pull requests"> <span> <i class="fas fa-code"></i> 30 </span> </td> <td role="cell" data-label="Workspaces"> <span> <i class="fas fa-cube"></i> 2 </span> </td> <td role="cell" data-label="Last commit">2 days ago</td> <td role="cell" data-label="Action"> <a href="#">Action link</a> </td> <td class="pf-c-table__action" role="cell"> <div class="pf-c-dropdown"> <button class="pf-c-dropdown__toggle pf-m-plain" type="button" id="page-layout-table-sortable-table-dropdown-kebab-right-aligned-2-button" aria-expanded="false" aria-label="Actions"> <i class="fas fa-ellipsis-v" aria-hidden="true"></i> </button> <ul class="pf-c-dropdown__menu pf-m-align-right" aria-labelledby="page-layout-table-sortable-table-dropdown-kebab-right-aligned-2-button" hidden> <li> <a class="pf-c-dropdown__menu-item" href="#">Link</a> </li> <li> <button class="pf-c-dropdown__menu-item" type="button">Action</button> </li> <li> <a class="pf-c-dropdown__menu-item pf-m-disabled" href="#" aria-disabled="true" tabindex="-1">Disabled link</a> </li> <li> <button class="pf-c-dropdown__menu-item" type="button" disabled>Disabled action</button> </li> <li class="pf-c-divider" role="separator"></li> <li> <a class="pf-c-dropdown__menu-item" href="#">Separated link</a> </li> </ul> </div> </td> </tr> <tr role="row"> <td class="pf-c-table__check" role="cell"> <input type="checkbox" name="checkrow3" aria-labelledby="page-layout-table-sortable-table-node3" /> </td> <th role="columnheader" data-label="Repository name"> <div> <div id="page-layout-table-sortable-table-node3">Node 3</div> <a href="#">siemur/test-space</a> </div> </th> <td role="cell" data-label="Branches"> <span> <i class="fas fa-code-branch"></i> 12 </span> </td> <td role="cell" data-label="Pull requests"> <span> <i class="fas fa-code"></i> 48 </span> </td> <td role="cell" data-label="Workspaces"> <span> <i class="fas fa-cube"></i> 13 </span> </td> <td role="cell" data-label="Last commit">30 days ago</td> <td role="cell" data-label="Action"> <a href="#">Action link</a> </td> <td class="pf-c-table__action" role="cell"> <div class="pf-c-dropdown"> <button class="pf-c-dropdown__toggle pf-m-plain" type="button" id="page-layout-table-sortable-table-dropdown-kebab-right-aligned-3-button" aria-expanded="false" aria-label="Actions"> <i class="fas fa-ellipsis-v" aria-hidden="true"></i> </button> <ul class="pf-c-dropdown__menu pf-m-align-right" aria-labelledby="page-layout-table-sortable-table-dropdown-kebab-right-aligned-3-button" hidden> <li> <a class="pf-c-dropdown__menu-item" href="#">Link</a> </li> <li> <button class="pf-c-dropdown__menu-item" type="button">Action</button> </li> <li> <a class="pf-c-dropdown__menu-item pf-m-disabled" href="#" aria-disabled="true" tabindex="-1">Disabled link</a> </li> <li> <button class="pf-c-dropdown__menu-item" type="button" disabled>Disabled action</button> </li> <li class="pf-c-divider" role="separator"></li> <li> <a class="pf-c-dropdown__menu-item" href="#">Separated link</a> </li> </ul> </div> </td> </tr> <tr role="row"> <td class="pf-c-table__check" role="cell"> <input type="checkbox" name="checkrow4" aria-labelledby="page-layout-table-sortable-table-node4" /> </td> <th role="columnheader" data-label="Repository name"> <div> <div id="page-layout-table-sortable-table-node4">Node 4</div> <a href="#">siemur/test-space</a> </div> </th> <td role="cell" data-label="Branches"> <span> <i class="fas fa-code-branch"></i> 3 </span> </td> <td role="cell" data-label="Pull requests"> <span> <i class="fas fa-code"></i> 8 </span> </td> <td role="cell" data-label="Workspaces"> <span> <i class="fas fa-cube"></i> 20 </span> </td> <td role="cell" data-label="Last commit">8 days ago</td> <td role="cell" data-label="Action"> <a href="#">Action link</a> </td> <td class="pf-c-table__action" role="cell"> <div class="pf-c-dropdown"> <button class="pf-c-dropdown__toggle pf-m-plain" type="button" id="page-layout-table-sortable-table-dropdown-kebab-right-ali