Table
Data tables with hover, striping, compact density, selection, numeric alignment and sortable columns.
Sortable
| Status | |||
|---|---|---|---|
| INV-001 | Paid | Card | €250.00 |
| INV-002 | Pending | Transfer | €150.00 |
| INV-003 | Overdue | PayPal | €350.00 |
| INV-004 | Paid | Card | €450.00 |
| Total | €1,200.00 | ||
<div class="mn-table-wrap">
<table class="mn-table mn-table-hover">
<caption>Recent invoices</caption>
<thead><tr>
<th scope="col" aria-sort="none"><button>Invoice</button></th>
<th scope="col">Status</th>
<th scope="col" aria-sort="none"><button>Method</button></th>
<th scope="col" class="mn-num" aria-sort="none"><button>Amount</button></th>
</tr></thead>
<tbody>
<tr><td>INV-001</td><td><span class="mn-badge mn-badge-soft mn-success">Paid</span></td><td>Card</td><td class="mn-num">€250.00</td></tr>
<tr><td>INV-002</td><td><span class="mn-badge mn-badge-soft mn-warning">Pending</span></td><td>Transfer</td><td class="mn-num">€150.00</td></tr>
<tr><td>INV-003</td><td><span class="mn-badge mn-badge-soft mn-danger">Overdue</span></td><td>PayPal</td><td class="mn-num">€350.00</td></tr>
<tr><td>INV-004</td><td><span class="mn-badge mn-badge-soft mn-success">Paid</span></td><td>Card</td><td class="mn-num">€450.00</td></tr>
</tbody>
<tfoot><tr><td colspan="3">Total</td><td class="mn-num">€1,200.00</td></tr></tfoot>
</table>
</div>Striped and compact
| Noodle | Origin | Radius |
|---|---|---|
| Udon | Japan | 12px |
| Pho | Vietnam | 8px |
| Mee | Malaysia | pill |
| Shirataki | Japan | 0 |
<div class="mn-table-wrap">
<table class="mn-table mn-table-striped mn-table-compact">
<thead><tr><th scope="col">Noodle</th><th scope="col">Origin</th><th scope="col">Radius</th></tr></thead>
<tbody><tr><td>Udon</td><td>Japan</td><td>12px</td></tr><tr><td>Pho</td><td>Vietnam</td><td>8px</td></tr><tr><td>Mee</td><td>Malaysia</td><td>pill</td></tr><tr><td>Shirataki</td><td>Japan</td><td>0</td></tr></tbody>
</table>
</div>Installation
Everything ships in one stylesheet and one small script. There is nothing to import per component.
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">
<script src="https://mian.ro/dist/mian.js" defer></script>Prefer to own the files? /r/table.json is a registry item with this component's CSS and example markup, ready to copy into your project with any tool that reads the open registry-item format.
Class reference
| Class / attribute | Description |
|---|---|
| mn-table-wrap | Border and horizontal scroll. |
| mn-table | The table. |
| mn-table-hover · mn-table-striped · mn-table-compact | Modifiers. |
| mn-num | Right-aligned tabular numbers. |
| th[aria-sort] > button | Sortable column: mian.js sorts the rows and updates aria-sort. |
Accessibility
- Use real <th scope> headers and a <caption>. Sort state is exposed through aria-sort on the header.