mirror of
https://github.com/hunvreus/basecoat.git
synced 2026-11-12 13:18:22 +00:00
87 lines
2.0 KiB
Plaintext
87 lines
2.0 KiB
Plaintext
---
|
|
layout: layouts/page.njk
|
|
title: Table
|
|
description: A responsive table component.
|
|
toc:
|
|
- label: Usage
|
|
id: usage
|
|
---
|
|
|
|
{% from "macros/code_preview.njk" import code_preview %}
|
|
{% from "macros/code_block.njk" import code_block %}
|
|
|
|
{% set code %}<div class="overflow-x-auto">
|
|
<table class="table">
|
|
<caption>A list of your recent invoices.</caption>
|
|
<thead>
|
|
<tr>
|
|
<th>Invoice</th>
|
|
<th>Status</th>
|
|
<th>Method</th>
|
|
<th>Amount</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td class="font-medium">INV001</td>
|
|
<td>Paid</td>
|
|
<td>Credit Card</td>
|
|
<td class="text-right">$250.00</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="font-medium">INV002</td>
|
|
<td>Pending</td>
|
|
<td>PayPal</td>
|
|
<td class="text-right">$150.00</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="font-medium">INV003</td>
|
|
<td>Unpaid</td>
|
|
<td>Bank Transfer</td>
|
|
<td class="text-right">$350.00</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="font-medium">INV004</td>
|
|
<td>Paid</td>
|
|
<td>Paypal</td>
|
|
<td class="text-right">$450.00</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="font-medium">INV005</td>
|
|
<td>Paid</td>
|
|
<td>Credit Card</td>
|
|
<td class="text-right">$550.00</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="font-medium">INV006</td>
|
|
<td>Pending</td>
|
|
<td>Bank Transfer</td>
|
|
<td class="text-right">$200.00</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="font-medium">INV007</td>
|
|
<td>Unpaid</td>
|
|
<td>Credit Card</td>
|
|
<td class="text-right">$300.00</td>
|
|
</tr>
|
|
</tbody>
|
|
<tfoot>
|
|
<tr>
|
|
<td colspan="3">Total</td>
|
|
<td class="text-right">$2,500.00</td>
|
|
</tr>
|
|
</tfoot>
|
|
</table>
|
|
</div>{% endset %}
|
|
{{ code_preview("table", code, "w-full") }}
|
|
|
|
<h2 id="usage"><a href="#usage">Usage</a></h2>
|
|
|
|
<section class="prose">
|
|
<p>Simply add the <code>table</code> class to your table element.</p>
|
|
</section>
|
|
|
|
{% set code %}<table class="table">
|
|
<!-- Content of your table -->
|
|
</table>{% endset %}
|
|
{{ code_block(code) }} |