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

 ID Name School and University name Series Status
23456 Luke Skywalker Columbia Business School of very long title established a few years ago based somewhere on the East Coast of the United States Series 10 In progress
23456 Luke Skywalker Columbia Business School Series 10 In progress 

    <div class="pf-table-overflow">
      <table class="pf-table pf-table--stripe">
        <thead>
          <tr class="">
            <th class=""><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="">ID</th>
            <th class="">Name</th>
            <th class=""><a href="#" class="no-wrap">School and University name</a></th>
            <th class="">Series</th>
            <th class=""><a href="#" class="no-wrap">Status</a></th>
          </tr>
        </thead>
    
    
        <tbody>
          <tr class="">
            <td class=""><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="">23456</td>
            <td class="">Luke Skywalker</td>
            <td class=""><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 class="">Series 10</td>
            <td class=""><span class="pill">In progress</span></td>
          </tr>
          <tr class="">
            <td class=""><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="">23456</td>
            <td class="">Luke Skywalker</td>
            <td class=""><a href='#'>Columbia Business School</a></td>
            <td class="">Series 10</td>
            <td class=""><span class="pill">In progress</span></td>
          </tr>
        </tbody>
      </table>
    </div>

Boxed table styling

 ID Name School and University name Series Status
23456 Luke Skywalker Columbia Business School of very long title established a few years ago based somewhere on the East Coast of the United States Series 10 In progress
23456 Luke Skywalker Columbia Business School Series 10 In progress 

    <div class="pf-table-overflow">
      <table class="pf-table">
        <thead>
          <tr class=" pf-table__box-row">
            <th class=""><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="">ID</th>
            <th class="">Name</th>
            <th class=""><a href="#" class="no-wrap">School and University name</a></th>
            <th class="">Series</th>
            <th class=""><a href="#" class="no-wrap">Status</a></th>
          </tr>
        </thead>
    
    
        <tbody>
          <tr class=" pf-table__box-row">
            <td class=""><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="">23456</td>
            <td class="">Luke Skywalker</td>
            <td class=""><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 class="">Series 10</td>
            <td class=""><span class="pill">In progress</span></td>
          </tr>
          <tr class=" pf-table__box-row">
            <td class=""><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="">23456</td>
            <td class="">Luke Skywalker</td>
            <td class=""><a href='#'>Columbia Business School</a></td>
            <td class="">Series 10</td>
            <td class=""><span class="pill">In progress</span></td>
          </tr>
        </tbody>
      </table>
    </div>

Stripe table

head row
body row
body row
body row
body row
body row
body row 

    <div class="pf-table-overflow">
      <table class="pf-table pf-table--stripe">
        <thead>
          <tr class="">
            <th class="">head row</th>
          </tr>
        </thead>
    
    
        <tbody>
          <tr class="">
            <td class="">body row</td>
          </tr>
          <tr class="">
            <td class="">body row</td>
          </tr>
          <tr class="">
            <td class="">body row</td>
          </tr>
          <tr class="">
            <td class="">body row</td>
          </tr>
          <tr class="">
            <td class="">body row</td>
          </tr>
          <tr class="">
            <td class="">body row</td>
          </tr>
        </tbody>
      </table>
    </div>

Invisible table

 23456 Luke Skywalker Columbia Business School of very long title established a few years ago based somewhere on the East Coast of the United States Series 10 In progress
23456 Luke Skywalker Columbia Business School Series 10 In progress 
<div class="bg--grey-xlight" style="padding: 1em">
    <div class="pf-table-overflow pf-table-overflow--white">
      <table class="pf-table pf-table--invisible">
    
    
        <tbody>
          <tr class="">
            <td class=""><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="">23456</td>
            <td class="">Luke Skywalker</td>
            <td class=""><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 class="">Series 10</td>
            <td class=""><span class="pill">In progress</span></td>
          </tr>
          <tr class="">
            <td class=""><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="">23456</td>
            <td class="">Luke Skywalker</td>
            <td class=""><a href='#'>Columbia Business School</a></td>
            <td class="">Series 10</td>
            <td class=""><span class="pill">In progress</span></td>
          </tr>
        </tbody>
      </table>
    </div>
    </div>

Budget summary table

    Currency Study period
(DATE - DATE)		 Total
  Cost of Attendance USD 44,370.00 88,740.00
  Outstanding funds      
  Scholarships   0.00 0.00
  Company sponsorships   0.00 0.00
  Other loans   0.00 0.00
  Loans from Prodigy   43,370.00 88,740.00
  Savings   10,000.00 20,000.00 

    <div class="pf-table-overflow">
      <table class="pf-table pf-table--budget-summary">
        <thead>
          <tr class="">
            <th class="">&nbsp;</th>
            <th class="">&nbsp;</th>
            <th class="">Currency</th>
            <th class="">Study period<br>(DATE - DATE)</th>
            <th class="">Total</th>
          </tr>
          <tr class="">
            <th class="">&nbsp;</th>
            <th class=" pf-table--budget-summary__left">Cost of Attendance</th>
            <th class="">USD</th>
            <th class="">44,370.00</th>
            <th class="">88,740.00</th>
          </tr>
        </thead>
    
        <tfoot>
          <tr class="">
            <th class="">&nbsp;</th>
            <th class=" pf-table--budget-summary__left">Outstanding funds</th>
            <th class="">&nbsp;</th>
            <th class="">&nbsp;</th>
            <th class="">&nbsp;</th>
          </tr>
        </tfoot>
    
        <tbody>
          <tr class="">
            <td class="">&nbsp;</td>
            <td class=" pf-table--budget-summary__left">Scholarships</td>
            <td class="">&nbsp;</td>
            <td class="">0.00</td>
            <td class="">0.00</td>
          </tr>
          <tr class="">
            <td class="">&nbsp;</td>
            <td class=" pf-table--budget-summary__left">Company sponsorships</td>
            <td class="">&nbsp;</td>
            <td class="">0.00</td>
            <td class="">0.00</td>
          </tr>
          <tr class="">
            <td class="">&nbsp;</td>
            <td class=" pf-table--budget-summary__left">Other loans</td>
            <td class="">&nbsp;</td>
            <td class="">0.00</td>
            <td class="">0.00</td>
          </tr>
          <tr class="">
            <td class="">&nbsp;</td>
            <td class=" pf-table--budget-summary__left">Loans from Prodigy</td>
            <td class="">&nbsp;</td>
            <td class="">43,370.00</td>
            <td class="">88,740.00</td>
          </tr>
          <tr class="">
            <td class="">&nbsp;</td>
            <td class=" pf-table--budget-summary__left">Savings</td>
            <td class="">&nbsp;</td>
            <td class="">10,000.00</td>
            <td class="">20,000.00</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

Class/JavaScript Hook Description Required?
.pf-table Placed on the tag that represents the table. Required
.pf-table--stripe Extends the pf-table class so child rows have stripes Optional
.pf-table--invisible Extends the pf-table class so no cells have a border Optional
.pf-table-overflow Place on a wrapper element directly surrounding the table and will allow the table to become scrollable within a narrower viewport Optional
.pf-table-overflow--white Extension of pf-table-overflow so background is white Optional
.pf-table__box-row Place on a tr element. Will make all descendant th and td elements display borders. Optional
.pf-table__cell-align-right Place on a td or th element. Will make all content align to the right Optional