Cell Editing

Editing an individual cell.

html

<div class="cedt" style="--accent:#241430;">
  <div class="cedt__scroll">
    <table class="cedt__table">
      <caption>Line items</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 class="cedt__row--active">
          <td>#1041</td><td>R. Okafor</td><td>Processing</td>
          <td class="cedt__cell">
            
            <label class="cedt__field">
              <span class="sr-only">Total for order #1041</span>
              <input type="text" class="cedt__input" value="128.50" aria-invalid="false">
            </label>
            
            
            
          </td>
        </tr>
        <tr><td>#1040</td><td>M. Iqbal</td><td>Shipped</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>
.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;}
.cedt { font: 14px system-ui, sans-serif; color: #241430; background: #FAF7F2; max-width: 480px; border: 1px solid #24143020; border-radius: 10px; overflow: hidden; }
.cedt__scroll { overflow-x: auto; }
.cedt__table { border-collapse: collapse; width: 100%; }
.cedt__table caption { text-align: left; font-weight: 600; padding: 10px 14px; }
.cedt__table th, .cedt__table td { padding: 10px 14px; text-align: left; border-bottom: 1px solid #24143020; white-space: nowrap; }
.cedt__table th { background: var(--accent); color: #FAF7F2; }
.cedt__row--active td:first-child { border-left: 3px solid var(--accent); }
.cedt__cell { position: relative; }
.cedt__input { font: inherit; padding: 4px 6px; border: 1px solid #24143060; border-radius: 4px; width: 84px; }
.cedt__input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.cedt__cell--invalid .cedt__input { border-color: #c0392b; outline-color: #c0392b; }
.cedt__error { display: block; color: #c0392b; font-size: 12px; margin-top: 4px; }
</style>

tailwind

<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">Line items</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]">#1042</td><td class="p-3.5 border-b border-[#24143020]">A. Whitfield</td><td class="p-3.5 border-b border-[#24143020]">Shipped</td><td class="p-3.5 border-b border-[#24143020]">£64.00</td></tr>
        <tr>
          <td class="p-3.5 border-b border-[#24143020]" style="border-left:3px solid #241430">#1041</td>
          <td class="p-3.5 border-b border-[#24143020]">R. Okafor</td><td class="p-3.5 border-b border-[#24143020]">Processing</td>
          <td class="p-3.5 border-b border-[#24143020] relative">
            
            <label class="inline-flex flex-col">
              <span class="sr-only">Total for order #1041</span>
              <input type="text" class="font-inherit px-1.5 py-1 border border-[#24143060] rounded w-[84px] focus-visible:outline focus-visible:outline-2" value="128.50" aria-invalid="false">
            </label>
            
            
            
          </td>
        </tr>
        <tr><td class="p-3.5 border-b border-[#24143020]">#1040</td><td class="p-3.5 border-b border-[#24143020]">M. Iqbal</td><td class="p-3.5 border-b border-[#24143020]">Shipped</td><td class="p-3.5 border-b border-[#24143020]">£22.00</td></tr>
        <tr><td class="p-3.5 border-b border-[#24143020]">#1039</td><td class="p-3.5 border-b border-[#24143020]">S. Novak</td><td class="p-3.5 border-b border-[#24143020]">Refunded</td><td class="p-3.5 border-b border-[#24143020]">£40.00</td></tr>
      </tbody>
    </table>
  </div>
</div>

react

function CellEditing({
  caption = "Line items",
  accent = "#241430",
  editValue = "128.50",
  editing = true,
  invalid = false,
}) {
  const rows = [
    ["#1042", "A. Whitfield", "Shipped", "£64.00"],
    ["#1040", "M. Iqbal", "Shipped", "£22.00"],
    ["#1039", "S. Novak", "Refunded", "£40.00"],
  ];
  const cellStyle = { 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={{ ...cellStyle, borderBottom: "none" }}>{h}</th>)}
            </tr>
          </thead>
          <tbody>
            <tr>
              <td style={{ ...cellStyle, borderLeft: `3px solid ${accent}` }}>#1041</td>
              <td style={cellStyle}>R. Okafor</td>
              <td style={cellStyle}>Processing</td>
              <td style={cellStyle}>
                {editing ? (
                  <label style={{ display: "inline-flex", flexDirection: "column" }}>
                    <span className="sr-only">Total for order #1041</span>
                    <input type="text" defaultValue={editValue} aria-invalid={invalid} style={{ font: "inherit", padding: "4px 6px", borderRadius: 4, width: 84, border: `1px solid ${invalid ? "#c0392b" : "#24143060"}` }} />
                    {invalid && <span role="alert" style={{ display: "block", color: "#c0392b", fontSize: 12, marginTop: 4 }}>Enter a valid amount</span>}
                  </label>
                ) : (
                  <>£{editValue}</>
                )}
              </td>
            </tr>
            {rows.map((row) => (
              <tr key={row[0]}>{row.map((cell, j) => <td key={j} style={cellStyle}>{cell}</td>)}</tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}