Table
ready

Introduction

Styling used for tabular information.

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

Examples

Base 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"><div class="input-checkbox" data-js="input-checkbox"><input id="1" name="1" type="checkbox" value="test" ><label for="1" class="label--hidden">Select all</label></div></th>
              <th class="table__th"><a href="#" class="link--silent no-wrap"><span class="icon-text">ID</span></a></th>
              <th class="table__th"><a href="#" class="link--silent no-wrap"><span class="icon-text">Name</span></a></th>
              <th class="table__th"><a href="#" class="link--silent no-wrap"><span class="icon-text">School</span></a></th>
              <th class="table__th"><a href="#" class="link--silent no-wrap"><span class="icon-text">Series</span></a></th>
              <th class="table__th"><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"><div class="input-checkbox" data-js="input-checkbox"><input id="2" name="2" type="checkbox" value="test" ><label for="2" class="label--hidden">Select</label></div></td>
              <td class="table__td">23456</td>
              <td class="table__td">Luke Skywalker</td>
              <td class="table__td">Columbia Business School</td>
              <td class="table__td">Series 10</td>
              <td class="table__td"><span class="pill">In progress</span></td>
            </tr>
            <tr class="table__tr">
              <td class="table__td"><div class="input-checkbox" data-js="input-checkbox"><input id="3" name="3" type="checkbox" value="test" ><label for="3" class="label--hidden">Select</label></div></td>
              <td class="table__td">23456</td>
              <td class="table__td">Luke Skywalker</td>
              <td class="table__td">Columbia Business School</td>
              <td class="table__td">Series 10</td>
              <td class="table__td"><span class="pill">In progress</span></td>
            </tr>
          </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