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	Download
123456	24 €	Subscription	disabled error	16 Mar. 2018	Download

<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>