@thumbtack/tp-ui-element-table
v1.3.8
Published
### Default
Downloads
4
Keywords
Readme
package: '@thumbtack/tp-ui-element-table' kit: table/index.mdx platform: scss url: /components/table/scss/ mdxType: componentApi
import '@thumbtack/tp-ui-element-table';
Table options
Default
<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
<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
<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>