Reactで、表のセルをドラッグで範囲選択する方法

export type Cell = { row: number; col: number };
// anchor は選び始めたセル、focus は今の端のセル
export type Range = { anchor: Cell; focus: Cell };

// anchor と focus を、上下左右の端に直す（どちら向きにドラッグしても同じ四角になる）
export function bounds({ anchor, focus }: Range) {
  return {
    top: Math.min(anchor.row, focus.row),
    bottom: Math.max(anchor.row, focus.row),
    left: Math.min(anchor.col, focus.col),
    right: Math.max(anchor.col, focus.col),
  };
}

export function inRange(range: Range | null, row: number, col: number): boolean {
  if (!range) return false;
  const b = bounds(range);
  return b.top <= row && row <= b.bottom && b.left <= col && col <= b.right;
}

// 選んだ範囲を、タブと改行で区切った文字列にする（表計算ソフトに貼れる形）
export function toTSV(data: string[][], range: Range): string {
  const b = bounds(range);
  return data
    .slice(b.top, b.bottom + 1)
    .map((row) => row.slice(b.left, b.right + 1).join('\t'))
    .join('\n');
}

import { useRef, useState } from 'react';
import { bounds, inRange, toTSV, type Cell, type Range } from './range';

type Props = {
  label: string;
  columns: string[];
  rowHeaders: string[];
  data: string[][]; // data[行][列]
};

const keys: Record<string, [number, number]> = {
  ArrowUp: [-1, 0], ArrowDown: [1, 0], ArrowLeft: [0, -1], ArrowRight: [0, 1],
};

function sameCell(a: Cell, b: Cell) {
  return a.row === b.row && a.col === b.col;
}

// 画面上の位置にあるセルを探す
function cellAt(x: number, y: number, table: HTMLTableElement): Cell | null {
  const td = document.elementFromPoint(x, y)?.closest<HTMLTableCellElement>('td[data-row]');
  if (!td || !table.contains(td)) return null;
  return { row: Number(td.dataset.row), col: Number(td.dataset.col) };
}

export function CellRangeTable({ label, columns, rowHeaders, data }: Props) {
  const [range, setRange] = useState<Range | null>(null);
  const dragging = useRef(false);

  function onPointerDown(e: React.PointerEvent<HTMLTableElement>) {
    if (e.button !== 0) return;
    const cell = cellAt(e.clientX, e.clientY, e.currentTarget);
    if (!cell) return;
    e.currentTarget.setPointerCapture(e.pointerId);
    dragging.current = true;
    // Shift を押していれば、前の起点から伸ばす
    setRange((prev) => (e.shiftKey && prev ? { anchor: prev.anchor, focus: cell } : { anchor: cell, focus: cell }));
  }

  function onPointerMove(e: React.PointerEvent<HTMLTableElement>) {
    if (!dragging.current) return;
    const cell = cellAt(e.clientX, e.clientY, e.currentTarget);
    if (!cell) return; // 表の外では、最後のセルのまま
    setRange((prev) => (prev && !sameCell(prev.focus, cell) ? { ...prev, focus: cell } : prev));
  }

  function endDrag() {
    dragging.current = false;
  }

  function onKeyDown(e: React.KeyboardEvent<HTMLTableElement>) {
    const d = keys[e.key];
    if (!d) return;
    e.preventDefault(); // 矢印キーでページがスクロールしないように
    setRange((prev) => {
      const from = prev?.focus ?? { row: 0, col: 0 };
      const next = {
        row: Math.min(data.length - 1, Math.max(0, from.row + d[0])),
        col: Math.min(columns.length - 1, Math.max(0, from.col + d[1])),
      };
      return e.shiftKey && prev ? { anchor: prev.anchor, focus: next } : { anchor: next, focus: next };
    });
  }

  function onCopy(e: React.ClipboardEvent<HTMLTableElement>) {
    if (!range) return;
    e.preventDefault();
    e.clipboardData.setData('text/plain', toTSV(data, range));
  }

  const b = range && bounds(range);
  const values = b ? data.slice(b.top, b.bottom + 1).flatMap((r) => r.slice(b.left, b.right + 1)) : [];
  const sum = values.reduce((s, v) => s + Number(v), 0);

  return (
    <div>
      <table
        className="cell-range"
        role="grid"
        aria-label={label}
        aria-multiselectable="true"
        tabIndex={0}
        onPointerDown={onPointerDown}
        onPointerMove={onPointerMove}
        onPointerUp={endDrag}
        onPointerCancel={endDrag}
        onKeyDown={onKeyDown}
        onCopy={onCopy}
      >
        <thead>
          <tr>
            <th />
            {columns.map((c) => <th key={c} scope="col">{c}</th>)}
          </tr>
        </thead>
        <tbody>
          {data.map((row, r) => (
            <tr key={rowHeaders[r]}>
              <th scope="row">{rowHeaders[r]}</th>
              {row.map((v, c) => (
                <td
                  key={c}
                  data-row={r}
                  data-col={c}
                  aria-selected={inRange(range, r, c)}
                  className={range && sameCell(range.focus, { row: r, col: c }) ? 'focus' : undefined}
                >
                  {v}
                </td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
      <p className="status" aria-live="polite">
        {values.length > 0 ? `${values.length}個のセル　合計 ${sum}` : 'セルが選ばれていません'}
      </p>
    </div>
  );
}

const columns = ['りんご', 'みかん', 'ぶどう', 'もも'];
const rowHeaders = ['1月', '2月', '3月', '4月', '5月'];
const data = [
  ['12', '30', '8', '0'],
  ['15', '24', '10', '2'],
  ['20', '18', '9', '5'],
  ['11', '9', '14', '13'],
  ['7', '6', '21', '25'],
];

export function App() {
  return <CellRangeTable label="月ごとの果物の数" columns={columns} rowHeaders={rowHeaders} data={data} />;
}

.cell-range {
  border-collapse: collapse;
  user-select: none;
  touch-action: none;
}
.cell-range td { cursor: cell; }
.cell-range td[aria-selected='true'] { background: #c4f1fa; }
.cell-range td.focus { outline: 2px solid #067a98; outline-offset: -2px; }
.cell-range:focus-visible { outline: 2px solid #00c8e8; outline-offset: 2px; }

-    const cell = cellAt(e.clientX, e.clientY, e.currentTarget);
-    if (!cell) return; // 表の外では、最後のセルのまま
+    const td = (e.target as HTMLElement).closest<HTMLTableCellElement>("td[data-row]");
+    if (!td) return;
+    const cell = { row: Number(td.dataset.row), col: Number(td.dataset.col) };

"12\t30\n15\t24\n20\t18"