Table
A native web component that styles an ordinary HTML table placed in the default slot, preserving all the native semantics of thead, tbody, tfoot, and caption. Use it to display tabular data with the pura look, including a highlighted header, row hover, and borders. Enable the striped attribute for zebra striping on even rows.
Preview
<pura-table striped>
<table>
<caption>Recent orders</caption>
<thead>
<tr>
<th>Customer</th>
<th>Product</th>
<th>Status</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ana Souza</td>
<td>Annual Plan</td>
<td>Paid</td>
<td>$1,200.00</td>
</tr>
<tr>
<td>Bruno Lima</td>
<td>Monthly Plan</td>
<td>Pending</td>
<td>$120.00</td>
</tr>
<tr>
<td>Carla Dias</td>
<td>Annual Plan</td>
<td>Canceled</td>
<td>$1,200.00</td>
</tr>
</tbody>
</table>
</pura-table>Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
striped | boolean | false | Applies zebra striping (a background color on the even rows of the tbody). |
Installation
pura is copy-paste and dependency-free. Load the whole library, or just this component.
<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/table.js"></script>import "./pura/lib/table.js";