Row Editing

Editing an entire row.

html

<div class="redt" data-editing="1041" style="--accent:#241430;">
  <div class="redt__scroll">
    <table class="redt__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"><span class="sr-only">Row actions</span></th></tr></thead>
      <tbody>
        <tr><td>#1042</td><td>A. Whitfield</td><td>Shipped</td><td></td></tr>
        <tr data-row="1041">
          <td>#1041</td>
          <td><span class="redt__static">R. Okafor</span><input type="text" class="redt__edit redt__input" value="Rafael Okafor" aria-label="Customer for order #1041"></td>
          <td><span class="redt__static">Processing</span><input type="text" class="redt__edit redt__input" value="Processing" aria-label="Status for order #1041"></td>
          <td><span class="redt__edit"><button type="button" class="redt__save">Save</button><button type="button" class="redt__cancel">Cancel</button></span></td>
        </tr>
        <tr data-row="1040">
          <td>#1040</td>
          <td><span class="redt__static">M. Iqbal</span><input type="text" class="redt__edit redt__input" value="Rafael Okafor" aria-label="Customer for order #1040"></td>
          <td><span class="redt__static">Shipped</span><input type="text" class="redt__edit redt__input" value="Processing" aria-label="Status for order #1040"></td>
          <td><span class="redt__edit"><button type="button" class="redt__save">Save</button><button type="button" class="redt__cancel">Cancel</button></span></td>
        </tr>
        <tr><td>#1039</td><td>S. Novak</td><td>Refunded</td><td></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;}
.redt { font: 14px system-ui, sans-serif; color: #241430; background: #FAF7F2; max-width: 480px; border: 1px solid #24143020; border-radius: 10px; overflow: hidden; }
.redt__scroll { overflow-x: auto; }
.redt__table { border-collapse: collapse; width: 100%; }
.redt__table caption { text-align: left; font-weight: 600; padding: 10px 14px; }
.redt__table th, .redt__table td { padding: 10px 14px; text-align: left; border-bottom: 1px solid #24143020; white-space: nowrap; }
.redt__table th { background: var(--accent); color: #FAF7F2; }
.redt__edit { display: none; }
.redt__input { font: inherit; padding: 4px 6px; border: 1px solid #24143060; border-radius: 4px; width: 96px; }
.redt__input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.redt__save, .redt__cancel { font-size: 12px; border: 1px solid #24143040; background: #FAF7F2; border-radius: 4px; padding: 3px 8px; cursor: pointer; margin-right: 4px; }
.redt[data-editing="1041"] tr[data-row="1041"] .redt__static,
.redt[data-editing="1040"] tr[data-row="1040"] .redt__static { display: none; }
.redt[data-editing="1041"] tr[data-row="1041"] .redt__edit,
.redt[data-editing="1040"] tr[data-row="1040"] .redt__edit { display: inline-flex; gap: 4px; align-items: center; }
.redt[data-editing="1041"] tr[data-row="1041"],
.redt[data-editing="1040"] tr[data-row="1040"] { background: #24143008; }
</style>

tailwind

<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"><span class="sr-only">Row actions</span></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]"></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"><span class="redt__static">R. Okafor</span><input type="text" class="redt__edit hidden font-inherit px-1.5 py-1 border border-[#24143060] rounded w-[96px]" value="Rafael Okafor" aria-label="Customer for order #1041"></td>
          <td class="p-3.5 border-b border-[#24143020] whitespace-nowrap"><span class="redt__static">Processing</span><input type="text" class="redt__edit hidden font-inherit px-1.5 py-1 border border-[#24143060] rounded w-[96px]" value="Processing" aria-label="Status for order #1041"></td>
          <td class="p-3.5 border-b border-[#24143020] whitespace-nowrap"><span class="redt__edit hidden gap-1"><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>
        </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"><span class="redt__static">M. Iqbal</span><input type="text" class="redt__edit hidden font-inherit px-1.5 py-1 border border-[#24143060] rounded w-[96px]" value="Rafael Okafor" aria-label="Customer for order #1040"></td>
          <td class="p-3.5 border-b border-[#24143020] whitespace-nowrap"><span class="redt__static">Shipped</span><input type="text" class="redt__edit hidden font-inherit px-1.5 py-1 border border-[#24143060] rounded w-[96px]" value="Processing" aria-label="Status for order #1040"></td>
          <td class="p-3.5 border-b border-[#24143020] whitespace-nowrap"><span class="redt__edit hidden gap-1"><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>
        </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]"></td></tr>
      </tbody>
    </table>
  </div>
</div>
<style>
[data-editing="1041"] tr[data-row="1041"] .redt__static,
[data-editing="1040"] tr[data-row="1040"] .redt__static { display: none; }
[data-editing="1041"] tr[data-row="1041"] .redt__edit,
[data-editing="1040"] tr[data-row="1040"] .redt__edit { display: inline-flex; }
</style>

react

function RowEditing({
  caption = "Customer orders",
  accent = "#241430",
  editingRow = "1041",
  nameValue = "Rafael Okafor",
  statusValue = "Processing",
}) {
  const rows = [
    { id: "1042", cells: ["#1042", "A. Whitfield", "Shipped"] },
    { id: "1041", cells: ["#1041", "R. Okafor", "Processing"] },
    { id: "1040", cells: ["#1040", "M. Iqbal", "Shipped"] },
    { id: "1039", cells: ["#1039", "S. Novak", "Refunded"] },
  ];
  const cell = { padding: "10px 14px", borderBottom: "1px solid #24143020", whiteSpace: "nowrap" };
  const input = { font: "inherit", padding: "4px 6px", border: "1px solid #24143060", borderRadius: 4, width: 96 };
  const btn = { fontSize: 12, border: "1px solid #24143040", background: "#FAF7F2", borderRadius: 4, padding: "3px 8px", cursor: "pointer", marginRight: 4 };
  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", ""].map((h, i) => <th key={i} scope="col" style={cell}>{h}</th>)}
            </tr>
          </thead>
          <tbody>
            {rows.map((r) => {
              const editing = editingRow === r.id;
              return (
                <tr key={r.id} style={{ background: editing ? "#24143008" : "transparent" }}>
                  <td style={cell}>{r.cells[0]}</td>
                  <td style={cell}>{editing ? <input defaultValue={nameValue} style={input} aria-label={`Customer for order ${r.cells[0]}`} /> : r.cells[1]}</td>
                  <td style={cell}>{editing ? <input defaultValue={statusValue} style={input} aria-label={`Status for order ${r.cells[0]}`} /> : r.cells[2]}</td>
                  <td style={cell}>{editing && <span><button type="button" style={btn}>Save</button><button type="button" style={btn}>Cancel</button></span>}</td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </div>
  );
}