# Table · MIAN

Data tables with hover, striping, compact density, selection, numeric alignment and sortable columns.

- Id: `table` · Category: Data display · Needs mian.js: yes · License: MIAN License (free to use)
- Docs: https://mian.ro/components/table
- Use for: data table, sortable table, admin table, transactions list, comparison table, dense data.
- Alternatives: list, description-list.

Use only the classes below and copy the examples' structure and ARIA; change the words. Check your markup at https://mian.ro/api/v1/validate.

## Install

```html
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">
<script src="https://mian.ro/dist/mian.js" defer></script>
```

## Classes

- `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.

## Examples

### Sortable

```html
<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

```html
<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>
```

## Source

Already inside mian.css and mian.js; you do not need it to use the component. To vendor or customise: https://mian.ro/api/v1/components/table/source