Actions attached to a row.
| Order | Customer | Status | Total | Actions |
|---|---|---|---|---|
| #1042 | A. Whitfield | Shipped | £64.00 | |
| #1041 | R. Okafor | Processing | £128.50 | |
| #1040 | M. Iqbal | Shipped | £22.00 | |
| #1039 | S. Novak | Refunded | £40.00 |
<div class="ract" style="--accent:#241430;">
<div class="ract__scroll">
<table class="ract__table">
<caption>Customer orders</caption>
<thead><tr><th scope="col">Order</th><th scope="col">Customer</th><th scope="col">Status</th><th scope="col">Total</th><th scope="col"><span class="sr-only">Actions</span></th></tr></thead>
<tbody>
<tr class="ract__row"><td>#1042</td><td>A. Whitfield</td><td>Shipped</td><td>£64.00</td><td class="ract__actions"><button type="button" class="ract__btn">Edit</button><button type="button" class="ract__btn ract__btn--danger">Delete</button></td></tr>
<tr class="ract__row"><td>#1041</td><td>R. Okafor</td><td>Processing</td><td>£128.50</td><td class="ract__actions"><button type="button" class="ract__btn">Edit</button><button type="button" class="ract__btn ract__btn--danger">Delete</button></td></tr>
<tr class="ract__row"><td>#1040</td><td>M. Iqbal</td><td>Shipped</td><td>£22.00</td><td class="ract__actions"><button type="button" class="ract__btn">Edit</button><button type="button" class="ract__btn ract__btn--danger">Delete</button></td></tr>
<tr class="ract__row"><td>#1039</td><td>S. Novak</td><td>Refunded</td><td>£40.00</td><td class="ract__actions"><button type="button" class="ract__btn">Edit</button><button type="button" class="ract__btn ract__btn--danger">Delete</button></td></tr>
</tbody>
</table>
</div>
</div>
<style>
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.ract { font: 14px system-ui, sans-serif; color: #241430; background: #FAF7F2; max-width: 480px; border: 1px solid #24143020; border-radius: 10px; overflow: hidden; }
.ract__scroll { overflow-x: auto; }
.ract__table { border-collapse: collapse; width: 100%; }
.ract__table caption { text-align: left; font-weight: 600; padding: 10px 14px; }
.ract__table th, .ract__table td { padding: 10px 14px; text-align: left; border-bottom: 1px solid #24143020; white-space: nowrap; }
.ract__table th { background: var(--accent); color: #FAF7F2; }
.ract__actions { display: flex; gap: 6px; opacity: 0; }
.ract__row:hover .ract__actions, .ract__row:focus-within .ract__actions { opacity: 1; }
.ract--visible .ract__actions { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
.ract__actions { transition: opacity .12s; }
}
.ract__btn { font-size: 12px; border: 1px solid #24143040; background: #FAF7F2; border-radius: 4px; padding: 4px 8px; cursor: pointer; }
.ract__btn:hover { background: #24143010; }
.ract__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.ract__btn--danger { color: #c0392b; border-color: #c0392b60; }
</style><div class="max-w-[480px] rounded-[10px] border border-[#24143020] font-sans text-sm text-[#241430] bg-[#FAF7F2] overflow-hidden" style="--accent:#241430;">
<div class="overflow-x-auto">
<table class="border-collapse w-full">
<caption class="text-left font-semibold px-3.5 py-2.5">Customer orders</caption>
<thead><tr class="text-[#FAF7F2]" style="background:#241430">
<th scope="col" class="p-3.5 text-left whitespace-nowrap">Order</th>
<th scope="col" class="p-3.5 text-left whitespace-nowrap">Customer</th>
<th scope="col" class="p-3.5 text-left whitespace-nowrap">Status</th>
<th scope="col" class="p-3.5 text-left whitespace-nowrap">Total</th>
<th scope="col" class="p-3.5"><span class="sr-only">Actions</span></th>
</tr></thead>
<tbody>
<tr class="ract__row group"><td class="p-3.5 border-b border-[#24143020] whitespace-nowrap">#1042</td><td class="p-3.5 border-b border-[#24143020] whitespace-nowrap">A. Whitfield</td><td class="p-3.5 border-b border-[#24143020] whitespace-nowrap">Shipped</td><td class="p-3.5 border-b border-[#24143020] whitespace-nowrap">£64.00</td><td class="ract__actions p-3.5 border-b border-[#24143020] flex gap-1.5 opacity-0 motion-safe:transition-opacity"><button type="button" class="text-xs border border-[#24143040] bg-[#FAF7F2] rounded px-2 py-1">Edit</button><button type="button" class="text-xs border border-[#c0392b60] text-[#c0392b] bg-[#FAF7F2] rounded px-2 py-1">Delete</button></td></tr>
<tr class="ract__row group"><td class="p-3.5 border-b border-[#24143020] whitespace-nowrap">#1041</td><td class="p-3.5 border-b border-[#24143020] whitespace-nowrap">R. Okafor</td><td class="p-3.5 border-b border-[#24143020] whitespace-nowrap">Processing</td><td class="p-3.5 border-b border-[#24143020] whitespace-nowrap">£128.50</td><td class="ract__actions p-3.5 border-b border-[#24143020] flex gap-1.5 opacity-0 motion-safe:transition-opacity"><button type="button" class="text-xs border border-[#24143040] bg-[#FAF7F2] rounded px-2 py-1">Edit</button><button type="button" class="text-xs border border-[#c0392b60] text-[#c0392b] bg-[#FAF7F2] rounded px-2 py-1">Delete</button></td></tr>
<tr class="ract__row group"><td class="p-3.5 border-b border-[#24143020] whitespace-nowrap">#1040</td><td class="p-3.5 border-b border-[#24143020] whitespace-nowrap">M. Iqbal</td><td class="p-3.5 border-b border-[#24143020] whitespace-nowrap">Shipped</td><td class="p-3.5 border-b border-[#24143020] whitespace-nowrap">£22.00</td><td class="ract__actions p-3.5 border-b border-[#24143020] flex gap-1.5 opacity-0 motion-safe:transition-opacity"><button type="button" class="text-xs border border-[#24143040] bg-[#FAF7F2] rounded px-2 py-1">Edit</button><button type="button" class="text-xs border border-[#c0392b60] text-[#c0392b] bg-[#FAF7F2] rounded px-2 py-1">Delete</button></td></tr>
<tr class="ract__row group"><td class="p-3.5 border-b border-[#24143020] whitespace-nowrap">#1039</td><td class="p-3.5 border-b border-[#24143020] whitespace-nowrap">S. Novak</td><td class="p-3.5 border-b border-[#24143020] whitespace-nowrap">Refunded</td><td class="p-3.5 border-b border-[#24143020] whitespace-nowrap">£40.00</td><td class="ract__actions p-3.5 border-b border-[#24143020] flex gap-1.5 opacity-0 motion-safe:transition-opacity"><button type="button" class="text-xs border border-[#24143040] bg-[#FAF7F2] rounded px-2 py-1">Edit</button><button type="button" class="text-xs border border-[#c0392b60] text-[#c0392b] bg-[#FAF7F2] rounded px-2 py-1">Delete</button></td></tr>
</tbody>
</table>
</div>
</div>
<style>
.ract__row:hover .ract__actions, .ract__row:focus-within .ract__actions { opacity: 1; }
</style>function RowActions({
caption = "Customer orders",
accent = "#241430",
actionsVisible = false,
editLabel = "Edit",
deleteLabel = "Delete",
}) {
const rows = [
["#1042", "A. Whitfield", "Shipped", "£64.00"],
["#1041", "R. Okafor", "Processing", "£128.50"],
["#1040", "M. Iqbal", "Shipped", "£22.00"],
["#1039", "S. Novak", "Refunded", "£40.00"],
];
const cell = { padding: "10px 14px", borderBottom: "1px solid #24143020", whiteSpace: "nowrap" };
return (
<div style={{ maxWidth: 480, borderRadius: 10, border: "1px solid #24143020", overflow: "hidden", font: "14px system-ui, sans-serif", color: "#241430", background: "#FAF7F2" }}>
<div style={{ overflowX: "auto" }}>
<table style={{ borderCollapse: "collapse", width: "100%" }}>
<caption style={{ textAlign: "left", fontWeight: 600, padding: "10px 14px" }}>{caption}</caption>
<thead>
<tr style={{ background: accent, color: "#FAF7F2" }}>
{["Order", "Customer", "Status", "Total", ""].map((h, i) => <th key={i} scope="col" style={cell}>{h}</th>)}
</tr>
</thead>
<tbody>
{rows.map((row) => (
<tr key={row[0]} className="ract-row">
{row.map((c, j) => <td key={j} style={cell}>{c}</td>)}
<td style={cell}>
<span style={{ display: "flex", gap: 6, opacity: actionsVisible ? 1 : undefined }} className="ract-actions">
<button type="button" style={{ fontSize: 12, border: "1px solid #24143040", background: "#FAF7F2", borderRadius: 4, padding: "4px 8px", cursor: "pointer" }}>{editLabel}</button>
<button type="button" style={{ fontSize: 12, border: "1px solid #c0392b60", color: "#c0392b", background: "#FAF7F2", borderRadius: 4, padding: "4px 8px", cursor: "pointer" }}>{deleteLabel}</button>
</span>
</td>
</tr>
))}
</tbody>
</table>
</div>
<style>{"\n.ract-row .ract-actions { opacity: 0; }\n.ract-row:hover .ract-actions, .ract-row:focus-within .ract-actions { opacity: 1; }\n@media (prefers-reduced-motion: no-preference) {\n .ract-row .ract-actions { transition: opacity .12s; }\n}\n"}</style>
</div>
);
}