PF Next

Simple Table

Preview

Repositories Branches Pull requests Workspaces Last Commit
Repository 1 10 25 5 2 days ago
Repository 2 10 25 5 2 days ago
<table class="pf-c-table pf-m-grid-md" role="grid" aria-label="This is a simple table example">
  <thead>
    <tr>
      <th>
        Repositories
      </th>
      <th>
        Branches
      </th>
      <th>
        Pull requests
      </th>
      <th>
        Workspaces
      </th>
      <th>
        Last Commit
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-label="Repository Name">
        Repository 1
      </td>
      <td data-label="Branches">
        10
      </td>
      <td data-label="Pull Requests">
        25
      </td>
      <td data-label="Workspaces">
        5
      </td>
      <td data-label="Last Commit">
        2 days ago
      </td>
    </tr>
    <tr>
      <td data-label="Repository Name">
        Repository 2
      </td>
      <td data-label="Branches">
        10
      </td>
      <td data-label="Pull Requests">
        25
      </td>
      <td data-label="Workspaces">
        5
      </td>
      <td data-label="Last Commit">
        2 days ago
      </td>
    </tr>
  </tbody>
</table>

Accessibility

Attribute Applied To Outcome
role="grid" .pf-c-table Identifies the element that serves as the grid widget container. Required
aria-label .pf-c-table Provides an accessible name for the table when a descriptive <caption> or <h*> is not available. Required in the absence of <caption> or <h*>
data-label="[td description]" <td> This attribute replaces table header in mobile viewport. It is rendered by ::before pseudo element.

Usage

Class Applied To Outcome
.pf-c-table <table> Initiates a table element. Required

Sortable Table

Preview

Workspaces Last Commit
Repository 1 10 25 5 2 days ago
Repository 2 10 25 5 2 days ago
<table class="pf-c-table pf-m-grid-lg" role="grid" aria-label="This is a sortable table example">
  <thead>
    <tr>
      <th class="pf-c-table__sort pf-m-ascending " aria-sort="ascending" scope="col">
        <button>
          Repositories
          <span class="pf-c-table__sort-indicator">
                <i class="fas fa-angle-up"></i>
            </span>
        </button>
      </th>
      <th class="pf-c-table__sort " scope="col">
        <button>
          Branches
          <span class="pf-c-table__sort-indicator">
                <i class="fas fa-sort"></i>
                    </span>
        </button>
      </th>
      <th class="pf-c-table__sort " scope="col">
        <button>
          Pull requests
          <span class="pf-c-table__sort-indicator">
                <i class="fas fa-sort"></i>
                    </span>
        </button>
      </th>
      <th scope="col">
        Workspaces
      </th>
      <th scope="col">
        Last Commit
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-label="Repository Name">
        Repository 1
      </td>
      <td data-label="Branches">
        10
      </td>
      <td data-label="Pull Requests">
        25
      </td>
      <td data-label="Workspaces">
        5
      </td>
      <td data-label="Last Commit">
        2 days ago
      </td>
    </tr>
    <tr>
      <td data-label="Repository Name">
        Repository 2
      </td>
      <td data-label="Branches">
        10
      </td>
      <td data-label="Pull Requests">
        25
      </td>
      <td data-label="Workspaces">
        5
      </td>
      <td data-label="Last Commit">
        2 days ago
      </td>
    </tr>
  </tbody>
</table>

All simple table accessibility and usage requirements apply.

Accessibility

Attribute Applied To Outcome
aria-sort=[ascending or descending] .pf-c-table__sort Indicates if columns in a table are sorted in ascending or descending order. For each table, authors SHOULD apply aria-sort to only one header at a time. Required

Usage

Class Applied To Outcome
.pf-c-table__sort <th> Initiates a sort table cell. Required for sortable table columns
.pf-m-ascending .pf-c-table__sort Modifies for sort ascending state. Required for sortable table columns
.pf-m-descending .pf-c-table__sort Modifies for sort descending state. Required for sortable table columns
.pf-c-table__sort-indicator .pf-c-table__sort > button > span Initiates a sort indicator. Required for sortable table columns
.fa-sort .pf-c-table__sort > button > span > .fas Initiates icon within unsorted, sortable table header. Required for sortable table columns
.fa-angle-up .pf-c-table__sort > button > span > .fas Initiates icon within sorted, sortable table header. Required for sortable table columns

Table with checkboxes and actions

Preview

Repositories Branches Pull requests Workspaces Last Commit
Node 1 10 25 5 2 days ago
Node 2 siemur/test-space 10 25 5 2 days ago
<table class="pf-c-table pf-m-grid-lg" role="grid" aria-label="This is a table with checkboxes">
  <thead>
    <tr>
      <td class="pf-c-table__check">
        <input class="pf-c-check__input" type="checkbox" name="check-all" aria-label="Select all rows">
      </td>
      <th scope="col">
        Repositories
      </th>
      <th scope="col">
        Branches
      </th>
      <th scope="col">
        Pull requests
      </th>
      <th scope="col">
        Workspaces
      </th>
      <th scope="col">
        Last Commit
      </th>
      <td>
      </td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="pf-c-table__check">
        <input class="pf-c-check__input" type="checkbox" name="checkrow1" aria-labelledby="simple-node1">
      </td>
      <th data-label="Repository Name">
        <span id="simple-node1">Node 1</span>
      </th>
      <td data-label="Branches">
        10
      </td>
      <td data-label="Pull Requests">
        25
      </td>
      <td data-label="Workspaces">
        5
      </td>
      <td data-label="Last Commit">
        2 days ago
      </td>
      <td class="pf-c-table__action">
        <button class="pf-c-button">
          <i class="fas fa-ellipsis-v"></i>
        </button>
      </td>
    </tr>
    <tr>
      <td class="pf-c-table__check">
        <input class="pf-c-check__input" type="checkbox" name="checkrow2" aria-labelledby="simple-node2">
      </td>
      <th data-label="Repository Name">
        <span id="simple-node2">Node 2</span>
        <a href="#">siemur/test-space</a>
      </th>
      <td data-label="Branches">
        10
      </td>
      <td data-label="Pull Requests">
        25
      </td>
      <td data-label="Workspaces">
        5
      </td>
      <td data-label="Last Commit">
        2 days ago
      </td>
      <td class="pf-c-table__action">
        <button class="pf-c-button">
          <i class="fas fa-ellipsis-v"></i>
        </button>
      </td>
    </tr>
  </tbody>
</table>

All simple table accessibility and usage requirements apply
All sortable table accessibility and usage requirements apply

Note: When including interactive elements in a table, the primary, descriptive cell in the corresponding row is a <th>, rather than a <td>. In this example, 'Node 1' and 'Node 2 siemur/test-space' are <th>s.

Note: When header cells are empty or they contain interactive elements, <th> should be replaced with <td>.

Thead Accessibility

Attribute Applied To Outcome
aria-label="[descriptive text]" .pf-c-table__check Provides an accessible name for checkbox header cells. Required

Tbody Accessibility

Attribute Applied To Outcome
aria-labelledby="{title_cell_id} {element_id}" .pf-c-check__input, .pf-c-button Provides an accessible name for special cells containing interactive elements. Required
aria-label="[descriptive text]" .pf-c-check__input, .pf-c-button Provides an accessible name for checkboxes and buttons. Required
id title cell <th> > <span>, .pf-c-check__input, .pf-c-button Provides an accessible description for special cells. Required

Usage

Class Applied To Outcome
.pf-c-table__check <th>, <td> Initiates a check table cell.
.pf-c-table__action <th>, <td> Initiates an action table cell.

Expandable Table

Preview

Branches Pull requests
Node 1 10 25 Link 1
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Node 2 siemur/test-space 10 25 Link 2
<table class="pf-c-table pf-u-box-shadow-md pf-m-grid-lg" role="grid" aria-label="Expandable table example">
  <thead>
    <tr>
      <td>
      </td>
      <td class="pf-c-table__check">
        <input class="pf-c-check__input" type="checkbox" name="check-all" aria-label="Select all rows">
      </td>
      <th class="pf-c-table__sort pf-m-ascending pf-m-width-30" aria-sort="ascending" scope="col">
        <button>
          Repositories
          <span class="pf-c-table__sort-indicator">
                <i class="fas fa-angle-up"></i>
            </span>
        </button>
      </th>
      <th scope="col">
        Branches
      </th>
      <th scope="col">
        Pull requests
      </th>
      <td>
      </td>
      <td>
      </td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="pf-c-table__toggle">
        <button class="pf-c-button pf-m-plain pf-m-expanded" aria-labelledby="expandable-node1 expandable-toggle1" id="expandable-toggle1" aria-label="Details" aria-expanded="true">
          <i class="fas fa-angle-down"></i>
        </button>
      </td>
      <td class="pf-c-table__check">
        <input class="pf-c-check__input" type="checkbox" name="checkrow1" aria-labelledby="expandable-node1">
      </td>
      <th data-label="Repository Name">
        <span id="expandable-node1">Node 1</span>
      </th>
      <td data-label="Branches">
        10
      </td>
      <td data-label="Pull Requests">
        25
      </td>
      <td data-label="Action">
        <a href="#">Link 1</a>
      </td>
      <td class="pf-c-table__action">
        <button class="pf-c-button">
          <i class="fas fa-ellipsis-v"></i>
        </button>
      </td>
    </tr>
    <tr class="pf-c-table__expandable-row pf-m-expanded">
      <td>
      </td>
      <td>
      </td>
      <td colspan="4">
        <div class="pf-c-table__expandable-row-content">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
          in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </div>
      </td>
      <td>
      </td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td class="pf-c-table__toggle">
        <button class="pf-c-button pf-m-plain" aria-labelledby="expandable-node2 expandable-toggle2" id="expandable-toggle2" aria-label="Details" aria-expanded="false">
          <i class="fas fa-angle-down"></i>
        </button>
      </td>
      <td class="pf-c-table__check">
        <input class="pf-c-check__input" type="checkbox" name="checkrow2" aria-labelledby="expandable-node2">
      </td>
      <th data-label="Repository Name">
        <span id="expandable-node2">Node 2</span>
        <a href="#">siemur/test-space</a>
      </th>
      <td data-label="Branches">
        10
      </td>
      <td data-label="Pull Requests">
        25
      </td>
      <td data-label="Action">
        <a href="#">Link 2</a>
      </td>
      <td class="pf-c-table__action">
        <button class="pf-c-button">
          <i class="fas fa-ellipsis-v"></i>
        </button>
      </td>
    </tr>
    <tr class="pf-c-table__expandable-row" hidden>
      <td>
      </td>
      <td>
      </td>
      <td colspan="4">
        <div class="pf-c-table__expandable-row-content">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
          in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </div>
      </td>
      <td>
      </td>
    </tr>
  </tbody>
</table>

Table Expandable Notes

All simple table accessibility and usage requirements apply.
All sortable table accessibility and usage requirements apply.
All checkbox/action button accessibility and usage requirements apply.

Accessibility

Attribute Applied To Outcome
aria-expanded="true" .pf-c-table__toggle > .pf-c-button Indicates that the row is visible. Required
aria-label="[descriptive text]" .pf-c-table__toggle > .pf-c-button Provides an accessible name for toggle button. Required
aria-labelledby="{title_cell_id} {button_id}" .pf-c-table__toggle > .pf-c-button Provides an accessible description for toggle button. Required
id="{button_id}" .pf-c-table__toggle > .pf-c-button Provides a reference for toggle button description. Required

Usage

Class Applied To Outcome
.pf-c-table__expandable-row <tr> Initiates an expandable row
.pf-c-table__expandable-row-content .pf-c-table__expandable-row > <td> > <div> Initiates an expandable row content wrapper.
.pf-m-expanded .pf-c-table__toggle > .pf-c-button, .pf-c-table__expandable-row Modifies for expanded state.

Compact Table

Preview

Contributor Position Location Last Seen Numbers Icons
Andres Galant CSS Guru Not too sure May 9, 2018 0556 Link 1
Jenny Haines Visual Design Raleigh May 9, 2018 9492 Link 2
Kyle Baker Visual Design Lead Westford May 9, 2018 9929 Link 3
<table class="pf-c-table pf-m-compact pf-m-grid-md" role="grid" aria-label="This is a compact table example">
  <thead>
    <tr>
      <td class="pf-c-table__check">
        <input class="pf-c-check__input" type="checkbox" name="check-all" aria-label="Select all rows">
      </td>
      <th scope="col">
        Contributor
      </th>
      <th scope="col">
        Position
      </th>
      <th scope="col">
        Location
      </th>
      <th scope="col">
        Last Seen
      </th>
      <th scope="col">
        Numbers
      </th>
      <th class="pf-u-text-align-center" scope="col">
        Icons
      </th>
      <th>
      </th>
      <th>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="pf-c-table__check">
        <input class="pf-c-check__input" type="checkbox" name="checkrow1" aria-labelledby="name1">
      </td>
      <th data-label="Contributor Name">
        <span id="name1">Andres Galant</span>
      </th>
      <td data-label="Position">
        CSS Guru
      </td>
      <td data-label="Location">
        Not too sure
      </td>
      <td data-label="Workspaces">
        May 9, 2018
      </td>
      <td data-label="Last Commit">
        0556
      </td>
      <td class="pf-u-text-align-center" data-label="Icon">
        <i class="fas fa-check"></i>
      </td>
      <td data-label="Action">
        <a href="#">Link 1</a>
      </td>
      <td class="pf-c-table__action">
        <button class="pf-c-button">
          <i class="fas fa-ellipsis-v"></i>
        </button>
      </td>
    </tr>
    <tr>
      <td class="pf-c-table__check">
        <input class="pf-c-check__input" type="checkbox" name="checkrow2" aria-labelledby="name2">
      </td>
      <th data-label="Contributor Name">
        <span id="name2">Jenny Haines</span>
      </th>
      <td data-label="Position">
        Visual Design
      </td>
      <td data-label="Location">
        Raleigh
      </td>
      <td data-label="Workspaces">
        May 9, 2018
      </td>
      <td data-label="Last Commit">
        9492
      </td>
      <td class="pf-u-text-align-center" data-label="Icon">
        <i class="fas fa-check"></i>
      </td>
      <td data-label="Action">
        <a href="#">Link 2</a>
      </td>
      <td class="pf-c-table__action">
        <button class="pf-c-button">
          <i class="fas fa-ellipsis-v"></i>
        </button>
      </td>
    </tr>
    <tr>
      <td class="pf-c-table__check">
        <input class="pf-c-check__input" type="checkbox" name="checkrow3" aria-labelledby="name3">
      </td>
      <th data-label="Contributor Name">
        <span id="name3">Kyle Baker</span>
      </th>
      <td data-label="Position">
        Visual Design Lead
      </td>
      <td data-label="Location">
        Westford
      </td>
      <td data-label="Workspaces">
        May 9, 2018
      </td>
      <td data-label="Last Commit">
        9929
      </td>
      <td class="pf-u-text-align-center" data-label="Icon">
        <i class="fas fa-check"></i>
      </td>
      <td data-label="Action">
        <a href="#">Link 3</a>
      </td>
      <td class="pf-c-table__action">
        <button class="pf-c-button">
          <i class="fas fa-ellipsis-v"></i>
        </button>
      </td>
    </tr>
  </tbody>
</table>

Table Expandable Notes

All simple table accessibility and usage requirements apply.
All sortable table accessibility and usage requirements apply.
All checkbox/action button accessibility and usage requirements apply.

Usage

Class Applied To Outcome
.pf-m-compact .pf-c-table Modifies for a compact table.

Table with Width Modifiers

Preview

Workspaces Last Commit
Node 1 10 25 5 2 days ago
Node 2 siemur/test-space 10 25 5 2 days ago
<table class="pf-c-table pf-m-grid-md" role="grid" aria-label="This is a width modifier expandable">
  <thead>
    <tr>
      <td class="pf-c-table__check">
        <input class="pf-c-check__input" type="checkbox" name="check-all" aria-label="Check all rows">
      </td>
      <th class="pf-c-table__sort pf-m-ascending pf-m-width-40" aria-sort="ascending" scope="col">
        <button>
          Repositories
          <span class="pf-c-table__sort-indicator">
                <i class="fas fa-angle-up"></i>
            </span>
        </button>
      </th>
      <th class="pf-c-table__sort " scope="col">
        <button>
          Branches
          <span class="pf-c-table__sort-indicator">
                <i class="fas fa-sort"></i>
                    </span>
        </button>
      </th>
      <th class="pf-c-table__sort " scope="col">
        <button>
          Pull requests
          <span class="pf-c-table__sort-indicator">
                <i class="fas fa-sort"></i>
                    </span>
        </button>
      </th>
      <th class="pf-m-fit-content" scope="col">
        Workspaces
      </th>
      <th class="pf-m-fit-content" scope="col">
        Last Commit
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="pf-c-table__check">
        <input class="pf-c-check__input" type="checkbox" name="checkrow1" aria-labelledby="width-node1">
      </td>
      <th data-label="Repository Name">
        <span id="width-node1">Node 1</span>
      </th>
      <td data-label="Branches">
        10
      </td>
      <td data-label="Pull Requests">
        25
      </td>
      <td data-label="Workspaces">
        5
      </td>
      <td data-label="Last Commit">
        2 days ago
      </td>
    </tr>
    <tr>
      <td class="pf-c-table__check">
        <input class="pf-c-check__input" type="checkbox" name="checkrow2" aria-labelledby="width-node2">
      </td>
      <th data-label="Repository Name">
        <span id="width-node2">Node 2</span>
        <a href="#">siemur/test-space</a>
      </th>
      <td data-label="Branches">
        10
      </td>
      <td data-label="Pull Requests">
        25
      </td>
      <td data-label="Workspaces">
        5
      </td>
      <td data-label="Last Commit">
        2 days ago
      </td>
    </tr>
  </tbody>
</table>

Table Expandable Notes

All simple table accessibility and usage requirements apply.
All sortable table accessibility and usage requirements apply.
All checkbox/action button accessibility and usage requirements apply.

Usage

Class Applied To Outcome
.pf-m-width-{10, 15, 20, 25, 30, 35, 40, 45, 50, 60, 70, 80, or 90} <th>, <td> Percentage based modifier for th and td widths. Recommended for sortable title cell
.pf-m-width-max <th>, <td> Percentage based modifier for th and td maximum width.
.pf-m-fit-content <th>, <td> Percentage based modifier for th and td minimum width with no text wrapping.

Documentation

Overview

Because the table component is not used for layout and presents tabular data only, it requires the use of role="grid". Expandable table content (.pf-c-table__expandable-content) is placed within a singular <td> per expandable row, that can span multiple columns.

Role="grid"

Applying role="grid" to tables enhances accessible interaction while in table layout, however the responsive, css grid based layout can cause unexpected interactions. Therefore, for css grid layout, it is recommended that role="grid" be removed.

Sortable Tables

Table columns may shift when expanding/collapsing. To address this, set .pf-m-fit-content, or assign a width .pf-m-width-[width] to the corresponding <th> defining the column or <td> within the column. Width values are [10, 15, 20, 25, 30, 35, 40, 45, 50, 60, 70, 80, 90] or max.

Table Header Cells

By default, all table header cells are set to white-space: nowrap. If a <th>'s content needs to wrap, apply .pf-m-wrap.

Implementation Support

  • One expandable toggle button, positioned in the first cell of a non-expandable row, preceding an expandable row.
  • One checkbox, positioned in the first or second cell of a non-expandable row.
  • One action button, positioned in the last cell of a non-expandable row.
  • Tabular data.
  • Compact presentation modifier (not compatible with expandable table).

Responsive layout modifiers

Class Applied To Outcome
.pf-m-grid-md, .pf-m-grid-lg .pf-c-table Changes tabular layout to responsive, grid based layout at suffixed breakpoint.
.pf-m-grid .pf-c-table Changes tabular layout to responsive, grid based layout. This approach requires JavaScript to set this class at some prescribed viewport width value.

Extra modifiers

Class Applied To Outcome
.pf-m-wrap <th>, <td> Modifies content to wrap.