Table
ready

Introduction

Styling used for tabular information.

Have you seen the newer .pf-table version of this component?

Examples

Base table styling

<div class="table-scroll-x">
      <table class="table">
          <thead>
          </thead>
          <tbody>
          </tbody>
      </table>
    </div>

Boxed table styling

 ID Name School Series Status
23456 Luke Skywalker Columbia Business School Series 10 In progress
23456 Luke Skywalker Columbia Business School Series 10 In progress 
<div class="table-scroll-x">
      <table class="table">
          <thead>
            <tr class="table__tr">
              <th class="table__th table__th--boxed"><div class="input-checkbox" data-js="input-checkbox"><input id="1b" name="1b" type="checkbox" value="test" ><label for="1b" class="label--hidden">Select all</label></div></th>
              <th class="table__th table__th--boxed"><a href="#" class="link--silent no-wrap"><span class="icon-text">ID</span></a></th>
              <th class="table__th table__th--boxed"><a href="#" class="link--silent no-wrap"><span class="icon-text">Name</span></a></th>
              <th class="table__th table__th--boxed"><a href="#" class="link--silent no-wrap"><span class="icon-text">School</span></a></th>
              <th class="table__th table__th--boxed"><a href="#" class="link--silent no-wrap"><span class="icon-text">Series</span></a></th>
              <th class="table__th table__th--boxed"><a href="#" class="link--silent no-wrap"><span class="icon-text">Status</span></a></th>
            </tr>
          </thead>
          <tbody>
            <tr class="table__tr">
              <td class="table__td table__td--boxed"><div class="input-checkbox" data-js="input-checkbox"><input id="2b" name="2b" type="checkbox" value="test" ><label for="2b" class="label--hidden">Select</label></div></td>
              <td class="table__td table__td--boxed">23456</td>
              <td class="table__td table__td--boxed">Luke Skywalker</td>
              <td class="table__td table__td--boxed">Columbia Business School</td>
              <td class="table__td table__td--boxed">Series 10</td>
              <td class="table__td table__td--boxed"><span class="pill">In progress</span></td>
            </tr>
            <tr class="table__tr">
              <td class="table__td table__td--boxed"><div class="input-checkbox" data-js="input-checkbox"><input id="3b" name="3b" type="checkbox" value="test" ><label for="3b" class="label--hidden">Select</label></div></td>
              <td class="table__td table__td--boxed">23456</td>
              <td class="table__td table__td--boxed">Luke Skywalker</td>
              <td class="table__td table__td--boxed">Columbia Business School</td>
              <td class="table__td table__td--boxed">Series 10</td>
              <td class="table__td table__td--boxed"><span class="pill">In progress</span></td>
            </tr>
          </tbody>
      </table>
    </div>

Dependencies

  • src/styles/base/*.scss
  • src/styles/components/blocks/_table.scss

Usage

Class/JavaScript Hook Description Required?
.table Placed on the tag that represents the table. Required
.table__th Placed on all table head cells. Required
.table__tr Placed on all table rows. Required
.table__td Placed on all table cells. Required
.table__[td/th]--boxed Placed on any cell that needs borders all round. Optional
.table-scroll-x Placed on block level tag that wraps the table that will allow the table to scroll horizontally should the table be wider than the available space. More breakpoint-dependent classes can be added as needed. Optional