PF-Table

ready

Introduction

Styling used for tabular information. In contrast to the .table component, .pf-table takes the approach of a single class to apply basic syling to an entire table, with a suite of additional classes to layer on additional information.

Examples

Base table styling

<div class="pf-table-overflow">
      <table class="pf-table">
        <thead>
          <tr class="">
            <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>ID</th>
            <th>Name</th>
            <th><a href="#" class="no-wrap">School and University name</a></th>
            <th>Series</th>
            <th><a href="#" class="no-wrap">Status</a></th>
          </tr>
        </thead>
        <tbody>
          <tr class="">
            <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>23456</td>
            <td>Luke Skywalker</td>
            <td><a href='#'>Columbia Business School of very long title established a few years ago based somewhere on the East Coast of the United States</a></td>
            <td>Series 10</td>
            <td><span class="pill">In progress</span></td>
          </tr>
          <tr class="">
            <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>23456</td>
            <td>Luke Skywalker</td>
            <td><a href='#'>Columbia Business School</a></td>
            <td>Series 10</td>
            <td><span class="pill">In progress</span></td>
          </tr>
        </tbody>
      </table>
    </div>
    

Boxed table styling

<div class="pf-table-overflow">
      <table class="pf-table">
        <thead>
          <tr class=" pf-table__box-row">
            <th><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>ID</th>
            <th>Name</th>
            <th><a href="#" class="no-wrap">School and University name</a></th>
            <th>Series</th>
            <th><a href="#" class="no-wrap">Status</a></th>
          </tr>
        </thead>
        <tbody>
          <tr class=" pf-table__box-row">
            <td><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>23456</td>
            <td>Luke Skywalker</td>
            <td><a href='#'>Columbia Business School of very long title established a few years ago based somewhere on the East Coast of the United States</a></td>
            <td>Series 10</td>
            <td><span class="pill">In progress</span></td>
          </tr>
          <tr class=" pf-table__box-row">
            <td><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>23456</td>
            <td>Luke Skywalker</td>
            <td><a href='#'>Columbia Business School</a></td>
            <td>Series 10</td>
            <td><span class="pill">In progress</span></td>
          </tr>
        </tbody>
      </table>
    </div>
    

Dependencies

• src/styles/base/*.scss
• src/styles/components/blocks/_pf-table.scss
• src/styles/components/blocks/_pf-table-overflow.scss

Usage