Components

Table(SCSS)

Options for styling tabular data.

Version:2.0.7 View sourceChangelogReport issue
Install:yarn add @thumbtack/thumbprint-scss

Table options

Default

Professional Numbers Status
Professional name one 258 Up
Professional name two that runs longer 19 Down
<table class="tp-table">
<thead>
<tr>
<th>Professional</th>
<th class="tp-text--right">Numbers</th>
<th class="tp-cell-collapse">Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>Professional name one</td>
<td class="tp-text--right">258</td>
<td>Up</td>
</tr>
<tr>
<td>Professional name two that runs longer</td>
<td class="tp-text--right">19</td>
<td>Down</td>
</tr>
</tbody>
</table>

Rules

Quote Numbers Status
Quote title one 258 Up
Quote title two that runs longer 19 Down
Quote title three 400 Up
<table class="tp-table tp-table--rule">
<thead>
<tr>
<th>Quote</th>
<th class="tp-text--right">Numbers</th>
<th class="tp-cell-collapse">Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>Quote title one</td>
<td class="tp-text--right">258</td>
<td>Up</td>
</tr>
<tr>
<td>Quote title two that runs longer</td>
<td class="tp-text--right">19</td>
<td>Down</td>
</tr>
<tr>
<td>Quote title three</td>
<td class="tp-text--right">400</td>
<td>Up</td>
</tr>
</tbody>
</table>

Bottom border

Quote Numbers Status
Quote title one 258 Up
Quote title two that runs longer 19 Down
Quote title three 400 Up
<table class="tp-table tp-table--rule-bottom">
<thead>
<tr>
<th>Quote</th>
<th class="tp-text--right">Numbers</th>
<th class="tp-cell-collapse">Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>Quote title one</td>
<td class="tp-text--right">258</td>
<td>Up</td>
</tr>
<tr>
<td>Quote title two that runs longer</td>
<td class="tp-text--right">19</td>
<td>Down</td>
</tr>
<tr>
<td>Quote title three</td>
<td class="tp-text--right">400</td>
<td>Up</td>
</tr>
</tbody>
</table>