Navigation
Tables
Style simple-table
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:
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. :)
If you need a bordered version of the previous table, use pm-simple-table--bordered
modifier.
“Plans” table, highlight plan styles
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 ontable
. - To highlight the 2nd plan:
- use class
pm-table--highlight
and specifydata-plan-number="2"
attribute ontable
tag - and specify the text in
data-highlight=""
attribute on first line, on eachth
.
- use class
- For the first cell of lines, use
th scope="row"
andpm-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>