Shift-Click Range Select in a Table — Gmail/Sheets-Style Multi-Row Selection

<div class="demo">
  <div class="table-toolbar">
    <span class="sel-count" id="selCount">0 selected</span>
    <span class="sel-hint">Click a row to select it, Shift-click another to select the range between them, Cmd/Ctrl-click to toggle one row</span>
  </div>
  <table class="sel-table">
    <thead>
      <tr><th class="th-check"></th><th>Name</th><th>Status</th><th>Owner</th></tr>
    </thead>
    <tbody id="tbody">
      <tr data-row><td class="td-check"><input type="checkbox" tabindex="-1" /></td><td>Landing page redesign</td><td><span class="status live">Live</span></td><td>Mia Chen</td></tr>
      <tr data-row><td class="td-check"><input type="checkbox" tabindex="-1" /></td><td>Checkout flow v2</td><td><span class="status draft">Draft</span></td><td>Sam Okoye</td></tr>
      <tr data-row><td class="td-check"><input type="checkbox" tabindex="-1" /></td><td>Pricing page copy</td><td><span class="status review">Review</span></td><td>Jules Park</td></tr>
      <tr data-row><td class="td-check"><input type="checkbox" tabindex="-1" /></td><td>Onboarding emails</td><td><span class="status live">Live</span></td><td>Mia Chen</td></tr>
      <tr data-row><td class="td-check"><input type="checkbox" tabindex="-1" /></td><td>Mobile nav revamp</td><td><span class="status draft">Draft</span></td><td>Ravi Singh</td></tr>
      <tr data-row><td class="td-check"><input type="checkbox" tabindex="-1" /></td><td>API docs refresh</td><td><span class="status review">Review</span></td><td>Sam Okoye</td></tr>
      <tr data-row><td class="td-check"><input type="checkbox" tabindex="-1" /></td><td>Dark mode support</td><td><span class="status live">Live</span></td><td>Jules Park</td></tr>
    </tbody>
  </table>
</div>

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, sans-serif; background: #f8fafc; display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 24px; }
.demo { width: 560px; max-width: 100%; display: flex; flex-direction: column; gap: 10px; }

.table-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sel-count { font-size: 12.5px; font-weight: 700; color: #4338ca; background: #eef2ff; padding: 4px 10px; border-radius: 999px; }
.sel-hint { font-size: 11px; color: #94a3b8; }

.sel-table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; overflow: hidden; user-select: none; }
.sel-table th { text-align: left; font-size: 11px; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.4px; padding: 10px 12px; border-bottom: 1px solid #e2e8f0; background: #f8fafc; }
.sel-table td { padding: 10px 12px; font-size: 13px; color: #334155; border-bottom: 1px solid #f1f5f9; }
.sel-table tr:last-child td { border-bottom: none; }
.th-check, .td-check { width: 34px; }
.td-check input { pointer-events: none; accent-color: #6366f1; }

tr[data-row] { cursor: pointer; transition: background 0.1s; }
tr[data-row]:hover { background: #f8fafc; }
tr[data-row].selected { background: #eef2ff; }
tr[data-row].anchor { outline: 2px solid #6366f1; outline-offset: -2px; }

.status { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.status.live { background: #ecfdf5; color: #047857; }
.status.draft { background: #f1f5f9; color: #64748b; }
.status.review { background: #fffbeb; color: #b45309; }

const tbody = document.getElementById('tbody');
const selCount = document.getElementById('selCount');
const rows = Array.from(tbody.querySelectorAll('tr[data-row]'));

let anchorIndex = null; // the last row clicked without a modifier — the fixed end of a shift-click range
const selected = new Set();

function updateRowVisuals() {
  rows.forEach((row, i) => {
    row.classList.toggle('selected', selected.has(i));
    row.querySelector('input[type="checkbox"]').checked = selected.has(i);
    row.classList.toggle('anchor', i === anchorIndex);
  });
  selCount.textContent = `${selected.size} selected`;
}

function selectRange(from, to) {
  const [start, end] = from <= to ? [from, to] : [to, from];
  selected.clear();
  for (let i = start; i <= end; i++) selected.add(i);
}

rows.forEach((row, index) => {
  row.addEventListener('click', (e) => {
    const isToggleModifier = e.metaKey || e.ctrlKey;
    const isRangeModifier = e.shiftKey;

    if (isRangeModifier && anchorIndex !== null) {
      // Range select: fill every row between the anchor and this row,
      // replacing whatever selection existed before — matches Sheets/Gmail
      // behavior where shift-click always defines a fresh contiguous range
      // from the anchor, not an additive union with prior clicks.
      selectRange(anchorIndex, index);
    } else if (isToggleModifier) {
      // Toggle select: add or remove just this one row, leaving everything
      // else untouched, and move the anchor here so a *subsequent* shift-click
      // ranges from this newly toggled row rather than the old anchor.
      if (selected.has(index)) selected.delete(index);
      else selected.add(index);
      anchorIndex = index;
    } else {
      // Plain click: a fresh single-row selection, and this row becomes the
      // new anchor for any future shift-click range.
      selected.clear();
      selected.add(index);
      anchorIndex = index;
    }

    updateRowVisuals();
  });
});

updateRowVisuals();