Design system

Navigation

Tables

Style simple-table

Invoices
id Amount Type Status Date Comment
123456 24 € Subscription active default origin 16 Mar. 2018 Lorem ipsum
123456 24 € Subscription disabled error 16 Mar. 2018 Dolor si amet

Design rule: you may use small buttons/toggle/etc. in tables.
(for Status styles, have a look at Status section)

Design rule: if the last column is an “action” one, the last column should be right-aligned. To do so, please add the modifier pm-simple-table--has-actions class to achieve it. Example:

Invoices
id Amount Type Status Date Action
123456 24 € Subscription active default origin 16 Mar. 2018
123456 24 € Subscription disabled error 16 Mar. 2018 

<table class="pm-simple-table noborder border-collapse pm-simple-table--has-actions">
  <caption class="sr-only">Invoices</caption>
  <thead>
    <tr>
      <th scope="col">id</th>
      <th scope="col">Amount</th>
      <th scope="col">Type</th>
      <th scope="col">Status</th>
      <th scope="col">Date</th>
      <th scope="col">Action</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>123456</td>
      <td>24 €</td>
      <td>Subscription</td>
      <td>
         <span class="badgeLabel-success">active</span>
         <span class="badgeLabel-blue">default</span>
         <span class="badgeLabel-grey">origin</span>
      </td>
      <td>16 Mar. 2018</td>
      <td><button type="button" class="pm-button">Download</button></td>
    </tr>
    <tr>
      <td>123456</td>
      <td>24 €</td>
      <td>Subscription</td>
      <td>
        <span class="badgeLabel-warning">disabled</span>
        <span class="badgeLabel-error">error</span>
      </td>
      <td>16 Mar. 2018</td>
      <td><button type="button" class="pm-button pm-button--small">Download</button></td>
    </tr>
  </tbody>
</table>

If you need a th without any default styles, use pm-simple-table-row-th.

Alternate background-color for rows

Please use pm-simple-table--alternate-bg-row modifier on table tag, and… that’s all. :)

Invoices
id Amount Type Status Date Comment
123456 24 € Subscription active default origin 16 Mar. 2018 Lorem ipsum
123456 24 € Subscription disabled error 16 Mar. 2018 Dolor si amet
123456 24 € Subscription disabled error 16 Mar. 2018 Dolor si amet
123456 24 € Subscription disabled error 16 Mar. 2018 Dolor si amet
123456 24 € Subscription disabled error 16 Mar. 2018 Dolor si amet

If you need a bordered version of the previous table, use pm-simple-table--bordered modifier.

Invoices
id Amount Type Status Date Comment
123456 24 € Subscription active default origin 16 Mar. 2018 Lorem ipsum
123456 24 € Subscription disabled error 16 Mar. 2018 Dolor si amet
123456 24 € Subscription disabled error 16 Mar. 2018 Dolor si amet
123456 24 € Subscription disabled error 16 Mar. 2018 Dolor si amet
123456 24 € Subscription disabled error 16 Mar. 2018 Dolor si amet

“Plans” table, highlight plan styles

VPN Plans
Free Basic Plus Visionary
Pricing 123456 123456 123456 123456
Countries 123456 123456 123456 123456
Lorem ipsum 123456 123456 123456 123456
  • Use pm-plans-table class on table.
  • To highlight the 2nd plan:
    • use class pm-table--highlight and specify data-plan-number="2" attribute on table tag
    • and specify the text in data-highlight="" attribute on first line, on each th.
  • For the first cell of lines, use th scope="row" and pm-simple-table-row class applied to it.
  • If there are more than 4 plans, remember to update $nb-plans-max Sass variable.

<table class="pm-plans-table pm-table--highlight noborder" data-plan-number="2">
  <caption>VPN Plans</caption>
  <thead>
    <tr>
      <th scope="col"></th>
      <th scope="col" class="aligncenter" data-highlight="Free subscription">Free</th>
      <th scope="col" class="aligncenter color-vpnbasic" data-highlight="This is good">Basic</th>
      <th scope="col" class="aligncenter color-vpnplus" data-highlight="This is better">Plus</th>
      <th scope="col" class="aligncenter color-visionary" data-highlight="My Lord.">Visionary</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row" class="pm-simple-table-row alignleft pm-plans-table-row--highlighted">Pricing</th>
      <td class="aligncenter pm-plans-table-row--highlighted">123456</td>
      <td class="aligncenter pm-plans-table-row--highlighted">123456</td>
      <td class="aligncenter pm-plans-table-row--highlighted">123456</td>
      <td class="aligncenter pm-plans-table-row--highlighted">123456</td>
    </tr>
    <tr>
      <th scope="row" class="pm-simple-table-row alignleft pm-plans-table-row--highlighted">Countries</th>
      <td class="aligncenter">123456</td>
      <td class="aligncenter">123456</td>
      <td class="aligncenter">123456</td>
      <td class="aligncenter">123456</td>
    </tr>
  </tbody>
</table>