Editing directly within the grid.
| Order | Customer | Status | Total |
|---|---|---|---|
| #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="inle" data-editing="1041" style="--accent:#241430;">
<div class="inle__scroll">
<table class="inle__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></tr></thead>
<tbody>
<tr><td>#1042</td><td>A. Whitfield</td><td>Shipped</td><td>£64.00</td></tr>
<tr data-row="1041">
<td>#1041</td><td>R. Okafor</td>
<td>
<span class="inle__static">Processing</span>
<span class="inle__edit"><input type="text" class="inle__input" value="Delayed" aria-label="Status for order #1041"><button type="button" class="inle__save">Save</button><button type="button" class="inle__cancel">Cancel</button></span>
</td>
<td>£128.50</td>
</tr>
<tr data-row="1040">
<td>#1040</td><td>M. Iqbal</td>
<td>
<span class="inle__static">Shipped</span>
<span class="inle__edit"><input type="text" class="inle__input" value="Delayed" aria-label="Status for order #1040"><button type="button" class="inle__save">Save</button><button type="button" class="inle__cancel">Cancel</button></span>
</td>
<td>£22.00</td>
</tr>
<tr><td>#1039</td><td>S. Novak</td><td>Refunded</td><td>£40.00</td></tr>
</tbody>
</table>
</div>
</div>
<style>
.inle { font: 14px system-ui, sans-serif; color: #241430; background: #FAF7F2; max-width: 480px; border: 1px solid #24143020; border-radius: 10px; overflow: hidden; }
.inle__scroll { overflow-x: auto; }
.inle__table { border-collapse: collapse; width: 100%; }
.inle__table caption { text-align: left; font-weight: 600; padding: 10px 14px; }
.inle__table th, .inle__table td { padding: 10px 14px; text-align: left; border-bottom: 1px solid #24143020; white-space: nowrap; }
.inle__table th { background: var(--accent); color: #FAF7F2; }
.inle__edit { display: none; gap: 6px; align-items: center; }
.inle__input { font: inherit; padding: 4px 6px; border: 1px solid #24143060; border-radius: 4px; width: 88px; }
.inle__input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.inle__save, .inle__cancel { font-size: 12px; border: 1px solid #24143040; background: #FAF7F2; border-radius: 4px; padding: 3px 8px; cursor: pointer; }
.inle__save:hover, .inle__cancel:hover { background: #24143010; }
.inle[data-editing="1041"] tr[data-row="1041"] .inle__static,
.inle[data-editing="1040"] tr[data-row="1040"] .inle__static { display: none; }
.inle[data-editing="1041"] tr[data-row="1041"] .inle__edit,
.inle[data-editing="1040"] tr[data-row="1040"] .inle__edit { display: inline-flex; }
.inle[data-editing="1041"] tr[data-row="1041"] td:first-child,
.inle[data-editing="1040"] tr[data-row="1040"] td:first-child { border-left: 3px solid var(--accent); }
</style><div class="max-w-[480px] rounded-[10px] border border-[#24143020] font-sans text-sm text-[#241430] bg-[#FAF7F2] overflow-hidden" data-editing="1041" 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>
</tr></thead>
<tbody>
<tr><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></tr>
<tr data-row="1041">
<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">
<span class="inle__static">Processing</span>
<span class="inle__edit hidden items-center gap-1.5"><input type="text" class="font-inherit px-1.5 py-1 border border-[#24143060] rounded w-[88px]" value="Delayed" aria-label="Status for order #1041"><button type="button" class="text-xs border border-[#24143040] bg-[#FAF7F2] rounded px-2 py-0.5">Save</button><button type="button" class="text-xs border border-[#24143040] bg-[#FAF7F2] rounded px-2 py-0.5">Cancel</button></span>
</td>
<td class="p-3.5 border-b border-[#24143020] whitespace-nowrap">£128.50</td>
</tr>
<tr data-row="1040">
<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">
<span class="inle__static">Shipped</span>
<span class="inle__edit hidden items-center gap-1.5"><input type="text" class="font-inherit px-1.5 py-1 border border-[#24143060] rounded w-[88px]" value="Delayed" aria-label="Status for order #1040"><button type="button" class="text-xs border border-[#24143040] bg-[#FAF7F2] rounded px-2 py-0.5">Save</button><button type="button" class="text-xs border border-[#24143040] bg-[#FAF7F2] rounded px-2 py-0.5">Cancel</button></span>
</td>
<td class="p-3.5 border-b border-[#24143020] whitespace-nowrap">£22.00</td>
</tr>
<tr><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></tr>
</tbody>
</table>
</div>
</div>
<style>
[data-editing="1041"] tr[data-row="1041"] .inle__static,
[data-editing="1040"] tr[data-row="1040"] .inle__static { display: none; }
[data-editing="1041"] tr[data-row="1041"] .inle__edit,
[data-editing="1040"] tr[data-row="1040"] .inle__edit { display: inline-flex; }
</style>function InlineEditing({
caption = "Customer orders",
accent = "#241430",
editingRow = "1041",
fieldValue = "Delayed",
saveLabel = "Save",
}) {
const rows = [
{ id: "1042", cells: ["#1042", "A. Whitfield", "Shipped", "£64.00"] },
{ id: "1041", cells: ["#1041", "R. Okafor", "Processing", "£128.50"] },
{ id: "1040", cells: ["#1040", "M. Iqbal", "Shipped", "£22.00"] },
{ id: "1039", cells: ["#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) => <th key={h} scope="col" style={cell}>{h}</th>)}
</tr>
</thead>
<tbody>
{rows.map((r) => {
const editing = editingRow === r.id;
return (
<tr key={r.id}>
<td style={{ ...cell, borderLeft: editing ? `3px solid ${accent}` : "none" }}>{r.cells[0]}</td>
<td style={cell}>{r.cells[1]}</td>
<td style={cell}>
{editing ? (
<span style={{ display: "inline-flex", gap: 6, alignItems: "center" }}>
<input type="text" defaultValue={fieldValue} aria-label={`Status for order ${r.cells[0]}`} style={{ font: "inherit", padding: "4px 6px", border: "1px solid #24143060", borderRadius: 4, width: 88 }} />
<button type="button" style={{ fontSize: 12, border: "1px solid #24143040", background: "#FAF7F2", borderRadius: 4, padding: "3px 8px", cursor: "pointer" }}>{saveLabel}</button>
<button type="button" style={{ fontSize: 12, border: "1px solid #24143040", background: "#FAF7F2", borderRadius: 4, padding: "3px 8px", cursor: "pointer" }}>Cancel</button>
</span>
) : r.cells[2]}
</td>
<td style={cell}>{r.cells[3]}</td>
</tr>
);
})}
</tbody>
</table>
</div>
</div>
);
}