Tables

To use this module, follow the instructions in the README. (For background on PXd, read the Getting Started documentation.)

px-tables-design

How to Use

Install via command line:

bower install --save https://github.com/PredixDev/px-tables-design.git

Add to component Sass file:

@import "px-tables-design/_base.tables.scss";

Regular table

<table class=table>
  <tr>
    <th>…</th>
  </tr>
  <tr>
    <td>…</td>
  </tr>
</table>
Table heading Table heading Table heading Table heading
Table cell Table cell wide Table cell wide wide Table cell wide wide wide
Table cell Table cell Table cell Table cell
Table cell Table cell Table cell Table cell
Table cell Table cell Table cell Table cell

Equal column widths

Sass Flag

$inuit-enable-table--fixed : true;
Flag must be set before @import in component Sass file.

HTML

<table class="table table--fixed">
  <tr>
    <th>…</th>
  </tr>
  <tr>
    <td>…</td>
  </tr>
</table>
Table heading Table heading Table heading Table heading
Table cell Table cell wide Table cell wide wide Table cell wide wide wide
Table cell Table cell Table cell Table cell
Table cell Table cell Table cell Table cell
Table cell Table cell Table cell Table cell

Small cells

Sass Flag

$inuit-enable-table--small : true;
Flag must be set before @import in component Sass file.

HTML

<table class="table table--small">
  <tr>
    <th>…</th>
  </tr>
  <tr>
    <td>…</td>
  </tr>
</table>
Table heading Table heading Table heading Table heading
Table cell Table cell wide Table cell wide wide Table cell wide wide wide
Table cell Table cell Table cell Table cell
Table cell Table cell Table cell Table cell
Table cell Table cell Table cell Table cell

Large cells

Sass Flag

$inuit-enable-table--large : true;
Flag must be set before @import in component Sass file.

HTML

<table class="table table--large">
  <tr>
    <th>…</th>
  </tr>
  <tr>
    <td>…</td>
  </tr>
</table>
Table heading Table heading Table heading Table heading
Table cell Table cell wide Table cell wide wide Table cell wide wide wide
Table cell Table cell Table cell Table cell
Table cell Table cell Table cell Table cell
Table cell Table cell Table cell Table cell

Horizontal borders only

Sass Flag

$inuit-enable-table--rows : true;
Flag must be set before @import in component Sass file.

HTML

<table class="table table--rows">
  <tr>
    <th>…</th>
  </tr>
  <tr>
    <td>…</td>
  </tr>
</table>
Table heading Table heading Table heading Table heading
Table cell Table cell wide Table cell wide wide Table cell wide wide wide
Table cell Table cell Table cell Table cell
Table cell Table cell Table cell Table cell
Table cell Table cell Table cell Table cell

Vertical borders only

Sass Flag

$inuit-enable-table--columns : true;
Flag must be set before @import in component Sass file.

HTML

<table class="table table--columns">
  <tr>
    <th>…</th>
  </tr>
  <tr>
    <td>…</td>
  </tr>
</table>
Table heading Table heading Table heading Table heading
Table cell Table cell wide Table cell wide wide Table cell wide wide wide
Table cell Table cell Table cell Table cell
Table cell Table cell Table cell Table cell
Table cell Table cell Table cell Table cell

No borders

Sass Flag

$inuit-enable-table--no-cells : true;
Flag must be set before @import in component Sass file.

HTML

<table class="table table--no-cells">
  <tr>
    <th>…</th>
  </tr>
  <tr>
    <td>…</td>
  </tr>
</table>
Table heading Table heading Table heading Table heading
Table cell Table cell wide Table cell wide wide Table cell wide wide wide
Table cell Table cell Table cell Table cell
Table cell Table cell Table cell Table cell
Table cell Table cell Table cell Table cell