Range Selection

Selecting a range of cells/rows.

html

<div class="rsel" data-range="block" style="--accent:#241430;">
  <div class="rsel__scroll">
    <table class="rsel__table">
      <caption>Expense sheet</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="rsel__rowline">
          <td>#1041</td><td>R. Okafor</td>
          <td class="rsel__cell">Processing<span class="rsel__badge">C2:D3</span></td>
          <td class="rsel__cell">£128.50</td>
        </tr>
        <tr class="rsel__rowline">
          <td>#1040</td><td>M. Iqbal</td>
          <td class="rsel__cell">Shipped</td>
          <td class="rsel__cell">£22.00<span class="rsel__handle" aria-hidden="true"></span></td>
        </tr>
        <tr><td>#1039</td><td>S. Novak</td><td>Refunded</td><td>£40.00</td></tr>
      </tbody>
    </table>
  </div>
</div>
<style>
.rsel { font: 14px system-ui, sans-serif; color: #241430; background: #FAF7F2; max-width: 480px; border: 1px solid #24143020; border-radius: 10px; overflow: hidden; }
.rsel__scroll { overflow-x: auto; }
.rsel__table { border-collapse: collapse; width: 100%; }
.rsel__table caption { text-align: left; font-weight: 600; padding: 10px 14px; }
.rsel__table th, .rsel__table td { padding: 10px 14px; text-align: left; border-bottom: 1px solid #24143020; white-space: nowrap; }
.rsel__table th { background: var(--accent); color: #FAF7F2; }
.rsel__cell { position: relative; }
.rsel__badge { position: absolute; top: 1px; right: 3px; font-size: 10px; font-weight: 600; color: var(--accent); }
.rsel__handle { position: absolute; right: -4px; bottom: -4px; width: 7px; height: 7px; background: var(--accent); border: 1px solid #FAF7F2; }
.rsel[data-range="cell"] .rsel__cell:first-of-type { outline: 2px solid var(--accent); outline-offset: -2px; }
.rsel[data-range="row"] .rsel__rowline { background: #A8E6C155; }
.rsel[data-range="block"] .rsel__cell { background: #A8E6C155; outline: 1px solid var(--accent); outline-offset: -1px; }
</style>

tailwind

<div class="max-w-[480px] rounded-[10px] border border-[#24143020] font-sans text-sm text-[#241430] bg-[#FAF7F2] overflow-hidden" data-range="block" 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">Expense sheet</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 class="rsel__rowline">
          <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="rsel__cell p-3.5 border-b border-[#24143020] whitespace-nowrap relative">Processing<span class="absolute top-0.5 right-1 text-[10px] font-semibold" style="color:#241430">C2:D3</span></td>
          <td class="rsel__cell p-3.5 border-b border-[#24143020] whitespace-nowrap relative">£128.50</td>
        </tr>
        <tr class="rsel__rowline">
          <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="rsel__cell p-3.5 border-b border-[#24143020] whitespace-nowrap relative">Shipped</td>
          <td class="rsel__cell p-3.5 border-b border-[#24143020] whitespace-nowrap relative">£22.00<span aria-hidden="true" class="absolute -right-1 -bottom-1 w-1.5 h-1.5 border border-[#FAF7F2]" style="background:#241430"></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] whitespace-nowrap">£40.00</td></tr>
      </tbody>
    </table>
  </div>
</div>
<style>
[data-range="cell"] .rsel__cell:first-of-type { outline: 2px solid var(--accent); outline-offset: -2px; }
[data-range="row"] .rsel__rowline { background: #A8E6C155; }
[data-range="block"] .rsel__cell { background: #A8E6C155; outline: 1px solid var(--accent); outline-offset: -1px; }
</style>

react

function RangeSelection({
  caption = "Expense sheet",
  accent = "#241430",
  range = "block",
  anchorLabel = "C2:D3",
  showHandles = true,
}) {
  const cell = { padding: "10px 14px", borderBottom: "1px solid #24143020", whiteSpace: "nowrap" };
  const blockCell = {
    ...cell, position: "relative",
    background: range === "row" || range === "block" ? "#A8E6C155" : "transparent",
    outline: range === "block" ? `1px solid ${accent}` : range === "cell" ? `2px solid ${accent}` : "none",
    outlineOffset: -2,
  };
  const rowStyle = { background: range === "row" ? "#A8E6C155" : "transparent" };
  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>
            <tr>{["#1042", "A. Whitfield", "Shipped", "£64.00"].map((c, j) => <td key={j} style={cell}>{c}</td>)}</tr>
            <tr style={rowStyle}>
              <td style={cell}>#1041</td><td style={cell}>R. Okafor</td>
              <td style={blockCell}>Processing{anchorLabel && <span style={{ position: "absolute", top: 1, right: 3, fontSize: 10, fontWeight: 600, color: accent }}>{anchorLabel}</span>}</td>
              <td style={blockCell}>£128.50</td>
            </tr>
            <tr style={rowStyle}>
              <td style={cell}>#1040</td><td style={cell}>M. Iqbal</td>
              <td style={blockCell}>Shipped</td>
              <td style={blockCell}>£22.00{showHandles && <span aria-hidden="true" style={{ position: "absolute", right: -4, bottom: -4, width: 7, height: 7, background: accent, border: "1px solid #FAF7F2" }} />}</td>
            </tr>
            <tr>{["#1039", "S. Novak", "Refunded", "£40.00"].map((c, j) => <td key={j} style={cell}>{c}</td>)}</tr>
          </tbody>
        </table>
      </div>
    </div>
  );
}