Bulk actions
A bar that appears when rows are selected, the count, actions for the selection, and a way out, with select-all.
Selectable table
| Invoice | Customer | Amount | |
|---|---|---|---|
| INV-2041 | Halden & Co | €1,240.00 | |
| INV-2040 | Orbital GmbH | €380.50 | |
| INV-2039 | Kestrel Ltd | €4,900.00 | |
| INV-2038 | Marrow SRL | €96.00 |
<div class="mn-bulk" data-mn-bulk>
<div class="mn-bulkbar" hidden><p role="status"><strong data-mn-bulk-count>0</strong> selected</p><div class="mn-row"><button class="mn-btn mn-btn-sm mn-btn-outline" type="button"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 4v12M7 11l5 5 5-5"/><path d="M4 16v3a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-3"/></svg> Export</button><button class="mn-btn mn-btn-sm mn-btn-outline" type="button">Mark paid</button><button class="mn-btn mn-btn-sm mn-btn-outline mn-danger" type="button">Void</button></div></div>
<div class="mn-table-wrap"><table class="mn-table mn-table-compact">
<thead><tr><th scope="col" style="width:2.5rem"><input class="mn-checkbox" type="checkbox" data-mn-bulk-all aria-label="Select all invoices"></th><th scope="col">Invoice</th><th scope="col">Customer</th><th scope="col" class="mn-num">Amount</th></tr></thead>
<tbody>
<tr><td><input class="mn-checkbox" type="checkbox" aria-label="Select INV-2041"></td><td>INV-2041</td><td>Halden & Co</td><td class="mn-num">€1,240.00</td></tr>
<tr><td><input class="mn-checkbox" type="checkbox" aria-label="Select INV-2040"></td><td>INV-2040</td><td>Orbital GmbH</td><td class="mn-num">€380.50</td></tr>
<tr><td><input class="mn-checkbox" type="checkbox" aria-label="Select INV-2039"></td><td>INV-2039</td><td>Kestrel Ltd</td><td class="mn-num">€4,900.00</td></tr>
<tr><td><input class="mn-checkbox" type="checkbox" aria-label="Select INV-2038"></td><td>INV-2038</td><td>Marrow SRL</td><td class="mn-num">€96.00</td></tr>
</tbody></table></div>
</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/bulk-actions.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-bulk | The scope: wraps the table (or list) and the bar. Add data-mn-bulk. |
| mn-bulkbar | The bar; hidden until something is selected. |
| data-mn-bulk-all | On the header checkbox: selects every row; shows indeterminate for some. |
| data-mn-bulk-count | Where the number of selected rows is written. |
Accessibility
- The count is announced (the bar is role="status" for its first line) when the selection changes.
- The header checkbox is labelled “Select all” and reports mixed selection as indeterminate.
- Destructive bulk actions name the number (“Delete 3”) and use a confirm dialog or an undo toast.