Components

Table(SCSS)

Options for styling tabular data.

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

This component is moving out of Thumbprint

This component will soon be moved out of Thumbprint and into the website codebase. No action is required of you and you may continue using it. The Design Systems team will own the migration.

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>